I was asked to look at improving the Google PageSpeed Insights score of WordPress Website, and in turn, improve its overall performance with regards to load times. The client understood the score ratings and that there was room for improvement, but did not know how to implement the suggestions made by PageSpeed insights.
Page Speed Insights measures the performance of a page for mobile devices and desktop devices. It fetches the url twice, once with a mobile user-agent, and once with a desktop-user agent.
The PageSpeed Score ranges from 0 to 100 points. A higher score is better and a score of 85 or above indicates that the page is performing well. Please note that PageSpeed Insights is being continually improved and so the score will change as we add new rules or improve our analysis.
As you can see, even from their description about the tool, site optimisation is an ongoing and open-ended process but it was agreed that I should initially spend an hour doing what I could to boost the website’s performance and reduce the homepage load time. This would set the site up for further improvements in the future.
view the code for this widget on codepen
Why performance matters
The speed and performance of your site plays a part in Google’s search ranking algorithm.
People are busy and impatient – they’ve got better things to do than wait for your site to load. Therefore, visitors to your site will be more likely to stick around and explore your site (decreasing your bounce rate) if your site isoptimised and loading quickly. If they have an easy, frustration-free experience on your site, they will be more likely to become returning visitors.
How I improved the performance of a WordPress website
I installed a caching plugin (W3 Total Cache). This plugin is highly configurable and you can choose which caching features to enable.
Page and Object Caching
Everytime you visit a page or post of WordPress website, queries are made to the database and data (a news article, for example) is returned. The page is then dynamically built and displayed in the browser. These requests to the database take time and use server resources and can be unnecessary if the content of a page does not change from one minute to the next. This is where caching comes in.
The pages of a site are built once and the results stored as a static file. Next time someone visits that page, the static file is served rather than querying the database and building the page again and again.
Script and CSS Minification
Front-end automation can help with the minification and concatenation of scripts and styles but if, as in this site’s case, front end automation wasn’t used in the development, the next best thing is to use the caching plugin’s minification and combining features.
The site in question has scripts and stylesheets for it’s core theme, child theme and for each plugin. By joining the individual scripts together, minifying (reducing their size) them and then repeating this for the stylesheets, we can reduce the number of requests to the server and reduce the loading time.
Removing unnecessary server requests
By looking at the network activity in Chrome’s developer tools, I could see the site was making requests to external fonts that were not being used. These requests were generated by the site’s parent theme and by editing the child theme, the requests were removed.
PageSpeed insights generates a compressed file of optimised assets for the sites it scans. It is possible to replace your sites images with the optimised ones but as these files are not arranged in a folder structure compatible with WordPress’ month / year uploads, it would have to be done manually, one by one.
Instead, I used an image optimising plugin that I deactivated once it had processed and optimised all of the images. I could have left the plugin active, automatically optimising each image as it is added to the site by the user, but as this is not going to be frequent, it would be a waste of resources to have this plugin always active.
Performance Improvement Results
Using the performance counter widget above, you can see that big improvements were made to the speed of both the mobile and desktop scores.
There is still clearly a lot of room for improvement. The site could be optimised further by using a CDN for images and scripts and moving the site to a VPS but the performance improvements made with just an hours work is a good start.
Site optimisation is an open-ended ongoing task but by making simple changes, improvements can be made instantly.
If you are interested in improving your WordPress website’s performance, get in touch