Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
17th January 2012

Optimise WordPress & enhance site performance

Maximise performance of your WordPress installation by using a few plug-ins and useful techniques

Optimise WordPress & enhance site performanceAs the web evolves, it is of even more importance for your new-look WordPress site to respond quickly and efficiently, giving your users and visitors exactly what they’ve searched for without them waiting around for an eternity for it to load.
Site optimisation is more important now than ever, as users access your content on a variety of devices across varying levels of connection speeds.
In this tutorial, we will have a look at some of the plug-ins available to download and implement within your WordPress installation to help reduce server load, optimise code and templates, and go some way to improving the speed and performance of your site.
We’ll primarily focus on adding a caching plug-in to generate and serve static HTML versions of your dynamic content, as well as look at other areas where performance can be enhanced.

tools | tech | trends: WordPress, PHP
expert: Matt Gifford
tutorial files: download here

01. Start caching
Optimise WordPress & enhance site performance
There are a few plug-ins out there to assist in setting up caching, but we’re going to be looking at WP Super Cache. Go to the Plugins>Add New menu option in your WordPress administrator and search for the plug-in by name in the available form field.

02. Install plug-in
Optimise WordPress & enhance site performance
The results from the search displayed in the admin interface should list WP Super Cache as the first option. Select the ‘Install Now’ link to automatically download the plug-in. Alternatively, you can download the plug-in separately and use an FTP client to upload to the plug-ins directory in your WordPress installation. Finally, activate the plug-in.

03. Set permissions
Optimise WordPress & enhance site performance
Depending on the current access configuration of your WordPress installation, you may see an error message regarding the ‘advanced-cache.php’ file. To resolve this issue you simply need to temporarily alter the permissions of the wp-content directory to 777 to allow write privileges, which you can do via your FTP client. Revert to 755 when finished.

04. Caching enabled
Having successfully generated the required files for the plug-in, the WordPress installation should have also made an amendment to the ‘wp-config.php’ file to enable caching. If you see any errors relating to the config file, try adjusting the permission levels and activating the plug-in once more to generate the required changes.

001 /** The name of the         database for WordPress */
002 define(‘WP_CACHE’, true);     //Added by WP-Cache Manager

05. Simple caching
Optimise WordPress & enhance site performance
The plug-in should now present you with a number of tabbed menu options within the administration panel. Within the Easy tab, set Caching On to enable the abilities and static file generation. For the majority of simple blogs this may be enough, but we’ll progress and see what advanced options are available to us.

06. Advanced settings
Optimise WordPress & enhance site performance
There are a number of options available to implement here. The success and availability of some will depend on your hosting plan and server setup, so try them out. Start by checking all recommended settings, specifically the mod_rewrite setting to serve cached files. You can also restrict caching for frequent visitors.

07. Mod rewrite
Optimise WordPress & enhance site performance
The mod rewrite rules required to serve up
the static html-generated files are quite extensive, but the plug-in will warn you that your ‘.htaccess’ file needs to be updated and provides you with the ability to update on your behalf or the content to manually update/create the file yourself.

08. Test caching
Optimise WordPress & enhance site performance
Return to the Easy tab option and run a test on the cache, which retrieves two static-generated files for timestamp comparison. Any issues found here can be a good indication as to what settings on the server you may need to change. You can also delete the cache and start again if you need to.

09. View source
Optimise WordPress & enhance site performance
Check your site and view the source in a number of different browsers to test the caching procedure. The WP Super Cache plug-in will automatically insert cache information at the bottom of every page, with information on caching times and compression to let you know it’s working and hopefully quicker than before.

10. Consider CDN
Optimise WordPress & enhance site performance
If your site relies heavily on static components such as images, CSS or JS files, consider the use of a content distribution network (CDN) to serve these up and share the load. Services such as Amazon S3 or Rackspace Cloud Files can be of help here, and the cache plug-in can be configured to work with these services.

11. Optimise plug-ins
Optimise WordPress & enhance site performance
Deactivate any plug-ins you no longer need or use. These could be having a large impact on loading times and response. Consider the possibility of streamlining any active plug-ins. If you see any code that could be written more efficiently, do so. The smallest tweak to a function could improve loading times and functionality.

12. Combine CSS and JS
Optimise WordPress & enhance site performance
One clear way to improve the performance of any website is to reduce the number of http requests made to obtain resources and assets. Where possible, combine multiple CSS and JS files into one. The WP Minify plug-in assists in collating and minimising the contents of these files. You can get it here: http://bit.ly/wpminify.

13. Load JS in footer
Optimise WordPress & enhance site performance
When creating or amending your WordPress theme, try to place any JS files into the footer of the template. This helps to ensure that all DOM elements have been created on the page before any manipulation or JavaScript functions are performed. WP Minify can help you with this option automatically or manually.

14. Reduce image sizes
Optimise WordPress & enhance site performance
Images can create unnecessary overhead, due to file size and compression. When uploading images, consider reducing the file size where possible to optimise for the web. Alternatively, download and install the WP Smush.it plug-in (http://bit.ly/wp_smush), which will run any image in your media library through Yahoo’s smush.it service and compress the image without losing quality.

15. Browser caching
Using the browser cache doesn’t necessarily increase the loading time of your WordPress installation, but it can help to reduce strain on the server by caching objects that are loaded often. Add the code for this step to your
‘.htaccess’ file, to help reduce the load when requesting static files and images.

001 FileETag MTime Size
002 <ifmodule mod_expires.c>
003 <filesmatch                 “\.(jpg|gif|png|    css|js)$”>
004 ExpiresActive on
005 ExpiresDefault “access plus     1 year”
006 </filesmatch>
007 </ifmodule>

Query performance

WordPress makes it incredibly simple to create custom queries to obtain data not easily provided by the default functions available, but these database interactions need to be as optimal as possible to avoid any latency or lag. Any possible bottlenecks and issues need to be discovered and resolved as quickly as possible, but they’re typically quite hard to track down.
To assist you in finding any query issues, download and install the Debug Queries plug-in (http://bit.ly/oLnht3). This will display all queries running on a page at the bottom of the screen, complete with total time taken to return results, also showing you the full SQL query being run so you can copy it and revise if necessary. It will only show the results for logged-in administrators to the site, so your users never see the output.


  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://purispace.com Maoelana Moehammad

      This is going to help me. Thank you for your tutorial. keep make a good work for better world

    • http://www.yourdigitalspace.com/ Swamykant

      WP Smush.it plug-in is one best tool to improve the site’s performance. I use most of these tips listed here for my blogs.

    • http://blueskydesign.co.uk Daniel

      All sound advice.
      I just love wordpress.

    • http://www.kingslynnwebsitedesign.co.uk Rob at Kings Lynn Website Design

      Thanks for this article, got my page load down from 3.5s to 1.0s within about 10 minutes of reading this! Will be implementing the same changes across all of my client sites now.

    • Pingback: Optimise WordPress & enhance site performance | PHP Teach

    • http://www.1joomla.com Joomla

      This tutorial is very effective & helpful which i was looking for
      Thanks webdesignermag.co

    • http://demiurgestudios.com/member/795007 http://demiurgestudios.com/member/795007

      Do you have a spam problem on this site; I also
      am a blogger, and I was wondering your situation; many of us have created some nice
      procedures and we are looking to swap techniques with other folks,
      please shoot me an e-mail if interested.