#wcpdx: Speed Up WordPress

First session at WordCamp Portland this morning was “Speed Up WordPress” with Jason Grigs of Cloud Four. He jokingly argues that “we’ve remade the internet in our image and the image is obese.” Since 2003, web page size has tripled, number of objects has doubled, and we can partially blame it on WordPress. On the developer’s side, the expectation is that everyone is going to be on a fast connection, with broadband at home or at work.

Page load time, however, determines whether people will stay on your site and do what you want them to do. Speed and performance affect can change perceived quality and credibility of the website. “You can have a great brand and your site is really slow and people will think you’re crap online.” It’s critically important that your application maintains the user’s flow and focus. Amazon says they lose $1 million for every extra second in their shopping cart experience. There’s also an environmental impact for slow site. The number of data centers in the last four years has doubled, and has an energy consumption equivalent to five 1,000 megawatt power plants or the entire state of Mississippi.

In short, build a site that is optimized and doesn’t use more resources than it needs to. Be proactive about it.

There are a few steps you can take to get started in optimizing your site. Firebug for Firefox, YSlow (a Firebug plugin), and Google Page Speed are tools to help you in your efforts. First, ask the question: Are you site load issues related to server performance or client performance? You can use Firebug to test how long it takes to download the HTML from the server. If it takes several seconds, then it’s most likely a server issues. Otherwise, it’s a client-side performance issue.

If it’s a server issue, SQL Monitor is a WordPress plugin that will look at how many SQL queries your site is making on each page request. When turned on, it will print all of the queries at the bottom of the page. During the demo, Cloud Four had 49 where Silicon Florist had over 1,000. This will cause a slow response time from the server.

WP Super Cache, when installed and activated, will show you at the bottom of the page whether it’s working or not. Many people install WP Super Cache, activate it, and expect that it will automatically make their sites faster. Sometimes it’s not as simple and doesn’t get configured properly.

Most of the time with site performance, however, it’s not the server. Yahoo found that, across a number of sites, only 5% of the performance was related to downloading HTML. When you’re doing performance work, you should make sure to do a benchmark test at the very beginning. Use that as a foundation for the work that you’re going to be doing.

First rule of improving WordPress performance: GZIP everything like your life depends on it. Case study showed 80% reduction in file size. Most servers will let you do this with an addition to your htaccess file:

<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>

Second rule: Tell browsers to cache everything possible. Even if the file has been stored locally, the browser will still make a request for a new file. Yahoo solves this problem by naming files with the date they were created, and then telling the browser to never expire that file. Something like “logo.png” becomes “logo-20090919.png”. If you need to update the image, then it’s just a matter of uploading a new image with an updated file name. Not doing this will lead to massive HTTP requests on every page the user loads (which is bad). This can also be done through an htaccess change:

<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"
ExpiresByType application/x-icon "access plus 1 year"
</IfModule>

Third rule: Reduce the number of files on each page load. Combine all of the CSS or Javascript into as few as files as possible. WordPress creates this problem because of the number of plugins you can install. Each one wants to add its own CSS and Javascript. There are ways that you can combine them into one request.

Fourth rule: Make sure your images are of the correct size and format. For instance, with the WordCamp Portland logo, the PNG version was 4 kb and JPG version was 24 kb. The JPG image was uploaded to the site originally. Also, make sure images have been resized to what they will be displayed as. Don’t load a larger image than you need to.

Bonus rule: Use CSS sprites for your images and graphics. There’s a website called SpriteMe that will find all of the images on the site, suggest which can be made into a sprite, create the sprite for you, and even generate the new CSS for you to place in your stylesheet. Site optimization for the lazy folk.