Wordpress Responsiveness, Part 3

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.