Page speed is important for two reasons: SEO and User Experience (UX). Here we look at what speed you should be achieving, the implications of slow speed, and how to improve it.
What your speed should be
You can check your page speed by going here: Google’s Pagespeed Insights.
Roughly your speed should be around 2 seconds. The above link will guide you to how to improve your speed (although it’s quite high tech and better to pass to your developer). In short anything over 4 seconds needs to be addressed, particularly if that is the speed on mobile.
Implications of slow page loading
Bounce
A big one is bounce rate – people will simply leave during loading. According to Think with Google, when your page load time increases from one second to three seconds, the probability of bounce increases by 32 percent. If it rises from one to five seconds, that probability increases 90 percent.
Ranking
On top of this a high bounce rate will signal to Google to lower your ranking on SERPs.
This month Google launched Core Web Vitals which is a set of factors around site useability to feed in to the ranking of the site. UX is not a new factor for SEO but it looks like the emphasis is increasing.
Paid Search performance
Site and page speed also affects your Paid Search campaigns, lowering your Quality Score and in turn increasing your CPC levels.
Conversion rate
Site speed affects the site’s conversion rate.
In 2019 the guys at Portent published a graph showing the relationship of speed v conversions.
OK, so we now know it’s important – let’s quickly cut to how to fix.
So how to improve page speed?
When you run the Google speed test mentioned above you will probably be presented with the following terms.
First Contentful Paint (FCP)
FCP is when your browser renders the initial page information (text, images, graphics). Its really about the perceived loading time Your site is slow if your FCP is above 3 seconds.
Things to improve FCP:
- Ensure you have a fast hosting provider
- Have a Content Delivery Network (CDN) set up. A CDN ensures the distance from your user and the server is minimised. Check your hosting provider, most offer this service. Read more about CDNs.
- Enable server level caching. This helps server response times.
- Set up Inline Critical Resources. Let me explain. When your page loads it tries to load a mixture of html, css and js files. But if you look at the files you will see that some are more important to load first to see the page rendered correctly, others can follow later. If you can work out what needs to load first in terms of css and js you can take the code and place it in to the html file instead of it being a separate file on the server. There’s a guide here from Google on idenifying the critical code. Once you’ve identified the critical scripts, you need to remove them from the render-blocking resource and then inline them inside your HTML page with <script> and <style> tags.
- Defer Non Critical Resources. So this is the reverse for files and coding not immediately needed. For non-critical resources, you need to mark the URLs with async or defer attributes. It’s recommended that you add the defer attribute to the URLs of non-critical scripts. This directs the browser to execute the script file only after the HTML document has been completely parsed.
- Avoid script based elements above the fold. Avoid heavy animations and Google ads for example.
Largest Contentful Paint (LCP)
This is the time it takes for the largest bit of information to load.
Things to improve LCP:
- Optimise images. Compress them using tools like Photoshop, Squoosh and Caesium
- Resize images. But don’t do this using html code, instead resize the origonal image. Otherwise you will end up with a fragmented image and the page is still calling up a large image to start with, so you are not getting any speed benefit
Cumulative Layout Shifts (CLS)
This is the jumping of page elements as the page information loads. It’s an indication of poor coding. A poor score is 0.25 or higher.
Things to improve CLS:
- Check your code for images includes the dimensions
- Avoid having ads at the top of the page, but if you need to then ensure they include dimensions
- Preload your fonts (rel=preload) so that the font assets have a higher priority in page rendering
- A good way to optimize your CLS score if you are using embeds is to predetermine the necessary dimensions and use a placeholder or fallback
- Insert dynamic content below existing content, not above
So some pointers – hope this helps, and use the above to Google further information. There’s lots of help out there 😉
Thanks
Matthew
