In the final instalment of our Core Web Vitals series, we’re going to dig into some development best practices and offer tips on how to keep your site’s user experience on the right track. To learn more about Core Web Vitals and how they’re measured, check out our previous posts: An Introduction to Google’s Core Web Vitals, Core Web Vitals Metrics, Measuring Core Web Vitals, Debugging Core Web Vitals and Improving Core Web Vitals.
UX patterns
UX patterns tend to change from year to year, but not all of the ideas introduced are optimised for Core Web Vitals. The collection listed below includes just some examples of UX elements and the effect that they can have on Core Web Vitals.
Best practices for carousels
Carousels are UX components that introduce content in a slideshow-like manner. Carousels, which can have one of the largest impacts on LCP (Largest Contentful Paint) can also affect CLS (Cumulative Layout Shift), which can in some cases cause an infinite layout shift. In order to combat this, and efficiently optimise carousels, all content should be loaded using HTML, makinguse of CSS transform transitions and ensuring that each slide contains optimised content (images and text).
Best practices for loading fonts
Sometimes web fonts take a little longer to load, which can end up delaying text rendering, leading to a longer FCP (First contentful Paint) time. Loading fonts can also have an impact on CLS (Cumulative Layout Shift) as the fallback font might take up a different amount of space than the web font it is being replaced by. There are many ways to optimise font loading, with some of the most common being: using self-hosted fonts; using an appropriate substitute font,and using a ‘preconnect’ attribute to establish early connections with third-party font sources.
Best practices for using third-party embeds
A third-party embed, such as a hosted video, usually takes the form of an <iframe>. The <iframe> pulls in a list of markup, stylesheets, and scripts to make up the content of the frame. Many of the more popular embeds can be quite bloated with some assets loading in up to 2mb, Performance monitoring tools, such as Lighthouse pick up on this, and raise the flag ‘Reduce the impact of third-party code’ in their audits. Following advice from Lighthouse, you can greatly reduce the impact of third-party embeds by lazy-loading iframes, carefully ordering scripts or even replacing them with a Facade (static element).
For all the value that embeds can bring the user, it’s worth measuring up whether the element itself needs to be interactive. A prime example is a map embed. Whilst some users may navigate the map, others may just view the map without any interaction. In this instance, having a facade in place, can greatly improve your site’s core web vitals.
“Providing a great user experience is a fundamental requirement for a responsive website. In a fast-moving world where users’ attention spans are ever-decreasing, usability is paramount.”
Peter Baines
Head of Digital Development
Core Web Vitals: in summary
Throughout this series, we’ve seen that improving your site’s Core Web Vitals is crucial in providing a better user experience, and how ignoring these metrics can lead to higher bounce rates and frustrated users.
Take a look through our other posts on Core Web Vitals where we: introduced Google’s Core Web Vitals; dived into measurement, debugging and improvements; and analysed the metrics.
Let’s keep in touch
Join our mailing list for insight that can boost your business. Unsubscribe anytime.