Cloud Four Blog

Technical notes, War stories and anecdotes

Easy Steps To Speedup Your WordPress Blog

We recently finished optimizing several WordPress blogs for improved performance and I thought “wouldn’t it be great to share our experiences with everyone?” After all, when I look around at all the blogs I know and use, I see that very few are taking advantage of even the simplest performance improvement techniques — surely it’s just a matter of getting the information out there for everyone to use?

A quick search for “wordpress speedup” or “wordpress optimization“, however, reveals that we aren’t suffering from a dearth of information. On the contrary, many, many people have posted articles about their specific techniques and experiences (I’ve listed the best of these in the Related Articles section; you really should read them). This leads me to believe that most bloggers are either apathetic about their site performance or intimidated by the prospect of diving into something they know little about. I tend to think it’s probably the latter, so let’s see if we can make it a little less scary, eh?

Here at Cloud Four, we are big fans of the work done by the Yahoo! Exceptional Performance team to research and publish best practices for improving web performance. For us, the big finding was that most of the end-user response time — as much as 80% of the total page delivery time — occurs after the server has finished all its back-end work to create the page. Why such a long delay? Well, we’ve all been steadily increasing the number of Javascript, stylesheet, and image references on our fancy blog pages, and that means the browser has a lot of work to do before it can completely render the page for the reader. This finding is good news for most of us, since improving the page layout and rendering behavior are well within the skillset of almost anyone who can setup WordPress and install plugins.

What You Should Do Right Now

Here’s the short answer: install a couple plugins, add a few lines to your .htaccess file, and reap the rewards. It is almost certainly guaranteed that you will see an immediate improvement in your site performance, shaving seconds off each page load and impressing your readers. If you truly want to know how and why all this stuff works, you’ll enjoy reading the related articles for more information and insight.

1. Use Firefox, Firebug, and YSlow to measure yourself


The Yahoo! team has published their 34 rules for speeding up your web site and a tool for evaluating web sites against those rules. Strictly speaking, you do not need to install these tools, but I think you will enjoy seeing your YSlow score move from where it is today (probably an “F”) to where it should be (at least a “B”). And joy of joys, your actual site performance will improve accordingly.

2. Enable GZIP compression


Add the following lines to your .htaccess file (the AddOutputFilterByType should all be on one line). This action tells the web server to compress files before sending them to the browser, resulting in reduced bandwidth and faster delivery to the browser. Adding compression is a very safe option.


<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript application/x-javascript application/x-httpd-php application/rss+xml application/atom_xml
</IfModule>

3. Add an Expires Header


Add the following lines to your .htaccess file. This action tells the web server to add an Expires header for files that are unlikely to change in the near future. The reader’s browser will then cache the files until the expiration date, not even bothering to check for a new, updated version in the meantime. Note that if you DO change any files with a far future expiration date you will need to change the file’s name, otherwise any browser with a cached version will fail to fetch your new version. You are most likely to experience this issue with CSS or Javascript files, so don’t say I didn’t warn you.

    <IfModule mod_expires.c>
      ExpiresActive on
      ExpiresByType image/gif "access plus 1 month"
      ExpiresByType image/jpeg "access plus 1 month"
      ExpiresByType image/png "access plus 1 month"
      ExpiresByType text/css "access plus 1 month"
      ExpiresByType application/javascript "access plus 1 month"
      ExpiresByType application/x-javascript "access plus 1 month"
    </IfModule>
  

If mod_expires is not available on your system, you can try this instead:

    <FilesMatch ".(ico|jpg|jpeg|png|gif|js|css)$">
      Header set Expires "Sun, 22 Apr 2018 01:10:54 GMT"
      Header set Cache-Control "max-age=315360000"
      Header unset Pragma
    </FilesMatch>
  
4. Disable ETags


Add the following line to your .htaccess file. This action tells the web server to remove ETags from the HTTP response. For most websites, removing ETags will not affect your performance at all, but it will increase your YSlow score. Removing ETags is a very safe option.

    FileETag none
  
5. Install the PHP Speedy WordPress Plugin


The PHP Speedy WordPress Plugin is a real gem, implementing several of the Yahoo! best practices: combining multiple files to reduce HTTP requests, minifying Javascript and CSS, compressing the files via GZIP compression, and adding far future Expires headers. You should configure PHP Speedy to minify everything, compress Javascript and CSS, and add far future expire headers for both Javascript and CSS. There is no reason to enable GZIP compression for the web page itself, since we are doing that via apache.

Since this plugin modifies the way your page references Javascript and CSS files, take some care to test your site after activating your configuration. PHP Speedy appears to preserve the load order of the files, which is the main thing I care about. And if necessary you can exclude specific files from this optimization step. Still, I recommend that you test like crazy on this one.

6. Install the WP Super Cache Plugin


The WP Super Cache Plugin helps performance by dramatically reducing the time it takes the server to deliver the initial HTML file for the page. There are other steps you can take to optimize your server-side performance, such as eliminating unnecessary plugins and optimizing your page templates, but while you’re thinking about all that, this one little action will make a world of difference. My one configuration note here is to go ahead and enable “Super Cache Compression.” This option is disabled by default, but I recommend that you enable it and just run a quick test to ensure the page is being delivered correctly.

You can verify that the cache is configured and working correctly by visiting the site as an anonymous user and viewing the page source. Compressed pages being served by the cache should by quite fast and the last three lines of the page file will look something like the following.

      <!-- Dynamic Page Served (once) in 1.422 seconds -->
      <!-- Cached page served by WP-Super-Cache -->
      <!-- Compression = gzip -->
  

Results!

By using these techniques, and by adding a bit of image optimization and consolidation, we have seen dramatic performance improvements for the sites we’ve optimized. Typical page loading times have dropped from 5-10 seconds to one second (or less for pages cached by WP Super Cache).

Without sacrificing any page functionality or quality, we have been able to:

  • reduce the empty cache total size by 50% or more
  • reduce the empty cache HTTP requests by 50% or more
  • reduce the primed cache total size by 90% (!)
  • reduce the primed cache HTTP requests to as few as 1 or 2 requests (!)

Where Next?

Well this first part was certainly easy: edit one file (.htaccess) and install two WordPress plugins. These simple steps have probably provided some immediate relief for your readers, and that’s a good thing. From here, I would strongly suggest you review the related articles for other front-end improvements, such as optimizing images and using sprites to reduce the number CSS images on your site. There’s quite a bit more you can do without becoming a programmer or system administrator.

If you do have administrative access to your server, however, you can also begin experimenting with ideas to improve the back-end server performance. You might consider installing a PHP accelerator, such as eAccelerator, to speedup PHP script execution. Or you might want to expend some effort tuning MySQL for your site. For most people, however, these advanced topics are beyond their skill and training, or are simply unavailable in their current hosting environment.

If you decide try any of the techniques in this article, I’d like to hear about your experience, and about what you think you’ll try next.

Good luck!

WordPress Plugins You Need

Resources

11 Comments on “Easy Steps To Speedup Your WordPress Blog”

  1. zuborg says:

    Very funny to observe that all ‘wordpress optimization’ blog posts recommend to remove ETags from http-headers. Did somebody investigate what is that ‘ETag’ and for what purpose it was designed ?

    Removing ETags cause browser to refetch all content which not supported by ‘expire-date’ headers, while ETag-enabled static content isn’t reloaded on next visit.

    If one really want to boost loading time of some page – simply test it by some speedmeter like YSlow, pingdom or websiteoptimization and optimize things which cause loading delays.
    I would recommend also to use this free online website performance measurement tool – http://Site-Perf.com/
    It’s quite customizable and supports a lot of features like on-the-fly html parsing, Keep-Alive and HTTP-Compression.

  2. John Keith says:

    @zuborg You are correct that ETags can serve a useful function to limit file fetches for static content. Strictly speaking, the recommendation should be to normalize your ETags to a format that excludes server-specific information, such as the inode reference in the default apache setup. Since we are adding expire headers, I felt it was safe to recommend removing the ETag header entirely to eliminate a small bit of header information. Your point is well made though. Thanks.

    Like you, we also advocate testing and measuring your site performance against a benchmark. The site-perf.com measurement tool looks like a good one to add to our list of recommended tools. Thanks for including it!

    – John

  3. [...] Easy Steps To Speedup Your WordPress Blog [...]

  4. [...] a few searches of the web, I stumbled upon this post, which happens to contain most of the information I needed to get this done. Steps 2 to 4 were by [...]

  5. Vadim P. says:

    All good, but I read yahoo’s take on ETags too, and that only seems to affect large websites that have a CDN

  6. Vadim P. says:

    I’m having issues with expires. The mod is loaded, however apache gives this error:

    “/.htaccess: ExpiresActive not allowed here”

    Any idea why? I don’t want to use the second method to have stuff expire in 2018 :|

  7. John Keith says:

    @vadim Yahoo’s take on ETags is correct. My goal in the article was to introduce people to a simple measurement technique, the YSlow score, and encourage people to do steps that would improve that score. Removing (or configuring) ETags does help, though you are correct that a site served from a single system will typically not have an ETag issue. In any case, removing ETags does slightly reduce the number of bytes sent by the server to the client, which is important for people who care about such things.

    On your error message: your apache config is probably preventing overrides. You can either move your Expires rules into your apache config or change your config to allow all .htaccess overrides for your blog location.

  8. Great article ……..

    I have been using wordpress for past one year , i have never read a precise article better then this….

    Keep writing

    One more thing i would like to discuss with you that “Krunchit”

    KrunchIt is a free an online service that enables you to compress and uncompress files via the web instead of your desktop.

    You don’t require a winzip software …….

    You can compress your files online ……

    KrunchIt currently lets you

    * upload upto 10 files and compress them online

    * upload a compressed file and decompress it online, view/download contents

    * fetch upto 10 from the web directly, compress them into a single archive

    * fetch a compressed file from the web directly and decompress it online, view/download contents.

    For information kindly click onto : http://www.krunchit.net

  9. [...] improve your WordPress performance we have previously advocated using the WP Super Cache plugin to enable pages served from a static cache.  This works quite well [...]