How vital are Core Web Vitals?
Growth
In simple terms, there are six main areas to focus on to ensure your site is ready for the update, with the top three referred to as Google's "Core Web Vitals". Let's go into further detail with those:
Loading Experience - Largest Contentful Paint (LCP)
If you're seeing a PageSpeed Insights or Lighthouse score in the red/amber, then it's most likely that some big wins can be achieved through improving the site's Largest Contentful Paint (LCP).
LCP is the time it takes for the main content of a page to be served in the browser and be ready to be interacted with. That measurement is taken via the largest image or block of context that is visible to the user on initial page load and anything that extends beyond the screen does not count towards this metric. Most common elements factor into this are images, videos and block-level text elements such as headings and paragraph tags.
How can you improve your site's LCP?
The best place to start is by taking the recommendation made by the PageSpeed Insights or Lighthouse report, which will let you know the largest asset being loaded on the screen. Commonly this will be a large image or video asset in the hero or header area. Ensuring that a fully optimised version is being served to the user will play a major part in reducing your LCP. Utilising lazy loading via the loading attribute (which is now native to most "modern" browsers) and serving images responsively by utilising reusable helper code will help to squeeze the life out of that image without compromising on quality!
Other factors that can play a part in a poor LCP are slow response times from the server (consider moving away from that shared hosting package), render-blocking Javascript and CSS assets (more on that below), and client-side rendering. Slow client side rendering can be an issue for single page apps built using technologies such as React, Vue or Angular. If optimisations aren't in place to avoid the pitfalls of a large Javascript bundle then this will have a significant effect on LCP. Minimising these assets and different rendering methods should be considered here.
Prompt Interactivity - First Contentful Paint (FCP) or First Input Delay (FID)
The First Contentful Paint is when the browser renders the very first piece of content to the visible area of the screen, giving the first sign to the user that the page is actually loading. The time it takes to reach this is your FID metric.
How can you improve your site's FID?
As mentioned earlier, a common cause of a poor LCP and FID are large Javascript and CSS assets that aren't being served efficiently. These assets are usually made up of smaller components and bundled together into one condensed package that gets served to the browser when the page loads. Since Google's announcement for Core Web Vitals to become a ranking factor, Etch have been working to reduce the size of these Javascript and CSS "bundles" on our new site builds and reviewing others for anything that isn't needed or could be served better.
In some cases it's possible to extract these assets from the bundles mentioned above and only load them on a per-page basis, resulting in a significantly improved FID. Similarly, using the Critical CSS technique to serve up a minimal set of style rules within the <head> of the page itself prior to waiting for a much larger CSS file can help improve the site's FID.
We've only touched on a few techniques here but there are many other areas that can be optimised such as caching techniques, asset preloading, DNS pre-connects and much more.
Visual Stability - Cumulative Layout Shift (CLS)
In simple terms, Cumulative Layout Shift refers to the unexpected shifting of elements while the page is still loading. Reducing CLS is important because pages that shift around unexpectedly can result a poor user experience. The sort of elements that tend to cause shift are:
- Fonts switching from the system font to the one being loaded externally
- Images and videos without a predefined width and height (they don't take up any space until they're loaded!)
- Contact forms, buttons and other kinds of content
How can you improve your site's CLS?
Solving CLS issues are normally quite straightforward as these shifts can normally be seen by refreshing the browser and seeing if anything moves around during page load. Common tasks that can be carried out are adding minim heights to elements that appear to increase in size once the text and/or images contained within them have loaded. This is noticeable in the hero/header area and can be resolved.
A mobile friendly experience
It's 2021 and the first iPhone was released in 2007... need we say more? 😉But seriously, it's worth remembering that the pandemic-delayed mobile-first indexing update is coming in March 2021, meaning that any non-mobile friendly sites may well be penalised. Google Search Central posted about the update back in March 2020.
A safe browsing experience
Keeping up to date with security updates to the back office is super important to reduce the potential for exploits and hacks. A hacked site will normally come with a big red warning on search engine results pages (SERPs) so this is something to be mindful of. Google provide their own service to allow client apps to check URLs against Google's lists of unsafe web resources.
HTTPS enabled
This one has also been around a while now, since 2014 to be exact! Google Search Central has all the info on why you should have a valid SSL certificate up and running.
No Intrusive Interstitials (or an unobtrusive UX)
It's believed that the driving factor behind Google bringing in this metric was to penalise sites that use any extraneous content that covers the majority of the page, such as cookie banners and newsletter signups. Let's be honest, who actually enjoys having to click through a bunch of these annoying elements to get to the content you're looking for. If these mechanisms are needed try to ensure that these are kept as unobtrusive as possible.
In many cases, it's trying to eke out the last 20%-40% of performance improvement that takes most thought, resource and planning to make those tougher gains. It may sound relatively simple in the explanation above, but that only comes through hours of research and implementation.
Summary
It's important to realise that future development should consider the impact on your Core Web Vitals score. Think about the potential impact that reviews widget your marketing team have asked to implement before blindly throwing it onto your homepage!
There are many factors that come into play that are inevitably dictated by content and design. For any content heavy sites, these factors can only be dealt with retrospectively when we know the extent of the performance degradation that is being experienced.
Performance considerations are always high on the list for any Etch project and we're always trying to eke out any performance gains we can on a site-by-site basis. If you need further advice with Core Web Vitals or need a trusted partner to help and guide your in house development team then drop us a line.