How to: optimize wordpress blog for maximum speed

Today, the website speed is one of many factors that affect your Google ranking because like Google was talk: “Speeding up websites is important, not just to site owners, but to all Internet users” . So I’m very excited to share what I have learned about web performance (especially WordPress) with you and how to speed up your wordpress site in this article.

First of all, there’are many, many ways you can do to speed up your website, but “optimization” is just thing harder to evaluate, for the easy example: you can make your website faster, but you may loose many visual effects to visitors or some website functions, the small website like a personal web-blog will be optimized easily but it’s NOT for the bigger website with many images, css file, javascript… so that, to suit your needs, you must keep it balanced, some-tricks you can follow, but the others, you shouldn’t (sometimes it’s because the limitation of your host like: your host doesn’t support nginx, xcache.., hard to add alias subdomain or doesn’t support mod_rewrite…).

How fast do your website runs?

Before we start, you should test and make records of your current website speed via this services:

• http://tools.pingdom.com
  
• http://www.websiteoptimization.com/services/analyze/
  
• http://www.iwebtool.com/speed_test
• http://www.webpagetest.org/

And then download Yslow firefox addon and Google Page Speed tool, this is 2 must have tools to analyse and optimize your blog (Firebug addon required).

In the picture above, i’ve made tests on one of my client website before optimization.
And after optimization:

Another way to make a test is using ab - Apache HTTP server benchmarking tool by downloading WampServer and install it, after that start cmd in your windows, locating to the Bin folder of Wampserver apache, in my situation: D:wampbinapacheApache2.2.11bin and type in the command line:

ab -n 1000 -c 10 http://www.example.com/index.php

This command will send 1000 requests with 10 requests at a time to http://www.example.com and then returned back result to you:

You only need to concentrate on requests per second, time per request and transfer rate figures.
All of the results above is just for reference, they will different when compared with each other so when perform testing you must use an individual way to compare.
Ok, so let’s start:

1. Choosing a reliable web hosting company

You couldn’t make a great website with the bored web-host; on the internet, many host provider companies can offer you a great service, I recommend Dreamhost.com to you but a Dreamhost’s control panel may make you confused when using it, others great company are: Bluehost, Hostmonster, Site5, Hostgator…. Another new web hosting company offer a great optimized server for wordpress is: WpWebhost.
But before purchasing any host-plan, besides the price, you should consider carefully their Term of services (CPU and Ram consumption, copyright content policy…), reading reviews on the internet (like and also dislike opinions) and take some quick tests about their speed. (I prefer using Nginx than Apache server to render html, do you know WordPress.com used Nginx technology?)

2. Decide which functions you need, and which you don’t

I’ve visited many wordpress blogs and saw that many people put on their blog some functions that is not necessary for them like guest-book, chat-box, visit counter…. (Sometimes they must take something to put on sidebar). If you want your blog run faster, please keep it clean and well structured.

In your wordpress blog you can disable unused plugins (some of them create many css and javascript request when enable, even create database tables in your database). Use only the plugins you really need, and delete the rest.

3. Optimize your images

Using CSS Sprites:

CSS Sprites is the best way to minimize HTTP requests for images, CSS Sprites’s well know through community, you can read more about it:

• http://www.alistapart.com/articles/sprites
• http://css-tricks.com/css-sprites/

After creating the sprites image you should make its size smaller by following this comprehensive guide made by Sixrevisions.com or simply using a free online optimization tool like:Yahoo Smush.it service, Punypng (Google Page Speed tool also offer a great one). Besides using CSS Sprites you can use another technique:Image maps (But this is too old and not using as many as CSS Sprites)

Specify image width and height:

Another small tip is when you embed your images to website, let’s specify the width and height attribute clearly so the web browser don’t spend much time calculating the image size when it’s requested:

<img title="image title" alt="" width="image width" height="image height" />

Serving scaled images:

If your image’s size is 1000*1000px, but when embed it on the web page, you only want it shows 500*500px, in this situation you should using the Graphic editor to re-size the image to 500*500px and using it, it’s not only reduce the bandwidth consumption but also the CPU resources to process this image. you can read more at here.

