WordPress is one of the world’s most popular CMSs, however if it not properly optimised then it can become slow to use, and could end with you losing valuable visitors to frustration. I have put together some tips to help you improve your page load speed.
Before you start, you can check the page speed score Google gives to your site using the Page Speed Insights tool, this gives you a rough idea of where your site sits in the eyes of Google, and a better score can improve your rankings in the search engines.
Enable Browser Caching
Your site will load quicker to the visitor if they doesn’t need to reload static data; items such as images, scripts, and styles can be cached on the user’s computer so subsequent page loads don’t have to re-transfer the same files, this is especially handy for low-bandwidth visitors.
Browser caching is usually specified in your server configuration, and the exact implementation depends on your server software. It is worth noting some browsers do try and store certain cacheable files for a short period.
Enable Server Caching
One of they key delays in serving a web page is the need to regenerate the same content, most pages on your site are likely to rarely change, such as posts and pages. Adding a caching plugin such as WP Rocket or WP Super Cache allows you to automatically cache these pages on your server with minimal amount of code. These cache files contain the final rendering of your page, and rather than regenerate the page, the plugins allow you to automatically give visitors the pre-loaded version.
These plugins can have adverse effects if not configured correctly, for example when caching a user specific page, however they usually include detailed instructions to get you going.
Large images take longer to load.
By reducing the overall file size of the images they will load more efficiently, this can be achieved by applying compression to your images and/or resizing the images being displayed.
Try reducing your JPEG files to about a 60% quality level before uploading, this usually applies an optimal level of quality vs file size and with photos. Also reduce the overall image dimensions; there is no point in displaying a 2000+ pixel wide image in a 720px wide content space, not only does the user have the download overhead, the browser then has to reduce the image on the fly which delays page rendering.
Finally use a tool such as TinyPNG to apply lossless compression to your JPEGs and PNGs, these strip out the unnecessary meta data (the stuff you cant see) from the image, reducing the file size, sometimes signifcantly.
For images already uploaded there are plugins available to compress them directly from your server, such as Smush It, which reprocess the image either on your server or theirs, to reduce file size.
This one comes in 2 forms; firstly removing unused or unnecessary plugins from your site, and secondly, reducing the plugins themselves.
At some point during page load most plugins need to execute some form of code. By removing the unnecessary plugins from your site you remove the additional code they add. These unused plugins can also have a security impact because, even though its inactive, the code can still be activated by navigating directly to the file. Depending on the plugins removed, you could end up reducing page load time by a few hundred milliseconds, which is fairly significant.
The second part, reducing the plugins, is harder to explain. Simply put, having a plugin that does all manner of things where you only need one part of it is overkill. For example using an entire gallery solution such as NextGEN Gallery when the intention is for a single slider on the homepage means all the NextGEN functionality is loaded, but not used. Try swapping out the bells and whistles for one that does just what you need and no more.
Optimise Scripts and Styles
This is usually achieved by minifying the files (reducing the files to the bare minimum, largely not human readable), but can also also take the form of removing unused data and comments. Most caching plugins (such as the aforementioned WP Rocket and WP Super Cache) provide a minification feature for these files.
[During the research for this post, I actually came across an agency who placed their entire CSS code inline in the
<head> tag. Don’t do this, it leaves the CSS unable to be cached and adds the entire CSS file to the page load, for every page load]
Also, the order in which you load the scripts and styles matter. Generally they are synchronous loads, which means they block the page rendering until they are fully loaded and processed. This is useful for some files such as CSS, but for some scripts this isn’t necessary, try loading scripts near the end of the page where possible, especially when the entire script doesn’t run until the page is ready.
Serve Static Content From Cookie-less Domain
This is a more obscure recommendation, each time you load an item from a server the browser sends all the cookies that are relevant to the domain, however for images, scripts, styles, and other media these cookies are usually useless. Try moving your media to a domain (or subdomain) that doesn’t allow cookies; better yet, you may benefit from using a Content Delivery Network service to serve the content. This will reduce the request time for content, however the effect may only be minimal depending on the number and size of cookies in use
Optimise Your Database
This one doesn’t tend to apply to new sites, but, over time MySQL tables can become fragmented, meaning the time to seek the data can increase, which in turn increases the load time for your site.
By running the
OPTIMIZE TABLE command on your tables you can defragment these tables to improve seek times. More information can be found in the MySQL Reference
Again, another server configuration, most server software can be set up to transfer files via a GZIP encoding which compresses files before sending, the trade off here is it uses marginally extra server resources to compress the file, but then transfers them faster and usually the transfer benefit outweighs the server overhead.
Most server software has its own way to implement the compression, just be aware that it isn’t supported by older browsers such as internet explorer 6 (but then who still supports that?) and some file types don’t play nicely.Tagged: