puremango.co.uk

WordPress is an excellent piece of software. It helps over 27 million people publish their blogs, and people view pages on WP-hosted blogs over 2.1 billion times a month^(source). I use wordpress on all my blogs. But there is growing evidence that page load times are a large contributing factor to bounce rate – those people who close your site before it’s even finished loading. As google have recently shown, the future is instant, and if your blog is taking 7 seconds to load, that could be 6.5 seconds too long for some visitors.

This blog post will teach you how to optimize wordpress performance and keep your visitors more engaged. I’ll be taking you through each step as we speed up wordpress. These tips are largely independent of the theme you’re using, and I’ll guide you through the process as simply as I can.

Setting Up – Profile Your Site.

You can’t efficiently optimise wordpress unless you know where it’s failing. You’ll need to install some firefox add-ons in order to accurately detect where your wordpress blog needs work. First of all get firebug, then download google’s . Restart firefox as instructed.

Once you’ve both firebug and page speed installed, click the firebug icon in your firefox status bar to bring up the firebug console, then go to the Page Speed tab and click ‘Analyze Performance’. The Page Speed add-on will run some tests and give you a report on the problem areas in your blog. It’ll look something like this:

The list is sorted by urgency, so in my case the first thing to do was leverage browser caching. Your results will vary, but I’ve found that the common top causes of wordpress performance issues are:

1. Lack of caching
2. Lack of a CDN (for serving static content)
3. Poorly optimised images
4. CSS issues

I’m not going to talk about CSS issues, as these frequently represent problems with third party scripts like twitter or addthis widgets, or problems with the theme you’re using, or are simply too tangly to be able to supply a one-size-fits-all solution. This is acceptable however, as with proper attention to other areas you can improve wordpress performance enough to be able to avoid having to look into the CSS issues.

The two simplest ways to speed up wordpress are to leverage browser caching and to optimise images, so I’ll talk about those first. Serving static content from a cookieless domain is trickier, but can have a decent impact on loading times and your page speed score.

How to Leverage Browser Caching

This can have a huge impact – GeekWallpapers.com jumped to 90/100 from 86/100 just by fixing this one issue!

You can leverage browser caching by adding a few lines to your .htaccess file. You’ll need FTP or SSH access to your blog’s main folder. I recommend fireftp, putty or a command-line SSH client. You may have some trouble finding your .htaccess file, as it sometimes appears hidden; in the settings on fireftp there’s an option to show hidden files, or if you’re using SSH you should know what you’re doing anyway ;)

htaccess controls a lot of your blog, and can be difficult to troubleshoot once it goes wrong. Take a backup of it, then edit .htaccess to include the following lines at the end of the file:

# expiry headers for images/static content
<FilesMatch "\.(ico|pdf|zip|jpg|png|gif|css)$">
Header set Cache-Control "max-age=29030400, public"
</FilesMatch> # /expiry headers

This will set all files with those extensions to expire after one year. The figure is specified in seconds, so you can use 604800 for a week or 7257600 for 3 months, and so on.

Add any other file extensions which you use that don’t often change, for instance if you hosted a lot of MS Word files, you can edit the FilesMatch line to read:

<FilesMatch "\.(ico|pdf|zip|jpg|png|gif|css|doc)$">

Save that and upload it, and then do a ‘hard refresh’ in firefox – Ctrl-Shift-R – this will reload the blog from fresh without using any locally cached resources. Now in Page Speed, press ‘Refresh Analysis’ and you should see your score improve, as the server will be sending appropriate expiry headers for cacheable resources. Thanks to Jonas for contributing this method of browser caching.

Optimize Images

This is a really simple way to reduce the overall sizes of your site, and hence reduce the load time. Even if Page Speed doesn’t say it’s a big problem, I find it’s worth doing. Expand the ‘optimize images’ heading in the Page Speed report and you’ll be given ‘Save As’ links which will process the images, shaving kilobytes off their size. Just save all of the images and then upload them over the top of the old images and that’s it!

