How to Improve Your Core Web Vitals

The best-performing webpages prioritize speed, yet engineering pages to improve their performance can be difficult. But there are volumes of statistics that highlight the necessity of speed. For example, a page load increase from 1 second to 3 seconds results in a bounce rate of 32%; a page load increase from 1 second to 6 seconds rises to 106%.

Google’s Core Web Vitals shows the key metrics of how a page is performing and are based on real-word usage data, i.e. how a user interacts and sees a page.

To recap, let’s look at what the metrics are in Google’s Core Web Vitals. 

1. Largest contentful paint (LCP)

A page’s largest contentful paint measures the loading performance. Ideally, the time of your largest contentful paint should be within 2.5 seconds to give a good user experience.

2. First input delay (FID)

First input delay measures the interactivity of a page. Ideally, the time of your first input delay should be within 100 milliseconds or less

3. Cumulative layout shift (CLS)

Cumulative layout shift measures the visual stability of a page. Ideally, the time of your cumulative layout shift should be 0.1 seconds or less.

Now that we have clarity over which metrics are included in the Core Web Vitals, we can take a look at some of the ways in which you can improve your Core Web Vitals performance for each page.

How to improve your page’s largest contentful paint

1. Pull any third-party scripts that are unnecessary. These are scripts that you can embed into your website directly from the third-party; i.e. they’ve not been created nor are controlled by you. This may sound easy but third-party scripts include very useful features like social media buttons, embedded videos, links to external sources, and ads that work for monetization. Almost every webpage has at least one of these, yet one study found that each third-party script slowed a page down by 34 milliseconds. So think smart about which ones you’re going to show off and which should either be removed or replaced to another page.
2. Consider setting up lazy loading. If you’ve not heard of this then it’s not what your instinct is telling you. Lazy loading (also known as asynchronous loading – but let’s face it doesn’t sound as memorable as lazy loading) is when images only load when a user scrolls down the page. This in turn quickens the performance of largest contentful paint because each image is only going to load once it’s on the screen.
3. Strip away large page elements. Consider the size of the elements on the page – this can literally be anything from headlines, tables, and images to paragraph length, check boxes, and buttons.  So there is a lot to potentially play around with. According to one study, in 2020 the average weight of a desktop webpage was 2,080KB (and 1,885KB on mobile). In 2017 the average weight was 1,532KB for desktop and 1,354KB on mobile. In addition, if you use Google PageSpeed Insights then it will tell you the page elements that are weighing down your LCP.

How to improve your page’s cumulative layout shift

1. Reserve a space specifically for ads. Ensure that you find the right place for the right-sized ad, otherwise ads can jump around on the page or shift the content upward, downward, or to the side.
2. Add user interface elements below the fold. Don’t worry about pushing content below the fold. With half of all website traffic coming from mobile, 90% of users scroll. Consider which elements to keep on the fold, so that content stays where the user expects it to be.
3. Set a size for media dimensions. Whether you have images, videos, infographics, or GIFs – and you don’t want to remove them altogether from the page – you can set certain sizes for your media. This way, the browser will realize how much space these elements are going to take up, and won’t resize after a second or two.

How to improve your page’s first input delay

1. Keep JavaScript to a minimum. A user can’t interact with a page if the browser is still loading. Also known as “minifying” your file, you can shave some milliseconds off your page’s speed by removing any unnecessary characters in the source code. Cleaning up your JavaScript is key for a good FID performance.
2. Pull any third-party scripts that are unnecessary. Again, just like largest contentful paint, first input delays can benefit from removing any non-essential third-party scripts.
3. Use a browser cache. When you explore a website, your browser will store the pieces of the page on your computer’s hard drive. Chiefly among these pieces are the images, logos, videos, which will be kept for the next time the user returns.

If you’re looking to improve your website’s Core Web Vitals then these nuggets of improvements will go some way to achieving better performance measurements. If you’re wanting to work with a top tech consultancy to reach these goals, then ArganoUV is specialized in Core Web Vitals much like a nurse knows how to check your vital signs.