Wordpress Responsiveness, Part 3

May 27, 2013

In Wordpress Responsiveness Part 2 I introduced wrote about WP
Supercache (WPSC)and how to tune it to your site. In this part I’ll
talk about a separate plugin which works well with WPSC, CDN Sync Tool,
and how it can improve your TTFB and load times dramatically.

What a CDN Is

If your site is image heavy or has a wide array of Javascript and CSS
files, you’ll find these do not change often and could be served up in a
cached form. If you can get those images to your readers from a more
local server, even better. This is where a Content Delivery Network
(CDN) comes into play.

A CDN will house a copy of your static resources, or assets, and serve
them up directly. Some CDNs will pull it from your server if they do not
have it and then cache it for some time. Others you have to preload the
assets to the CDN. If this is sounding very familiar, it should be. It
is essentially what WP Supercache does for your web page.

Setting up a CDN manually can be a right pain. Fortunately there are WP
plugins to do this. As we are already using WP Supercache we are going
to use a plugin which works together. We will be using CDN Sync
Tool (CST).

Integrating CST

CST is designed to work with WP Supercache. This means you will be
configuring your setup in two places: the WPSC admin panel and the CST
admin panel.

Installation and configuration is fairly straightforward and heavily
dependent on which CDN you use. I’ll leave that to you and jump right
into the non-CDN aspects of the plugin as here is where we can see a
significant improvement in page responsiveness.

Better Responsiveness Through Minification

If you look at the source for a given web page you wil find it often
full of spaces, empty lines, etc.. These take up data space. With
exceptions which do not matter here, a page of nothing but 15,000 spaces
or “blank lines” will take up the same space as 15,000 letters and the
same download time. Minification at the base is removal of unneeded
data. Between HTML tags, for example, spaces are for the humans writing
HTML and can be removed.

Minifcation in this plugin also can include combination of multiple
files. The stylesheet design of an HTML page (CSS) can include multiple
files. Each file you have to retrieve causes delay in your page, and can
cause additional delay in page loading time. The same is true of
Javascript files.

CST provides options to enable minification in combination with a CDN.
For example instead of 15 javascript files you could wind up with one
cached on the CDN. Here is where we will focus our attention for now.

Javascript Settings

The JS tab handles Javascript minification and combination settings.
You will want to work your way up form basic settings to more advanced,
as some setting can break various Javascript scripts. To begin with
enable combination and select “Body” for placement. These are the first
two options. Save settings, sync with your CDN and verify everything
still works on your site.

If everything works, select the next higher level, sync and continue
testing. Where it can get dicey again is when it comes time to consider
combining external JS files. This can be a significant performance boost
if you use a lot of external scripts. If you use Google Analytics, you
will probably need to ether disable external scripts, or exclude them
specifically. This may be true for other scripts as well so be thorough
in your testing.

When testing look for visual changes in addition to broken
functionality. Sometimes the interplay between CSS and Javascript is
tight enough to break appearances when including external scripts. Now,
on to CSS.

Cascading Style Sheet Options

This tab is very similar to the JS tab, which is reasonable considering
they do the same thing. Here you have fewer options because CSS is
simpler than Javascript. However the “test from small to large”
principle still applies: first minify and test, then combine and test,
and then test inclusion of external CSS files and test. Here your theme
will become the major source of potential hassle as some are coded
better than others, and some are just plain bad.

For this site I wound up going with minification and combination, but
excluding external scripts and CSS. Whenever I change themes or
add/remove plugins I test again.

It is important to resync with your CDN after each change and to then
rebuild your cache if in preload mode. This helps ensure you are
getting/seeing the correct and current content.

Conclusion

By removing slow plugins, analyzing your site traffic profile and
configuring caching, CDN, and CSS/JS minification and combination you
can achieve impressive improvements in the response time (and
subsequently load time) of your site’s pages. There is no silver bullet,
but with these tools and methods you can certainly improve your
experience, your audience’s experience, and be a better network citizen
by consuming fewer resources. Now, go do it.