What are Core Web Vitals and why are they important for website/e-commerce site owners?
The Web Vitals initiative was created by Google with the intention of simplifying the measurement of the experience that visitors receive when visiting a website or online store. Although tools have been available in the past that measured the speed of the website, the results were complex to interpret and required a lot of technical knowledge. Core Web Vitals, or Basic Web Metrics, is a subset of Web Vitals and focuses on the three most important metrics for user experience: loading speed (Largest Contentful Paint or LCP), interactivity (First Input Delay or FID), and visual changes (Cumulative Layout Shift or CLS). The metrics that make up Core Web Vitals are continuously updated, and it is also expected that new signals will appear in the future. Let’s take a look at what the metrics mean and then how to measure them.
Largest Contentful Paint (LCP)
LCP (Largest Contentful Paint) measures the loading speed of a website or online store by measuring the time between the start of the site’s loading and the time it takes to render the largest image, video, or text block within the viewport. In the past, measurements took into account the loading time of the HTML code, the time it takes to fully load all resources, or the time it takes to display the first content (First Contentful Paint or FCP), which often wasn’t realistic, as websites with loaders or delayed loading of resources tricked the algorithms, and the user had to wait longer for the page to load than the result would suggest. A good LCP value is under two and a half seconds, while values above four seconds are already reflected in a poor user experience.
LCP is affected by four factors: slow server response; JavaScript and CSS that prevent rendering; resource loading speeds and rendering on the client-side. The quickest and easiest, but in the long term, the most expensive solution is to upgrade your hosting package, which will not always significantly improve results. Better results will be offered by converting dynamic code to static with the help of caching plugins, removing or delaying the loading of less important scripts, and optimizing CSS stylesheet files.
First Input Delay (FID)
The FID metric measures the time elapsed between when a user interacts with a website (clicks a link or button) and when the browser can actually respond to the interaction. This delay (input latency) usually occurs because the browser’s main thread is busy processing other things, such as parsing and executing scripts that your website needs for dynamic content changes. During this process, the main thread can not yet execute events because they could be overwritten by code that is currently loading and executing. A good FID value is under a hundred milliseconds, while values above three hundred milliseconds are already reflected in a poor user experience.
Improving the FID metric can be achieved by making changes to the included JavaScript and CSS files, and some can also be gained by simplifying the structure of the page itself. JavaScript and CSS files can be split into chunks and only included on pages where needed; a plugin can be replaced with one that requires less JavaScript and/or less CSS layout or is simply more optimized; and avoid dynamically changing the layout during loading.
Cumulative Layout Shift (CLS)
The CLS metric is the sum of the largest unexpected single layout shift of a page caused by one or more visible elements being inserted into the content or changing size. Situations where the user triggers an action and as a result, the content shifts are not included in the calculations. Examples that cause shifts include images without specified dimensions; buttons or forms that are dynamically inserted; and advertisements. A good CLS value is below 0.1, while values above 0.25 are already reflected in a poor user experience.
Improving the CLS metric can be achieved through more careful planning of the page structure and strict specification of the dimensions of elements. For example, if you have content that loads with a delay, you must reserve space for it in advance so that the shift, when it finally loads, is as small as possible.
How to check Core Web Vitals values?
The simplest tool for checking Core Web Vitals is Google PageSpeed Insights. It is an online tool that allows for measuring the speed performance on simulated mobile and desktop devices, and for websites with sufficient user traffic with telemetry enabled, real data will also be displayed. The measured values are shown in the ‘Lab Data’ section, while the values measured from user devices are displayed in the ‘Field Data’ section.
In addition to the FCP, LCP, and CLS values, you will be able to see some other metrics in the results, such as the speed index, time to interactivity, and total blocking time, and the website will also offer you potential solutions for their improvement.
How to collect real data from users?
Although the PageSpeed Insights tool is very useful for analyzing individual pages, it is not suitable for analyzing larger websites, as it requires too much time investment or the use of paid tools. A better alternative is to use the free report in the Google Search Console tool (formerly Google WebMasters).
Upon adding your website to the tool, a 28-day interval will begin during which user data will be collected from Google Chrome browser users who have enabled history synchronization and usage statistics. If too few of the aforementioned users visit your website during this interval, the statistics will not be displayed; otherwise, you will be able to collect and monitor fluctuations for several months backward.
Core Web Vitals optimisation
Although we have already given you some tips above, optimizing Core Web Vitals is not an easy task, as laboratory data often do not fully correspond to reality, and you have to wait 28 days for the latter data to be updated. If you are using a lightweight theme and few plugins, then it is not difficult to move from the red to the yellow area, but you will have to put in some effort to achieve good results. The more capabilities the theme offers, the harder it is to implement optimizations if the creators did not think of them in advance, so we definitely recommend that you turn to experts.
At Ideaz Web Agency, we are specialists in creating fast WordPress sites, and we also have some experience in speed optimization of existing sites. Get in touch with us and we will examine your website and present possible solutions.
