How to test and optimise your website speed
Here is a brief summary of tools you can use to test the speed of your website.
Google Chrome has an open source tool, developed by themselves, built into Chrome. This tool is called lighthouse and can be activated by clicking on the Audit tab in Chrome Developer Tools. In our experience this works pretty good and it’s handy as Chrome is installed on most systems. There are also standalone version of Lighthouse if you want to work it into your workflow.
Pingdom has a great easy to understand website speed test tool. It can be found here. You can choose to have your site tested from 7 different servers. The output is pretty and easy to understand.
GTMetrix is favoured by many web developers. It’s free tier can monitor a couple of URLs on a daily basis and keep track of the speed history. It’s very comprehensive in terms of reporting. If you do manual speed tests you can also choose from many different countries, although the free tier’s history graphs are limited to Canada. What we particularly is it’s WordPress Optimization Guide which contains simple to understand tips and advice on how to optimise your WordPress site.
Google has a public website called PageSpeed Insights which can be found here. In our experience it doesn’t work that well probably because it’s a hosted version of Lighthouse and severely affected by latency or Google’s own servers. It has both Mobile and Desktop tabs which can be handy.
Notable Mention
Google has a mobile friendly test website. In our experience it doesn’t work very well for certain sites, most probably because it’s hosted overseas and tends to fall flat on the loading of page resources. Typically instead of viewing a real result you’ll get messages such as “48 page resources couldn’t be loaded” which is pretty annoying especially if you know the page renders fine on all the other speed tests. You can find the mobile friendly test here: https://search.google.com/test/mobile-friendly
Tips on Optimising your Website
There is no magic bullet in optimising your website but here is a collection of tips you can follow. Sometimes it just a bit of extra work or trial and error. Sometimes problems are more complex and you might have to get redesign or get a new host. Here are our top tips for optimising the speed of your website:
- Make sure your host is transparent about speed. Can they tell you without you having to jump through hoops how fast their lines are? Can they tell you what kind of disk subsystems they are using? A severe performance penalty will be paid if you host on anything except SSD. Can your host tell you with some confidence how over subscribed their systems are?
- Does your website have image optimisation built in? With WordPress Hosting this is pretty easy, as plugins such as WP Smush and ShortPixel will do it all automatically and behind the scenes for you. Typical mistakes with images are huge photos on the home page and image carousels that needs to download a lot of photos.
- How many files are being accessed when your page is loaded? Is it one, ten, or fifty? With each file access there is a small performance penalty and this quickly builds up until your website loading speed suffers as a result. Many tools combine Javascript and CSS files and at a minimum you should investigate this route if possible. If you’re building a web application using Laravel you should definitely be using Laravel Mix as this can greatly reduce the number of files that your website is loading.
- If your website accesses files from external sources, also investigate rather putting some of these files on your own server. Although it’s super convenient to load files from a CDN (content delivery network) copying that same file to your localhost and having it part of your build process could greatly enhance the speed of your website. In theory a CDN loads your files very fast, but sometimes external files accesses will slow down your loading speed too.
- Investigate a CDN. There is a difference between hosting your website in LA versus New York, London versus Japan, Johannesburg versus Cape Town. The difference is called latency and hopping across networks and there is very little you can do to change the physics of light (fibre optic cables uses light). In some circumstances it would make sense to host your website closer to your target market. A CDN is a simple and easy want of getting content closer to your audience, and some of the biggest ones such as Cloudflare even has a free tier.
- Sometimes you just have to move your service physically closer to your audience. If you have an application that is world-wide but most of your audience is in Europe then you wouldn’t want to host in the United States. Remember now matter how quickly images load, database and server latency still plays a big role.