4. Add an Expires or a Cache-Control Header

This module controls the setting of the Expires HTTP header and the max-age directive of the Cache-Control HTTP header in server responses. The expiration date can set to be relative to either the time the source file was last modified, or to the time of the client access.

These HTTP headers are an instruction to the client about the document’s validity and persistence. If cached, the document may be fetched from the cache rather than from the source until this time has passed. After that, the cache copy is considered “expired” and invalid, and a new copy must be obtained from the source.
http://httpd.apache.org/docs/2.0/mod/mod_expires.html

Using a far future Expires header affects page views only after a user has already visited your site. It has no effect on the number of HTTP requests when a user visits your site for the first time and the browser’s cache is empty. (Yahoo)

When using Apache web server (with mod_expires enable) you can easily doing this by adding to your .htaccess file:

ExpiresActive On
ExpiresDefault "access plus 1 month"

or more flexible way:

ExpiresActive on
ExpiresDefault "access plus 10 day"
ExpiresByType image/gif "access plus 2 years"
ExpiresByType image/jpg "access plus 2 years"
ExpiresByType image/png "access plus 2 years"
ExpiresByType image/jpeg "access plus 2 years"
ExpiresByType text/javascript "access plus 2 years"
ExpiresByType application/x-javascript "access plus 2 years"
ExpiresByType text/css "access plus 2 years"
ExpiresByType text/html "access plus 1 day"
ExpiresByType text/plain "access plus 1 day"
ExpiresByType application/x-shockwave-flash "access plus 2 years"

another way to do that:

Header set Expires "Thu, 7 May 2010 22:00:00 GMT"

You can specify which types of proxies can cache certain content, and how long files should be cached by adding Cache-Control headers, so the final code is:

Header set Cache-Control "public"
Header set Expires "Thu, 7 May 2010 22:00:00 GMT"

Use Yslow or Google Page Speed tools (or using the online tool Cacheability Query ) to test that you have caching and validation set up correctly.

5. Configure ETags

Configure Entity tags (ETags) wrong may cause you some problems about cache validator, the simple thing i want to recomend is putting this in your .htaccess file:

FileETag none

6. Using php flush(); function

It allows you to send your partially ready HTML response to the browser so that the browser can start fetching components while your backend is busy with the rest of the HTML page. (Yahoo)

Let edit your header.php in your WordPress theme folder like this:
</head>
<?php flush(); ?>

7. Reduce the number of dynamic PHP and http calls:

For easy example, you should replace:

• <?php bloginfo('home'); ?>

  with your website URL like http://www.example.com

• <?php bloginfo('name'); ?>

  with your website name

• Making your stylesheet URL, pingback URL, feed URLs static
• Removing the blog’s WordPress version

8. Minify, combine JavaScript and CSS file

If your web-blog has many javascript and css file like:

<link rel="stylesheet" type="text/css" media="all" href="css C"/>
<link rel="stylesheet" type="text/css" media="all" href="css D"/>
<script type="text/javascript" src="script A"></script>
<script type="text/javascript" src="script B"></script>

The first thing you can try is combine them into one file like:

<link rel="stylesheet" type="text/css" media="all" href="css combine"/>
<script type="text/javascript" src="script combine"></script>

After that:
With javascript file, you can use some javascript minify tools to compress the file size like:

• http://jscompress.com/
• http://www.minifyjavascript.com/

…and with Css file:

• http://www.cssoptimiser.com/
• http://www.cleancss.com/ (let choose a highest compression level)

where to put css and javascript and the order of them?

JavaScript code can alter the content and layout of a web page, the browser delays rendering any content that follows a script tag until that script has been downloaded, parsed and executed. So you can follow the simple rules:

• Use external scripts and css file.
• Put css at the top and javascript at bottom. (putting javascript at bottom of web page is really good but sometimes you need to put your JScript in the website header section for your page to function correctly).

You should read more about this at: http://code.google.com/speed/page-speed/docs/rtt.html#PutStylesBeforeScripts

