Having a fast load time is a very important, and often overlooked, factor in running a successful website. Jacob Neilson, a well renowned expert in the field of web usability, has recently published finding’s that shed some light on the subject.

A ten-second delay will often make users leave a site immediately. And even if they stay, it’s harder for them to understand what’s going on, making it less likely that they’ll succeed in any difficult tasks.

Jacob Neilson, Website Response Times

Google has recently announced that Site Speed is now officially part of it’s ranking process. What does this mean? Faster site’s will be ranked higher in search engine results on Google.

So how do you begin to optimize your WordPress website for faster speed & lower load times? This article will attempt to provide some answers to help you on your journey.

Measure Where You’re Currently At

Before you start to optimize your site for speed it’s best to see where you’re currently at. Without this how can measure the effectiveness of your optimizations?

  1. Pingdom Load Time Test

    Pingdom’s tools will allow you to test the load time of your website. It will also help you identify performance bottlenecks.

  2. Yahoo! YSlow Firefox/Firebug Addon

    YSlow is a firefox/firebug extension build by the Yahoo! development team. It will analyze your website and suggest ways to improve it’s performance based on a set of rules they’ve defined for high performance web pages.

  3. Google Page Speed Firefox/Firebug Addon

    Page Speed is an open-source Firefox/Firebug Add-on created by the Google Development Team. You can use Page Speed to evaluate the performance of your website and reference suggestions on how to improve it.

Caching

Caching is a component that improves server performance by locally storing data so that future requests of that data can be served faster. This is very valuable when you are working with a database. Instead of reference data from the database each time, you can reference it once and store that data closer to home so it loads faster the next time.

  1. Built-in WordPress Caching

    Out of the box WordPress has a pretty solid caching mechanism that is de-activated by default. To activate it you’ll need to add the following to your wp-config.php file, and ensure that the /wp-content/cache/ folder exists and is writeable (755 should be good).

    define('WP_CACHE', true);
  2. WP-SuperCache

    Super cache generates static html files from your dynamic WordPress blog. After a static HTML file is generated your web server will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts. This will drastically reduce the stress WordPress can put on your server and database. Once properly configured the result will be a faster, leaner WordPress site.

  3. Server Caching with eAccelerator & APC

    If you have a VPS or Dedicated server with SSH/Shell access then you should be able to install eAccelerator or APC for server-side caching with PHP. For some impressive stats on using eAccelerator with WP-Super-Cache check out these results.

  4. MySQL Query Caching

    MySQL has a built in query caching system, all you have to do is enable it on your server. If you have access to SSH/Shell then it’s actually fairly easy. To enable query caching open up your MySQL config file and edit it so that query-cache-type is set to 1. After that it will help to adjust the query-cache-size to match your specific needs. I currently use 16MB as a max, but it will vary depending on your specific usage needs. In general, the more powerful the server the higher this number can be.

  5. Built-in Browser Caching

    Using Built-in Browser Cache doesn’t improve the performance/speed of load time but does lower the use of server bandwidth by caching things that load often (like IMG’s & CSS)

    To do this add the following to your .htaccess file:

    # Browser caching
    FileETag MTime Size
    
    
    ExpiresActive on
    ExpiresDefault "access plus 1 year"
    
    

Lowering the number of HTTP request’s

An HTTP request is sent to the server or host of your website anytime you retrieve an HTML page, image, JavaScript or CSS file. These requests are grouped within pages. Simply put, the fewer you have the less time it takes to load your website.

  1. Combine CSS & JS into Fewer Requests

    I suggest using the Autoptimize Plugin for this. It concatenates all scripts and styles, minifies and compresses them, adds expires headers, caches them, and moves styles to the page head, and scripts to the footer. It also minifies the HTML code itself, making your page really lightweight.

  2. Load Images on Demand with “Lazy Load”

    Using the jQuery Image Lazy Load WP plugin will delay loading of images on long pages. Images below the fold won’t be loaded until the user scrolls down. This is opposite of image preloading.

  3. Use Image Sprites

    Image sprites allow you to include multiple images in one image file, reducing the number of requests to files. For more information check out this classic article on A List Apart.

Compression

