You are here: Home » Web Boulevard » Taking my Blog to the Next Level (Part 4): Speed Optimization

Taking my Blog to the Next Level (Part 4): Speed Optimization

March 17th, 2010

Continuing from part 1 (falling in love with your blog again), part 2 (widgetizing & thumbnailing) and part 3 (search engine optimization), in this part I share the steps I’ve taken to enhance the speed and performance of my blog.

Why is your blog speed important? Many reasons really:
- Affects your search engine optimization, yep bots do care about how fast your page loads
- Increases your site traffic indirectly; users are not patient, if your page takes some time to load they might close it down before it does
- Faster means less bandwidth means less costs

A good place to start is a quick health check, I use GTMETRIX which is money free, registration free, and awesome. It gives you basic ratings from Yslow (Yahoo) and page speed (Google) plus tips on what needs to be optimized.

Speed enhancement is mostly about caching really. I will divide this post in two parts, manual bits and plugin bits.

Manual Bits

Adding Expiry Headers

Expiry headers controls elements which browser can cache instead of fetching from the server every time a user visits. Files like CSS, images and javascript which do not change much often are safe to cache. It won’t affect the load speed for first time visitors (or one page visitors), but it will do so significantly for return users and users browsing starting from the second page they view.

I am still not 100% done with my CSS changes so I chose not to cache them for the time being.

My server is Apache and hence I edited my .htaccess file with the following parameters (thanks to google of course):


# BEGIN Define Mime Types
<IfModule mod_mime.c>
AddType application/x-javascript       .js
AddType application/x-shockwave-flash  .swf
AddType image/bmp                      .bmp
AddType image/gif                      .gif
AddType image/jpeg                     .jpeg
AddType image/jpg                      .jpg
AddType image/png                      .png
AddType image/tif                      .tif
AddType image/tiff                     .tiff
AddType image/x-icon                   .ico

</IfModule>
# END Define Mime Types

# BEGIN Headers: Ensure browser caching of objects for 1 month
# Set Expires header
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A0
ExpiresByType application/x-javascript             A2592000
ExpiresByType application/x-shockwave-flash        A2592000
ExpiresByType image/bmp                            A2592000
ExpiresByType image/gif                            A2592000
ExpiresByType image/jpeg                           A2592000
ExpiresByType image/jpg                            A2592000
ExpiresByType image/png                            A2592000
ExpiresByType image/tif                            A2592000
ExpiresByType image/tiff                           A2592000
ExpiresByType image/x-icon                         A2592000

</IfModule>

<FilesMatch "\.(bmp|ico|js|tiff|tif|gif|jpeg|jpg|png|swf)$">
<IfModule mod_headers.c>
# Set Pragma header
Header set Pragma "public"
# Set Cache-Control header
Header append Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>

# Set Entity Tag header
FileETag MTime Size
</FilesMatch>
# END Headers: Ensure client-side caching of objects

Note that I have removed CSS (Stylesheet), HTML (web pages), plain TEXT and XML files from being cached.

Removing ETags

You can read about ETags here, they have to do with setting up change frequency of content by adding requests to the HTTP headers of the site allowing your web pages, the server, and your browser to talk to each other and identify if a page needs to be refreshed from cache or not. I personally do not utilize this in my site so I opted to disabling ETags all together as recommended.

The .htaccess settings above take care of that, however before I applied those, I used to have this in my .htaccess:

FileETag none

Plug-in Bits

After doing some research, I am convinced that the best tool to use (and easiest to setup and configure) is w3 total cache.

This tool is totally awesome! It supports page and database caching , it also supports minifying CSS and JS files, and it supports Content Delivery Networks whether external or self hosted.

I installed the plug-in following the instructions in the readme file. I then retained basic / recommended settings for the tool:

General Settings: I am following recommended, Page Caching: Disk (enhanced), Minify (Disk) and Database Caching (Disk)
Page Cache Settings: I set HTTP: gzip , everything else left as is.
Minify Settings: Minifying means removing excess content from your script and CSS files (comments, spaces, etc). I added JS and CSS files to the minify settings. You can get those from your templates, OR, from GTMETRIX results, it kinda tells you which files you need to minify. I avoided minifying plug-in scripts because they are potential problems.
Database Caching Settings: left as is
CDN: I do not have a CDN setup yet, I am however considering Amazon S3 as an ultimate solution, and self hosted for the interim for testing and fun.I will write about those whenever I apply them. It seems very straightforward, you just enter your settings, upload your media items, and optionally upload your theme files to the CDN. All through the plugin.

My Current page ranks at B on YSlow! (Yahoo) and B on Page Speed (Google) which is really awesome compared to D and D before undergoing this optimization practice. I still haven’t utilized CDN as well, once done I believe I will be hitting A’s.

GTmetrix Speed Test Results