Only loading your script when you need it

If some of your scripts only perform its activity at the homepage or single page of your blog you can minify requesting them by using WordPress conditional tags like:

<?php if (is_single()) { ?>
<script type="text/javascript" src=""></script>
</script>
<?php } ?>

9. Reduce DNS Lookups and Split Components Across Domains

Split Components Across Domains

This technique’s very useful for a website that has many images and javascript request, if your website is www.example.com and you make request to
www.example.com/images/a.png
www.example.com/images/b.png
...
It’s better to try this:
static1.example.com/a.png
static2.example.com/b.png
Splitting components allows you to maximize parallel downloads (Firefox usually make 4 connections a time per 1 host). Make sure you’re using not more than 4 domains because of the DNS lookup penalty.

You can do this trick by yourself or using Content Delivery Network services:

CDN is a Content Delivery Network of highly-optimized servers all around the world working together to distribute your content through hundreds of servers instead of a single host.

Some famous companys in this area:

• Max CDN
• SimpleCDN
• Mediatemple CDN
• Amazon S3
• Free CDN (It’s free!!!)

Reduce DNS Lookups

Turn back to the example above, if your website make many request like:
www.example.com/images/a.png -> 1 DNS lookup
www.example2.com/images/b.png -> 1 DNS lookup
static1.example.com/images/c.png -> and 1 more DNS lookup
.....

You may face with DNS lookup penalty (it typically takes 20-120 milliseconds for DNS to lookup the IP address for a given hostname) so let reduce the number of DNS lookup on your page by reducing the number of unique hostnames.

Reducing the number of unique hostnames has the potential to reduce the amount of parallel downloading that takes place in the page. Avoiding DNS lookups cuts response times, but reducing parallel downloads may increase response times. My guideline is to split these components across at least two but no more than four hostnames. This results in a good compromise between reducing DNS lookups and allowing a high degree of parallel downloads.
http://developer.yahoo.com/performance/rules.html#num_http

10. Optimize your Database

Use phpMyAdmin to optimize your database by Logging in to phpMyAdmin, check all the tables, and then chose “optimize table” option or you can use wordpress plugins: WP-DBManager, Optimize DB.

11. Caching your wordpress website

WP Super Cache

This plugin generates static html files from your dynamic WordPress blog. After a html file is generated your webserver will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts.

WP Widget Cache

A high-performance caching plugin for WordPress, and a plus for WP-Cache or WP Super Cache.

DB Cache

This plugin caches every database query with given lifetime.

DB Cache Reloaded

This plugin is a fork of a DB Cache plugin because the author didn’t think DB Cache was updated quick enough.

Hyper Cache

Hyper Cache is a new cache system for WordPress, specifically written for people which have their blogs on low resources hosting provider (cpu and mysql). It works even with hosting based on Microsoft IIS (just tuning the configuration).

W3 Total Cache

Trusted by many popular sites — W3 Total Cache improves the user experience of your blog by improving your server performance, caching every aspect of your site, reducing the download time of your theme and providing transparent content delivery network (CDN) integration.

Which is the best for you? You can use each cache plugin above and then make a test yourself by using tools were mentioned above from “How fast do your website runs?”. In my point of view, if you don’t have a CDN network let’s try HyperCache with DB Cache Reloaded, if you have, W3 Total Cache is for you!

12. Using Jquery to load images

Using lazy load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load. You can check it at here.
Demo website that using Lazy load: Tripwiremagazine or Mashable.
Apart from above techniques, there’are many others thing you can do like:

• Make favicon small and cacheable.
• Use cookie-free domains.
• Make AJAX cacheable.
• Avoid URL redirects….

Other great wordpress plugins I want to share with you:

• Scripts Gzip: A WordPress plugin to merge and compress the CSS and JS links on the page.
• WP Minify: Once enabled, this plugin will combine and compress JS and CSS files to improve page load time.
• WP Smush.it: this plugin seamlessly integrates Smush.it with WordPress.

You can find more useful resources to speed up your WordPress website at “More resources” section.