Data compression or is the process of encoding information using fewer bits than what an unencoded representation would use. Compression allows you to serve smaller files to end users, providing them with a faster loading website.

  1. Minify HTML, CSS & JS

    Minify is method to compress JS/CSS into the smallest file(s) possible. There’s a great plugin called WP Minify that will automatically minify everything for you after activated to improve page load time.

  2. Enable GZIP or mod_deflate Compression

    If you’re running Apache2, then I would suggest checking out the mod_deflate. mod_deflate has replaced Apache 1.3’s mod_gzip in Apache2. To use mod_deflate be sure it’s enabled on your PHP/Apache setup and then add the following to your .htaccess file:

    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css
    
    SetOutputFilter DEFLATE
    

    If you have SSH access to your server and need to setup mod_deflate then I would suggest referring to MediaTemple’s documentation on setting it up here.

    GZIP compression saves as much as 70% of the size on a text-heavy webpage. This means faster loading websites and less latency for your users and less load and bandwidth used by your server.

    To enable GZIP on your server add the following to your .htaccess file.

    # GZIP Compression
    php_flag zlib.output_compression on
    php_value zlib.output_compression_level 2
    
      mod_gzip_on Yes
      mod_gzip_dechunk Yes
      mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
      mod_gzip_item_include handler ^cgi-script$
      mod_gzip_item_include mime ^text/.*
      mod_gzip_item_include mime ^application/x-javascript.*
      mod_gzip_item_exclude mime ^image/.*
      mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
    

    After you have it setup you can verify that it working using this handy web tool at WhatIsMyIP.com.

  3. Prevent leeching and hot linking from other sites around the web

    When your server displays images on your site you’re using valuable resources & queries. Quite often people will find your images on Google and link directly to them, whether their intent is malicious or not. This uses up your bandwidth and puts extra strain on your server. To avoid this add the following to your .htaccess file, replacing www.example.com with your site address.

    
    RewriteEngine on
    RewriteCond %{HTTP_REFERER} !^$
    RewriteCond %{HTTP_REFERER} !^http://(www\.)?example\.com/.*$ [NC]
    RewriteRule .*\.(gif|jpg|png|ico)$ - [F,L]
    
  4. Compress Static Data

    You can reduce the size of your website’s files by harnessing built-in browser compression. This will reduce bandwidth traffic on your server.

    To do this add the following to your .htaccess file:

    # Compress static data
    AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4.0[678] no-gzip
    BrowserMatch bMSIE !no-gzip !gzip-only-text/html

Database Optimization

WordPress is powered by PHP, and all of your content is stored in a MySQL database. Each time you reference content on your website that is stored in the database a query is run. A database query is an operation that extracts information that is stored in a database. The fewer number of queries you make to the database, the faster your WordPress site is for your users. Having fewer database queries will also reduce the stress put on your server/host.

We can also do our best to store information that has been queried by caching our frequently used queries to improve the speed at which they run.

  1. Optimize database tables

    Optimize database tables using the Optimize DB plugin or if you’re running WordPress 2.9+ enable automatic database repair in your wp-config.php file.

    define('WP_ALLOW_REPAIR', true);
  2. Reduce the excess in your database

    Take some unneeded weight off your WordPress database by reducing the number of autosave’s, revisions and trash files using the following commands in your wp-config.php file.

    define('EMPTY_TRASH_DAYS', 10 );
    define('WP_POST_REVISIONS', false);
    define('AUTOSAVE_INTERVAL', 300);
  3. Reduce the number of database queries

    Each time you use a WordPress function you send a query the database for information. Very often, you can bypass that dynamic data, replacing it with static data. A lower number of hits to the database can lower the strain on your database while also increasing the speed of your WordPress site.

    To get started you’ll need to measure how many database queries you’re currently making. It’s also handy to know the amount of time it takes the server to process those queries. To monitor this use the following bit of code. I usually have this added to my template’s footer.php file during development:

    As a working example, the following snippet of code in a common header.php file has 9 calls to the database:

    
    <?php wp_title(''); ?>
    
    
    
    
    

    If we change it to this we’ve effectively reduced 8 queries to the database:

    
    <?php wp_title(''); ?>
    
    
    
    
    

As with most things, there’s always more you can do. If you have any helpful suggestions, criticisms or questions let me know. I’ll do my best to respond to your comments as soon as I can. Thanks, I hope this help’s you on your next WordPress project!

More Resources