In recent years, search engines such as Google are actively encouraging website owners to improve their page speed and user experience. Google specifically has introduced a Core Web Vitals evaluation, which is a set of metrics for evaluating and scoring website speed and user experience. Since June 2021, with the launch of Google's Page Experience update, Core Web Vitals (CWV) has become one of the factors that Google considers in its page ranking algorithms.
Therefore, in order to improve or maintain your website's position in Google's search results it is paramount to pay ongoing attention to your CWV metrics. It's also important to note that this is not solely an exercise that's limited to how CWV metrics affect search engine performance - by concentrating on these benchmarks, you are prioritising the quality of the user experience, which will in turn be beneficial for reducing the bounce rate, increasing the average time spent on a website, and improving the conversion rate.
What are Core Web Vitals?
The Core Web Vitals assessment consists of 3 key metrics, which are:
Largest Contentful Paint (LCP)
LCP measures the length of time it takes for the largest on-page element (image, video, text) within the viewport to be fully rendered to the user.
Cumulative Layout Shift (CLS)
CLS measures visual stability, verifying that page elements are not awkwardly shifted during page rendering and causing unexpected actions as a user attempts to interact with the page.
First Input Delay (FID)
FID measures how long a page takes to load before the user can interact with it. For example, it can be frustrating for the user when elements are visible on the page but unresponsive, such as a button, slideshow or navigational component.
How to Measure CWV Metrics?
Google Search Console
The most convenient and comprehensive reporting tool for merchants can be found within Google Search Console, which
now has Core Web Vitals reports embedded within its Page Experience section. These reports provide detail on which pages are performing well, need improvement or are deemed to be performing poorly. Search Console provides details on which specific metric may have issues and it suggests other pages which have similar issues.
PageSpeed Insights
For more technical detail around CWV performance and related metrics, PageSpeed Insights and Chrome Lighthouse (accessible via Chrome Dev Tools) are extremely useful tools for profiling individual pages. They are free for unlimited use and provide a comprehensive overview of key performance related metrics as well as other notable metrics and indicators.
Techniques to Improve Core Web Vitals
Even though Core Web Vitals metrics are directly linked to page speed, the optimisation techniques are slightly different from what typically is suggested in page speed optimisation articles. To achieve good CWV scores we need to prioritise rendering the largest piece of content as soon as possible, ensure the page is intractable during loading, and minimise any layout shifts.
1. Switch to a performance-optimised hosting solution
Hosting plays one of the most important roles in achieving a good Core Web Vitals score. If the hosting infrastructure is not optimised or just poor in general, it will take too long for the server to respond to the browser request, and regardless if you’ve processed all the other optimisations, you still won’t be able to pass the Core Web Vitals assessment due to the excessive server response time. Thererfore, you should avoid choosing the cheapest hosting option - instead, it's prudent to prioritise a hosting solution that focuses on performance and provides tools for speed optimisation e.g. Content Delivery Network (CDN), and server side caching such as Varnish.
2. Enable server-side caching layer
Time To First Byte (TTFB), which is essentially server response time, is a critical component to site performance. In order to minimise server response time, server side caching should be enabled. Most hosting companies provide it by default within their service packages and it should be configured and optimised for the specific platform your website is running on.
3. Implement Critical CSS
Critical CSS is an advanced method to reduce the time between the server response and the moment when the page rendering starts. By default, the browser waits for all the stylesheets to be loaded and processed before beginning the rendering process. The issue can be that depending on the website complexity and design, stylesheets may be heavy and take a large amount of time to be fully loaded. Therefore, stylesheets should ideally be deferred - which removes them from the chain of page assets required to start the rendering process. However, if an HTML page starts rendering without any styles at all, it doesn’t look pretty, and furthermore - it causes layout shifts. To avoid the flash of unstyled content during page load and unwanted layout shifts, the “Critical CSS” apporoach is used. Critical CSS is essentially just a small portion of CSS injected in the <head> tag which draws the basic page skeleton and hides the page content until all the stylesheets are fully loaded. Essentially, the process is to only load the most important CSS rules initially and then load all other styles in a way which doesn't impact the overall page rendering process.
4. Improve CSS to avoid content shifts
Layout shifts happen when there are dynamically generated elements that are inserted into the page after it has been already rendered. Other causes of layout shifts can be due to JavaScript manipulation with CSS classes of page elements or due to asynchronous stylesheet loading.
You can use the aforementioned profiling tools such as PageSpeed Insights or Lighthouse in order to identify elements that are causing major layout shifts and then tweak the relevant CSS rules to prevent their dynamic resizing/repositioning during page load.
5. Image optimisation
Large, uncompressed images can heavily impact page load performance and CWV metrics. It's important that content managers understand how to appropriately size and compress images prior to adding them to pages on the site. There are a number of third party services which can automatically compress images for you, such as TinyJPG, without any noticeable degradation of the image quality.
Another option here is to use a Content Delivery Network which has built in image optimisation functionality. CloudFlare is a popular option, with its Polish feature which serves an optimised version of an image in a next-gen format that can be processed by the end user's browser, such as the WebP format. Amazon's CloudFront has similar functionality, while Imgix also offers advanced image optimisation processes.
6. Implement Lazy Loading for images
Lazy-loading for images is a great technique to minimise images' negative impact on page speed. The idea is to start loading images only when they’re within the device viewport. However, this is not a silver bullet method - this is a double-edged sword, and here is why. Lazy loading is great but images typically are the Largest Contentful Paint (LCP) of the page. Having all images lazy loaded can hurt this CWV metric because this feature is powered by javascript, which means that users have to wait for the javascript to load and execute and thus delay the LCP event.
Instead, the website developers should disable lazy loading for images which are “Above the fold”. Above the fold refers to the section of the site that first greets users when they just land on a page. The content above the fold is the header, text, imagery, or anything else that's visible before users have to scroll.
7. Minify CSS and JavaScript
Asset minification means removing spaces, new lines, new lines, and any unnecessary characters to minimise the file size. Some website platforms offer this as a feature, and some require plugin or module installation but typically this is an easy way to increase the page speed.
8. Defer or Delay JavaScript execution
Heavy JavaScript snippets added to <head> tag can ruin your Core Web Vitals score. Especially, if you’ve got any third-party scripts like a live chat widget or newsletter popup - these features of the website are not essential for the users in the first couple of seconds of interaction with your website. Therefore, to avoid their impact on page performance and Core Web Vitals these scripts should be deferred with the async attribute and, ideally, delayed using the setTimeout() JavaScript function. This will ensure that your additional functionality doesn’t come with the cost of slowing down your site.
9. Optimise website fonts
Fonts are the assets that are typically loaded directly after CSS stylesheets and they can result in delaying the page from rendering. The good news is that it’s easy to defer fonts. Ensure all your @font-face declarations contain the display: swap; property. This would essentially remove fonts from the chain of assets required to begin rendering and the user will see the page earlier, even though with native browser fonts, which will be swapped once loaded.
Summary
There are numerous techniques which can contribute to improving Core Web Vitals scores and site performance, however all of them must be evaluated on a site per site basis and implemented carefully in order to have any positive impact.
At SixBySix, we have extensive experience of optimising sites for Core Web Vitals performance across different e-commerce platforms, and we work closely with our clients to ensure ongoing success in this area, providing training and documentation on best practices. We have also developed a custom application and dashboard that provides pro-active notifications that can help you mitigate issues relating to CWV performance and take action early before search engine performance is impacted - for example, the launch of a content marketing campaign where the images haven't been optimised efficiently and there's a likely knock-on effect of LCP failing further down the line.
Get in touch if you would like to arrange an initial consultation with our CWV experts to discuss how we can potentially help with your website.
