As I’m sure most of you will agree, a slow or poorly performing site is a massive no, no. If a site takes more than 5-7 seconds to load, I will click back and try and find an alternative. Of course we don’t want that, we want to keep the visitors on your site as long as possible! So follow these steps to ensure your site is running as quick as it can.
As WordPress is PHP based this guide is aimed at WordPress installations hosted on our Linux platform.
Testing speed / load times
First we need a bench mark. The following tools are used to help identify any loading issues before we start to look at other potential WordPress fixes.
Online tools
- gtmetrix.com – Uses Google Page speed and YSlow to give you a score and grade.
- Pingdom.com – Tests are done from pingdoms dedicated servers using Chrome.
- WebPagetest – A choice of locations, testing in Chrome, IE and FireFox.
- PageSpeed – Get a PageSpeed score and use PageSpeed suggestions to make your web site faster through their online tool.
In browser
- Lighthouse – This can be run via Chrome DevTools. Navigate to More tools > Developer tools, Click the Lighthouse tab
- Pageload time – Simple chrome addon letting you know the time taken to load the site.
Plugins
99% of the time you will need to add a couple of plugins to the site to get the functionality you require. While adding these plugins is an easy process, if there poorly coded or conflict with other code on your site the performance impact can be very noticeable.
What can we do?
Try to keep the number of plugins down, I’ve seen sites with 30+ plugins, half of them doing a similar if not the exact same thing as others. Know what plugins you need and know the functionality of them. Don’t add plugins for simple functions that can be done in the code. For example the Google analytics plugin is great, but adds additional overhead, just place the code provided in the footer of your theme.
Read the users reviews and comments and the developers replies and updates. A good indication of a well developed plugin is that it ensures full compatibility with the most recent versions of WordPress and the number of active installations.
You can see this information WordPress.org plugin page, for this example we’ve chosen the Akismet plugin.
How to figure out what plugins are causing issues?
Manually
The simplest method is to disable all the plugins, measure the site speed, enable another, test the speed and repeat. Not the most glamorous method, but it does give a clear indication of what plugin are causing any slowness and its easy.
Via a plugin
Code Profiler A fantastic tool to help identify potentially problematic plugins. Just install using the plugins manager and run the scan. It will then provide you with a very detailed breakdown of your load times for each plugin, memory used, SQL queries, core load time, percentage of load time dedicated to plugins, etc.
Once you’ve identified a plugin that is causing slowness, disable and remove it. Disabling will stop it slowing the site down, but always remove them as there maybe potential for future security risk as its not getting updated.
Caching
Page & Browser
Page caching is a great way to help lighten the load on your site, the following plugins basically make a static version of your site to serve to visitors.
The two most popular plugins for this are W3 Total Cache & WP Super Cache. Personally I prefer W3, as it allows more customisation and options.
Now browser caching is a very useful trick, it tells your visitors browser what content to cache and for how long. This can be enabled simply by adding a the following lines to your .htaccess file:
<IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType text/html "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 1 month" </IfModule>
The above times can be edited to your sites requirements.
Minifying
Sites these days are relying more and more on Javascripts and to add the functionality they require, while Javascripts are great, the library’s can be a little large.
A way to help with this is to minify them! As the name suggests minifying is simply making the file size smaller by removing any unnecessary code and removing linebreaks. It also combines the javascript and CSS files into one file to reduce http look ups and improve page speed.
How to minify?
Plugins can do this, in fact W3 total cache has this option built in! If you’re not using this, then you can find other plugins in the WordPress plugin directory.
If you don’t want to go down the plugin route, then you can use one of the following online tools to perform this to your sites files,
CSS, Javascript & HTML
Javascript
Images
Before you upload – Best method
Optimise them for web use, you do not need 300 dpi print quality images for a website. I’m not going to go to much into this as Google have produced an industry standard guide.
Using a plugin
I know i’ve said not to use too many plugins, but one you should use if you need to optimise your WordPress images as you upload them is, Smush. You can also optmise your historic image uploads to ensure they are all a small as they can be. A new feature is lazy loading, so visitors only actually load the images they need.
Don’t scale
This one is a no-brainer, don’t use HTML to scale images. Create the image for the purpose, don’t use width and height in HTML to get the desired size. You wouldn’t believe the times i’ve seen a logo used in a header that’s scaled to be displayed as 300px / 50px but the actual image is 3000px / 1000px. And please no .BMP files.
Compression
Just to clarify compression and minifying aren’t the same thing. Compressed data has to be unpacked before it can be run, minified code can be read as is. You will of most likely heard of Gzip, its the most popular and effective method used for websites. Its an easy thing to implement and will reduce the page size and improve loading times.
Again we use a .htaccess file for this. Edit it and place the following code inside;
#Gzip php_flag zlib.output_compression on AddOutputFilterByType DEFLATE text/text text/html text/plain text/css text/xml application/x-javascript application/javascript text/javascript #End Gzip
You can then confirm Gzip is enabled using this website.
Errors
Now doing all the above is very well and good, but if you have any errors generated by your site they will have a detrimental effect on performance. Enable error logging and click though your site thoroughly. We have guides for PHP error logging and general Linux error logging.
Classification: Public
Last saved: 2023/07/05 at 14:09 by Jamie