Version 10 of Lighthouse is here! Lighthouse is the automated, open-source tool used to improve webpage quality. Check out what’s in store with v10.
Lighthouse 10 was recently released, and is already running on Pagespeed Insights. The most notable changes are that Cumulative Layout Shift (CLS) now accounts for a bigger factor (25% up from 15%) and Time To Interactive, whilst still tracked, no longer contributes to the overall score.
What this means is that most people will see their scores improve without them actually doing anything! 🎉 This is because most sites score better for layout shift than Time to Interactive. However, whilst your scores may go up a little, remember that everyone will be seeing the same improvement!
The reason for making this change is to reflect how significant a factor layout shift is for the overall user experience. But it presents some opportunities as CLS can be a relatively easy thing to improve, and any improvement will now have an even bigger impact on your overall score.
Here are 3 relatively common issues:
- Images without width/height attributes. Whilst WordPress adds these where it can, they can be easily omitted from custom templates or blocks. But it is important to include them, even when the image is not displayed at the actual size of the source image as it lets browsers know the aspect ratio, and therefore how much space to reserve for the image whilst it’s loading.
- Slow loading fonts. We often rely on custom fonts to implement designs that fit with corporate brand guidelines, but if we’re not careful in the way we implement them, they can cause shifts in the page layout as the font files load making it harder for users to read your content. By following modern best practices, this can often be improved easily without making significant changes.
- Ads and Embeds. When embedding anything from a 3rd party, it can be hard to know how much space to reserve. Asynchronous loading 3rd party scripts is typically done to improve performance, but this can still cause the page to jump once it does load. Try to use consistent ad sizes, or work out how much space you need to reserve for an embed, and make sure your container element is correctly sized so that when they do load, they don’t cause a large jump in the page.
What changes have you noticed with Lighthouse 10? Let us know on Twitter!
Your WordPress experts are here
Ready to power your website with enterprise-grade performance?