Quick Wins for Improving Your Core Web Vitals

Google recently introduced a new metric called Core Web Vitals.

This metric is composed of website data that Google looks at when evaluating your website’s performance and user experience, and then gives it an appropriate score.

This evaluation looks over a specific collection period, in which website data is collected and based on the gathered data, your website either passes or fails the Core Web Vitals assessment.

Starting in June (initially planned for May) this evaluation will impact how your website ranks in Google’s search engine results.

Breaking Down Core Web Vitals

Core Web Vitals are comprised of the following metrics:

Largest Contentful Paint

Largest Contentful Paint or LCP measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.

First Input Delay

First Input Delay or FID measures interactivity. To provide a good user experience, pages should have an FID of less than 100 milliseconds.

Cumulative Layout Shift

Cumulative Layout Shift or CLS measures visual stability. To provide a good user experience, pages should maintain a CLS of less than 0.1.

Source: https://web.dev/vitals/

Quick Wins for Big Impact

Improving LCP by optimizing your image assets

To speed up the initial load of a website, you need to optimize how the images load and display. We found these tweaks to be the most efficient way to achieve this:

1. Defer offscreen images by utilizing lazy loading for all the images that are not shown above the fold.
2. Don’t use oversized images just to make them appear sharp, instead, use image dimensions that are only as big as necessary — and at the same time take into account the necessary buffer for higher dpi retina screens — and optimise image sizes for web use.
3. Preload each page’s biggest image on all screen sizes, preferably with an optimised image size for mobile screens as well:
4. Optimise website rendering time through the utilization of caching, prefetching, preloading techniques. Here’s an example of preconnecting and prefetching for a more efficient connection to download the necessary Google Fonts:
   
5. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles.
   Move the CSS that’s required for showing the above the fold page inline to all the relevant elements so that the page loads as fast as possible.

Improve FID by optimizing your website’s code

FID is all about making the download of your website resources as quick and efficient as possible for its visitors:

1. Reduce the number of network requests and their transfer sizes
   Achieve this by combining multiple files into one if at all possible. This is usually easier done with CSS files than with JS files, which often have dependencies in regards to their order. Minify CSS, JS and HTML files to squeeze out as much performance as possible.
2. Reduce the impact of third-party code
   We are still investigating the impact of GTM and other tracking scripts on site performance.

Reduce CLS by revisiting how your website layout resizes different elements on load

Cumulative Layout Shift is most often caused when different elements change their size and/or position while the page loads. Here are some tweaks we’ve found that help greatly with improving or even completely fixing CLS on our clients’ websites:

1. Move cookie disclaimer or other notifications to the bottom of the page.
   By doing this, the website content won’t be pushed around when the cookie bar gets inserted at the top of the page.
2. Make the hero banner a fixed height to avoid pushing page content around.
   All the layout elements that are shown above the fold will impact your Cumulative Layout Shift score based on the amount of unnecessary element resizing.
3. All the elements that are above the fold should have exact dimensions specified to avoid pushing page content around both on mobile and desktop.

The Impact of Core Web Vitals

While it’s relatively easy to improve your Core Web Vitals score drastically with a few quick wins, it can take a while to fine-tune every aspect of your website performance and user experience to really nail all the improvements that Google wants you to make.

We are yet to see what will actually happen when this score hits your website’s Google ranking in June and what impact it will have, but preparing for it beforehand should improve the overall website experience at least for your users if not only for Google.

If you’re looking for an expert hand to guide you through this potential Google “shake up”, speak to the Digivate team today.