I also save theme files like buttons and backgrounds. They may be overwritten when you next update the theme, but it’s not a big job to re-optimise them. There are even you can use if you’ve got shell access to the server. While you’re tinkering with images, also make sure you’ve specified the image dimensions. It’s just a matter of adding width=’500′ height=’230′ to the <img> element, but it can give you decent speed savings.

Finally, there’s no point serving a huge image if you’re resizing it down in the HTML – make sure your images are saved to the exact dimensions you want them to appear on the page; anything else is just wasteful!

How to Serve Static Content From a Cookieless Domain in WordPress

This one’s a bit trickier to pull off than the caching tip. Every time your browser connects to a site – for a whole page or just an image on the page – it sends any cookie information associated with the domain. This can slow the requests down, and for static content like downloads and images there’s no need for cookies to be sent. By splitting those requests off into separate subdomains you can create your own miniature CDN (Content Delivery Network), and server static content from a cookie free domain.

The first step is to create some subdomains. How to achieve this will vary from host to host. You want to end up with s0.example.com, s1.example.com and s2.example.com, all set up to work identically to the www subdomain – so you can visit www.example.com/images/header.png or s0.example.com/images/header.png and it works both ways.

On dreamhost it’s a snap, just go to ‘manage domains’ in the panel, create a new domain as s0.example.com, and set the web directory to the same as example.com (i.e. no ‘s0′ prefix) and it’ll sort it all out for you. For other web hosting companies, you’ll have to contact your own web host to find out how to achieve this.

Add at least 2 subdomains, and if you’ve got a static-content-heavy site, add a few more.

Test that they work by visiting s0.example.com in your browser – it should look like an exact copy of www.example.com. In fact it’s not a copy, it’s exactly the same site. If you get a network error, like “Firefox cannot find the server”, then you’ll need to wait up to 24 hours for the DNS record to propagate. It’s annoying, but there’s little you can do, the change just has to filter its way to you gradually.

Once you’re sure the static aliases are working, you need to get wordpress to serve up static content from those subdomains. The “My CDN” plugin works excellently for this. Log in to your wordpress admin area and expand the plugins menu on the left, then click ‘Add New’. Search for ‘My CDN’, or download My CDN from the plugin site and upload it to your wordpress install. Either way, get it onto your wordpress and then activate the plugin.

Configure My CDN

Expand the ‘Settings’ menu on your wordpress admin screen, and click ‘My CDN’. Add http://s0.example.com as the pre-URL for JavaScript, CSS and Themes files. If you’ve chosen to add multiple static subdomains, adds them as a comma separated list, http://s0.example.com, http://s1.example and so on. On puremango, I use s1 as the CDN alias for images I specifically include in posts (for instance the page speed screenshot above), and s0 and s2 for theme files and javascript and so on. But the exact set-up is really up to you; tinker with it to see what works best for you.

Test and Refresh Analysis

Now your wordpress blog should be set up to serve static content from a cookieless domain. Just like we did with the browser caching fix, refresh your blog and page speed’s analysis to see what kind of improvement you’ve got. If, like me, you FTP images directly to your site instead of uploading them via wordpress, you’ll need to edit your posts and change the image URLs to reflect the new CDN.

If you’re running google analytics, you will need to set up their system to only serve cookies for the www subdomain instead of every subdomain – otherwise the browser will send cookies to your static subdomains too and there’ll be no benefit! I use the Google Analytics for WordPress plugin, which has an option in the config screen for “Domain Tracking”, which controls the “setDomainName” method. Add www.example.com as the domain and you’ll be set to go.

Enjoy Your New, Faster WordPress Blog!

That’s it! Of course there are lots of other options and tips in the Page Speed tool – minifying JS and CSS, enabling compression on the server and so on – your needs will vary. But hopefully I’ve shown enough of a glimpse into the power of Page Speed, and how it really isn’t that difficult to get your wordpress blog performing optimally. Share your tips in the comments or on twitter .

---

Related Posts:

• A Pointless Update?
• Fast PHP – effective optimisation and bottleneck detection
• Google Images Link Improver Wordpress Plugin