PageSpeed Insights updates with the release of Lighthouse 6.0

Tom Hopkins - Frontend Developer

Lighthouse 6 was released on 19th May this year, with tools that are powered by Lighthouse – such as the prolific tool PageSpeed Insights – updated mid-July. This tool is a website auditing resource, providing the user with various measurements which are rendered down into easy-to-understand scores and a host of advice for how to improve them. We are going to focus on the new page speed metrics, looking at what they entail for measuring performance going forward and the direction in which the web is being pushed.

The new metrics coming out of this update are: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) and Total Blocking Time (TBT). The most important of these are Largest Contentful Paint and Total Blocking Time as they make up half of the final score. 

Largest Contentful Paint (LCP) measures the perceived time that the page takes to load. This also includes images and other media loading in the initial viewport. This has replaced the metric First Contentful Paint in the scoring system, where we just measured the first point we see something on the page. This means the media on your website has a greater impact on the final score. Having heavy, image-led design means there is a greater need for optimising your images, making sure they are relevant and being delivered to the user in an efficient manner.

Cumulative Layout Shift (CLS) measures how much the page shifts about as it loads. For instance, if an image loads in it can shove content around to make room, or when a font loads it is shaped and sized differently from the initial system font you see. This can be alleviated in numerous ways to prevent major page shifting, like holding space for images to load into and matching system font sizes to custom fonts so the shift is less pronounced or non-existent. The other option is to hide your text until the custom font has loaded, but there are drawbacks to this method as well.

Total Blocking Time (TBT) measures the time between the first time you see something on the page and when you can start interacting with the page. JavaScript is the major player in reducing your score with this metric, as you have to download and parse the code before running it to make your page more interactive. So frameworks like Vue.js, Angular and React can have a negative effect on your overall score due to the amount of JavaScript that the browser needs to look through and understand before it begins to run it. This is not a hard rule though, as you might want to sacrifice your page speed for a better user experience depending on the purpose of your website.

The most important of these new metrics are largest Contentful Paint (LCP) and Total Blocking Time (TBT) as they now make up 50% of the total score – 25% per metric. This shift is subtle from the previous version of Lighthouse, but there is more of an onos on getting content right and not overloading your page with large pieces of media, while also ensuring that the developers make considerations about what the purpose of the website is and where we can make allowances for more interaction vs. a faster load time.

Heavy image-based sites are still viable, but we need to be smarter on how best to deliver and prepare images before sending them to users. The most basic of improvements that are suggested are to minimise the image using tools such as Tinypng, while also making sure the image has the correct width and height; something directly from a camera – even a mobile camera – is normally 3-5 times larger in width and height then it needs to be. Cropping an image can also help to reduce the amount of data we send down to users. These tips are a start but there are many other advanced techniques that Lighthouse will suggest which may or may not be useful.

One thing you can surmise from this update is that trying to keep a score the same over the course of the lifetime of your website is difficult. The goal posts will move over time as well as the website content; it’s something you need to keep working towards over time. The work is never just finished as websites need to evolve with the business and the trends on the web as a whole.

These changes to Lighthouse are subtle but demonstrate the way Google is working to push the web – it really wants to emphasise performant websites and try to curtail potential bad web development and content editing practices. These can include adding large images onto a website and delaying the load time to make it seem performant, or sending down lots of JavaScript on very simple websites just because it was fun to develop in. Making sure there is a valid reason for adding that extra JavaScript or having that large image is always important, as is thinking about the drawbacks of doing so. 

You need to make sure your website performs according to its purpose.

Ultimately, working with your developers or your agency partner can ensure your website is doing what you need it to do! Chat to our digital team if you need assistance in reviewing how best to audit and improve your sites performance.

Begin your move to more

We can build your competitive advantage and achieve your business ambitions through brand-led, multi-channel customer experiences