To quickly recap: primarily – loading speeds affect the user experience, which can have a knock on effect on your conversions. They can also impact your SEO performance, with Google keeping track of how quickly your website loads.
Keep in mind that getting a high score doesn’t necessarily mean your site has a great user experience, but even so, for the vast majority of websites it’s a really good starting point to identify issues which may affect what users think about your site or even how they behave on it.
We’d love to help get your site up to a good place, so if you’d like to have an expert take a look please get in touch.
“Some of the issues can be resolved easily and quickly with a caching system.”
What’s a caching system?
It means that you have a solution in place which stores a version of your website and sends it to anyone loading your site, that version is then periodically updated, and any new changes to your site reflected within the update.
Depending on the platform your website is built on, the solutions vary. WordPress has a number of plugins you can use, we like Hummingbird and WP fastest cache. You can also use Cloudflare, which connects to your domain and adds security and further caching to your website by being ‘the middle man’ between the visitor and your hosting.
Let’s now look at some of the common Pagespeed issues and how you can solve them. If you’d like more websites to load quickly and create a better browsing experience for everyone, please share this post with others that would also find it helpful.
“When it comes to hosting, you really get what you pay for. It’s a good idea to spend a little bit more and enjoy a dedicated server, from a provider you can trust.”
1. Reduce initial server response time
Where you host your website can dramatically affect how fast it loads, so if you’ve resolved other issues but are still struggling with the server response time it might be time to move on to a different hosting provider.
It’s also important that your server is in the same country as your target audience, most hosting providers offer you the choice of location when you sign up.
Getting an experienced developer to optimise server settings and update the server may help, as a bad configuration can ruin even the best of hosting options.
2. Eliminate render-blocking resources
All websites use some files that delay rendering – that’s normal. The problem is that many websites load in a lot of these render-blocking files, and it really slows down performance.
The issue here comes from the amount of styles and other files some themes load, and without direct control over how and when these load, some things get in the way of the website being shown to the visitor. This means the time to load the page goes up and Google cries a little.
For off the shelf themes or a website builder, it can be very time consuming and near impossible to completely resolve this, the best first step is to ensure you’re using a caching solution.
What we also like to do at Cabana on the websites we build is to split up the styles and code needed to show the top part of the website – the area a user sees when the page first loads, and the styles for parts lower down the page. We then load in the top part first, and delay the bottom part so it doesn’t block rendering.
If you like figuring things out and are happy to work with advanced plugins, feel free to have a go yourself. It’s always good to back up your website first though. As things going wrong with caching can mean your site stops working! If in doubt, its best to consult a developer, or ask your SEO agency to help.
“Images make up the majority of your website’s size, optimising their size and format can have a huge effect on its performance.”
3. Serve images in next-gen formats
Next gen formats offer a smaller file size and a relatively good quality compared to formats you may be familiar with, such as PNG or JPEG. To take advantage of this, you can use an off the shelf plugin in WordPress called Smush Pro, which will automatically serve WebP images – one of the next gen formats, and also use their content delivery network to further speed up your site. For other platforms, you can either use a plugin or look at converting your images to one of the new formats and ensuring your hosting provider is able to serve these images
Using something like Smush also helps with the next issue which is to…
4. Defer offscreen images
This means that images which are not visible should not be loaded right away. Image caching and optimisation plugins tend to offer this as an option and we recommend looking into this one as a priority of your website is image heavy.
5. Ensure text remains visible during web-font load
You can do this by simply adding one line of code to each font you load, what this does is it ensures a default font is used initially – one that’s already on the user’s computer, instead of waiting for your custom font to load before showing the website text to the user.
Anytime you’re loading a font face in CSS, you can include the below declaration, it’s also something you can include in the URL if you’re using a font from Google Fonts.
CSS font loading: font-display: swap;
Google Fonts (add to the end of the url): &display=swap
“A lot of these scripts are quite important, so it’s best to first weight up the benefit of upping your Pagespeed score vs not loading in that service.”
6. Reduce the impact of third-party code
Loading things like a live chat widget, tracking scripts, analytics, or other scripts a third party service asked you to add to your site can impact your score.
A lot of the time a balance can be found by only loading in something once your web page has loaded.
As an example, we have a Hubspot chatbot widget on our website which was negatively impacting our Pagespeed score. We managed to solve it by only loading in the chatbot when a visitor scrolls down the page, or clicks on one of the Get in touch buttons. This means the initial page load is not slowed down, and we still get to use a chatbot to communicate with potential customers.
8. Serve static assets with an efficient cache policy
Again, this is something that should be resolved once you have a caching system or Cloudflare in place, it simply means that your website now tells the visitor’s browser to cache some of your files for a long period of time – it’s mainly things that don’t change much over time
9. Avoid an excessive DOM size
If you’re seeing this warning and your site was built specifically for you, get in touch with the developer as the code is likely not as well formatted as it should be and you might want to work on improving it. For off the shelf themes and website builders, this tends to be an unavoidable consequence of your chosen solution and unfortunately it’s not viable to improve this metric.
Some styles don’t need to be loaded on every page, so as with the excessive DOM size, if your site uses an off the shelf theme or a web builder, there’s not a lot you can do. Otherwise, your website should be built to only show styles and scripts which are in use on the page that loads them, so it’s something to bring up with your developer.
We’ve not covered all of the issues Pagespeed might throw at you, however these are in our experience the most common problems and we thought it would ne a good starting point.
Is there anything specific you’re struggling to optimise or are having a hard time understanding? Let us know!
Free marketing videos in your inbox, once a week
Business owners, decision makers and go-getters receive one email per week with our latest video, 100% fresh, fully organic, totally free.
We’d love to learn about your business and the challenges you’re currently facing. Feel free to get in touch, whether that’s by email, phone, in-person or simply by clicking this handy little button below...