Due to a combination of faster broadband, smarter devices, and shorter attention spans, the speed of your site is more important than ever before. Countless studies show that sluggish pages are much more likely to be quickly abandoned by frustrated users, and as well as generating high bounce rates, they’re also likely to be penalised by Google. Although the internet giant’s search engine algorithm is sometimes unfathomable, it’s abundantly clear that loading speed – particularly on mobile devices – is a significant factor for rankings within search engine results pages, along with interactivity and visual stability.
Fortunately, it’s pretty straightforward to measure how your site is performing in these areas via Google’s Core Web Vitals, which were first launched in 2020 as part of its wider Web Vitals initiative. The user-focused metrics provide a quick snapshot of the UX health of your site, and you can easily find out how your pages measure up via a number of tools such as Lighthouse, Page Speed Insights or the Chrome User Experience Report. While testing your site is easy, getting it into great shape may be a little trickier – particularly when you’re using an open source platform – however while WordPress is sometimes unfairly perceived as carrying a little extra weight, with effort and know-how it’s possible to optimise your site and achieve outstanding scores. The WordPress platform has also benefited from significant improvements over the last year in direct response to the release of Core Web Vitals, resulting in sizable page speed gains across the board.
Here we take a look at the three main metrics in a little more detail, and share some tried and tested techniques that we’ve applied here at Big Bite on projects where UX and optimisation are priorities.
Largest Contentful Paint (LCP)
LCP is concerned with the perceptual loading speed of a webpage, which means that it’s more about how quick a page load feels to an end user rather than the actual loading times. As such, it looks at how quickly the largest element – for example an image, video or text block – is displayed and therefore measures the time from when a user loads a page until the moment when the largest element is rendered. For a passable page, you need to be hitting an LCP score that’s below 2.5 seconds for at least 75% of all visits to your site, however as with all loading metrics, the faster the better.
Where pages are underperforming, the key areas to look at include server response times, render-blocking Javascript and CSS, resource loading times, and client side rendering. Resolving challenges relating to LCP tends to be complex and often needs to be broken down into sub-tasks, however in broad terms we’ve been able to improve LCP scores at Big Bite by focusing on inline critical CSS (CSS used above the fold), deferring non critical CSS and JS, adaptive serving of assets, optimising images, and using server push with cookies/service workers to track caching.
Cumulative Layout Shift (CLS)
As the name suggests, CLS is a metric designed to measure shifts in layout that users experience during a page load, where visible elements unexpectedly change position. This can happen when elements load on top of existing content or where resources are loaded asynchronously, and the resulting visual instability often frustrates users as they try to interact with a page. A CLS score is calculated by looking at the movement of unstable elements that happen during the lifespan of a page, and ideally it should be 0.1 or less for the 75th percentile of page loads.
For pages with a higher score – particularly those scoring above 0.25 which is regarded as poor – the main culprits for unexpected visible shifts are usually ads, embeds, dynamically injected content, and certain images or iframes. Issues caused by such elements can usually be resolved by taking a number of relatively simple steps such as ensuring that the dimensions for any images, videos, iframes and ads are always included. At Big Bite we also ensure that enough page space is reserved for dynamic content so it doesn’t encroach and block other elements, and we avoid adding new content on a page above any content that’s already loaded unless triggered by a user interaction. Other recommended actions include optimising CSS delivery and using CSS transfer for animations in place of height and width attributes.
First Input Delay (FID)
FID focuses on how users feel about the responsiveness of a web page, and measures the time between a user’s interaction – such as clicking a link or a button – to the moment when the browser begins processing event handlers in response to the interaction. This means that if any interactive functionality is lagging – for example if a page takes a while to load after a form has been filled out – then a site’s FID score will be much higher than it should be for an enjoyable user experience, however it’s worth noting that the measurement only includes the processing delay rather than the entire duration of processing.
The FID benchmark to aim for according to Google is a rating less than 100ms, with anything between 100ms to 300ms needing improvement, and anything over 300ms is deemed to be poor. As any kind of latency usually happens when the browser’s main thread is focused on making something else work instead, parsing and Javascript files are the main things to look at where a page could be performing better. At Big Bite we’ve focused on deferring non-critical Javascript, using web workers for Javascript non UI operations, and generally minimising Javascript on the main thread wherever possible. As always, images, videos and animations should be fully optimised, and in some cases it can be worthwhile splitting large files down too.
Commercial advantages
Optimising your site in line with Google’s guidance can be imperative where high bounce rates, fickle visitors, and low organic traffic are issues, and there are thousands of case studies that demonstrate the financial value of strong UX. For commercial sites with loyal visitors, subscribers, or a strong business case for enriched media, it can sometimes be more difficult to compromise on functionality or aesthetic to improve perceived user experience – particularly where stakeholders have different priorities – however even very minor improvements can translate into commercial benefits. That’s why we now encourage our clients to set up Core Web Vitals reports to obtain accurate trend and field data, and by adopting a performance culture at Big Bite we’re not only delivering elevated experiences to users, we’re also building faster and leaner solutions which strengthens our offering as an agency.
For a wealth of information on Core Web Vitals, head over to web.dev.
