As 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
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
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
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
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
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
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
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
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
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
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
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
14. Reduce image sizes
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>
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.