User experience is one of the important factors that determines the success of a website. If a site is not easy to navigate, takes too long to load, or does not fulfill its purpose, it is of no use. To ensure the speed, interactivity, and visual stability of web pages, Google has introduced metrics known as Core Web Vitals (CWV) that should be maintained to be ranked higher on Google.
Whether you are a web developer, SEO specialist, or website owner, you should be aware of Core Web Vitals and the significance of optimizing them. In this article, we will discuss what CWVs are and how you can optimize them to improve the performance of a website and enhance user experience.
The Core Web Vitals (CWV) is an initiative from Google that provides a general guideline for web developers and SEO specialists to optimize their websites to rank better on the search results. These are aimed at ensuring quality, enhancing performance, and improving the usability of websites. CWV resembles a set of standardized metrics, each providing its own perspective.
Before becoming stable or known as Core Web Vital, each metric goes through the following 3 phases:
Experimental Phase: Google observes new metrics and tests them. They also gather feedback from users and developers.
Pending Phase: In the pending phase, any metric that has passed the experimental phase is given 6 months so the community can adapt it and give more feedback.
Stable Phase: If a metric earns a good reputation in the pending phase, it is added to Google’s Core Web Vitals.
Majorly there are three main Core Web Vitals given by Google:
Let’s first discuss these in detail and move forward to other factors that contribute to improving the core parameters.
Largest Contentful Paint (LCP) measures the performance by determining how long it takes for the largest instantly visible part of the website to load. The element could be an image, a video, or a text block. According to Google, LCP value should land within 2.5 seconds for a satisfactory performance. If your page’s LCP is greater than 2.5, it means that you should optimize your page.
Largest Contentful Paint (LCP) timings breakdown. 0 to 2.5 sec — good, 2.5–4.0 sec — needs improvement, 4.0 and beyond is poorInteraction to Next Paint (INP) determines how fast a page responds to interactions. An interaction is a series of event handlers triggered when a user performs an action on a site, such as clicking an element, tapping, or pressing a key on the keyboard. INP is measured in milliseconds and, ideally, your site should respond to user interactions within 200 ms to make INP green. If your INP goes beyond 200 ms, you should focus on improving your site and making it more responsive.
Good INP is up to 200 milliseconds. Anything above 500 ms is considered poorCLS is a unitless metric that represents visual stability of a page. There are several factors that contribute to the score that we’re going to touch on in this section, but speaking in general UX terms: the fewer elements that unexpectedly change their position or size during page load, the better.
For instance, when a user is about to click on a button, a promotional popup appears on the screen. This impacts the site’s usability adversely, irritating the users since they may end up clicking on the wrong URL.
An unexpected layout shift is a sudden movement of layout that has no user interaction within the past 500 ms prior to it.
When this kind of layout shift is encountered, two fractions are calculated: impact fraction and distance fraction. The impact fraction measures how much of a viewport area is changed from one frame to the next. In the example below, the impact fraction is 0.75.
An image demonstrating impact fraction of Cumulative Layout shiftThe distance fraction represents how far has the element moved according to its position in a previous frame. In the same example, the text block has moved down 25% giving us a distance fraction of 0.25.
An image demonstrating distance fraction of Cumulative Layout ShiftThe layout shift score for a given shift is calculated using the formula below:
layout shift score = impact fraction * distance fractionLayout shifts that happen one right after another (less than 1 second apart) for a maximum of 5 seconds are called bursts of layout shifts or session windows. The CLS score is the layout shift score of the largest burst of layout shift.
CLS session windows demonstrationTo pass the CLS test, your page should have a score ranging from 0 to 0.1.
Aim to have CLS less than 0.1. Values over 0.25 are considered poor and may significantly harm the UX of a pageThe Time to First Byte (TTFB) metric determines how long it takes for your server to generate and send the first byte of the response to a user’s request. A good TTFB value is 0.8 seconds or less. If it exceeds 0.8 seconds, the server and/or network path need some upgrades.
The First Contentful Paint (FCP) is the measure of the time between when the user navigates to a page and when the first content is displayed on the screen. The content that affects your FCP score includes:
<svg> elements;<canvas> elements.Besides the rendering speed, FCP is affected by other factors such as the time it takes to process the unload event of a previous page, connection setup times, redirect time, navigation times, and TTFB. For a better user experience, your site’s FCP should be 1.8 seconds or less.
Maintaining the Core Web Vitals (CWV) is essential to your site’s reputation and performance. They ensure a better user experience, making your website more interactive, responsive, and visually stable so users enjoy using it.
According to research, around 40% of people don’t spare their time on slow sites and switch to another website if a site does not load within 3 seconds. Therefore, CWV optimization is crucial to your site performance. Moreover, better Core Web Vital scores can help you rank better on search engines.
CWV optimization is one of the beneficial practices to make your website get a higher ranking. There are numerous techniques and measures that you can take to enhance your site performance, speed, and user experience, some of which we will discuss in this section.
Although the high-resolution images make the website look more attractive and visually appealing, they can sabotage your site’s performance in less-than-ideal network conditions. By optimizing the image size and resolution, you can easily improve your site’s loading speed, ultimately improving LCP.
The best way to optimize image size and resolution is using the srcset attribute.
It allows you to provide multiple image sources with a specified width or pixel density for a browser to pick suitable one for a given device.
<img src="/image_1.png"
srcset="/image_2.png 2x, /image_3.png 3x"
width="200px"
height="200px"
alt="Metrics" />Another way of optimizing images is compressing them to make them weigh less and to be downloaded faster. You can compress images in two formats: lossy and lossless. The lossy compression is the one that removes some of the information from the file while compressing, whereas the lossless compression does not remove any file information.
The next option would be using web-friendly formats such as WebP and AVIF. The WebP is almost 34% smaller than the traditional formats and AVIF is 20-30% smaller than the WebP.
You can use these methods in conjunction to get the best results possible. Uploadcare makes it easy to achieve fast results in this realm with their Image CDN.
The Lazy Loading technique prevents offscreen images from loading unless they are visible within the viewport. This saves the loading time/bandwidth. If you use any of the popular CMSes, there should be plenty of plugins to choose from that do just that.
You can also enhance image loading experience by utilizing Blurhash — the tool provides a blurred version of an image generated from a short piece of text that you could send as an attribute for an image tag.
The fewer the fonts, the better the website loading speed. Although fonts represent your website’s personality, using multiple fonts can lead to slow and low-performing pages. For font optimization, try using no more than 2 fonts across the website, one for headings and other for paragraphs so fewer HTTP requests are sent. Moreover, you only need to keep the font weights you really use. Whenever possible, use generic system fonts as a fallback. For critical fonts, use the preloading technique. Also, store the fonts in WOFF or WOFF2 formats which are the best suited for the websites.
You can even tailor up fonts on your website by using unicode-range to provide the exact set of characters you’d want to load. Alternatively, it is possible to manually remove unused glyphs from a font — it is possible with tools like Beatrix.
To improve your LCP scores, you can consider browser caching, server-side caching, or object caching.
Browser Caching: A process of creating local copies of the recently visited webpages, images and other content on a user’s device.
Server-side Caching: A process in which the data and webpages are temporarily stored on servers as pre-rendered HTML files to ensure quick delivery to the users.
Object Caching: A process of storing database query results to be accessed quickly in the future without making actual database calls.
If your website is built upon any sort of CMS that generates static HTML output, using server-side caching plugins would be a go-to solution to get instant results. But this may come at a cost of revalidating cache files more often if you update content frequently.
One of the ways to improve your LCP score is by preloading the largest element of your site.
Often, the largest element of the viewport is an image.
If this is the case, you can add the following line of code in the <head>:
<link rel="preload" href="image_path" as="image" fetchpriority="high">Make sure to replace image_path with the location of the image on your server.
You can also use media queries to determine which image to preload. This section on the MDN describes the approach in detail.
Another factor that impacts your site performance and CWV score is your hosting plan. If you are using a cheap and low-performing hosting plan, your site might take longer to load and respond to user interactions. Therefore, upgrading your hosting plan can aid in improving your LCP scores since it ultimately speeds up the site responses.
Using heavy and large JavaScript scenarios can make your site less responsive since the browser gets busy running scripts, leaving no time to respond to user interactions. The general rule of thumb here is eliminating render-blocking resources and avoiding main thread blocking.
The render-blocking resources refer to the JavaScript and CSS files that must be downloaded, parsed or executed before any other action is performed when the browser encounters them. A lot of render-blocking scripts can affect LCP, FCP, and TBT (Total Blocking Time). Here are some tips for optimizing JavaScript to eliminate render-blocking resources:
Use defer or async to delay third-party scripts:
The defer attribute ensures that the scripts are executed in the specified order once the DOM content has finished loading.
The async attribute executes the scripts independently based on whichever script loads first.
Code Splitting: A technique of breaking down JavaScript code into smaller modules and executing only what’s necessary at the given moment of time. This makes your site load faster since only the required code blocks are executed unless the user performs an action.
Generate critical CSS and put it directly into HTML before content: Critical CSS is a set of CSS rules needed to display above-the-fold content (what the user sees first). This is another way of separating the actual presentation of content from the CSS loading state thus improving perceived loading times.
Additionally, if you work with a single-page application, consider pre-rendering HTML on the server and then “hydrating” it with JavaScript.
Give a specific width and height to your images so a browser knows in advance exactly how much space to reserve for such elements. To do so, you can use the width and height attributes in the image tag as follows:
<img src="image_URL" width="200" height="500" alt="alternate_text" />Make sure to replace the image_URL and alternate_text with respective values for the image you use,
and specify your desired width and height in the corresponding attributes.
On the Web, you can find multiple tools to measure and improve the Core Web Vitals, but in this section, we will mention the top tools for CWV optimization that are widely used and recommended.
Lighthouse is an open-source tool built into popular Chromium-based browsers (Chrome, Edge, Opera, etc.) to improve the quality of web pages. This tool analyzes your website for performance, accessibility, best practices, and SEO and suggests improvements. By making the changes suggested by Google Lighthouse, you can enhance your website performance and CWV metrics.
Lighthouse run inside ChromePageSpeed Insights is usually considered to be a “cloud version of Lighthouse”. It helps you analyze the specific web pages and check their CWV scores. To analyze a page, simply put in the URL and press the Analyze button. The tool will measure and display the score bars for core metrics and show the potential issues with the analyzed page. Also, if you opted for collecting real user performance data, it could also be shown here.
PageSpeed Insights run for google.comChrome DevTools is a set of developer tools that allow you to edit pages on the go and diagnose issues. It helps you view, change, or manipulate the DOM elements and edit the CSS in the preview mode. The Performance panel in DevTools provides current Core Web Vitals metrics and gives a live view of performance as you interact with the page. This helps in uncovering performance issues.
Core Web Vitals displayed inside the DevTools Performance tabWebPageTest is an online tool that allows you to check your website for Core Web Vitals and provides you with suggestions to improve your CWV score. It is designed for developers and site owners to monitor and improve their website performance.
WebPageTest Core Web Vitals results for google.comHere are some tips to prioritize fixes and enhance your CWV scores:
Ease of implementation: Consider implementing easier solutions first. For example, optimizing an image is much simpler than changing a site’s layout. So prioritize the easy and quick tasks.
Stick to the vision: Keep the purpose of your site in mind. Which web vital to improve first depends entirely upon the current state of your website. There’s no one-size-fits-all solution so you should first analyze your site and take the necessary steps to improve your CVW scores.
Use Analysis Reports: To determine which page to improve, use the analytics tools to gather some data and start with the pages that need improvements the most.
When writing articles for the Google Lighthouse series here on the Uploadcare blog, I strive to include relevant case studies or examples that readers can follow and replicate. Here are the links to the sections of the articles that contain these examples:
The Core Web Vitals should be as good as possible for your particular situation to make sure that your website’s UX is good enough. Having a green score determines that your site passes the CWV requirements, so yes, they should be green for the best results.
I recommend starting with the metrics that could potentially bring a lot to the table and are easy enough to fix (based on your situation and codebase). Try thinking in a user-centric manner to identify bottlenecks that could hinder website loading the most, and then look for a correlation between your experience and Core Web Vitals.
Yes, using a Content Delivery Network (CDN) will help improve the Core Web Vitals since the user gets a response from the closest server. This ultimately leads to less layout changes and faster loading times. Feel free to try Uploadcare’s Image CDN and new Video CDN — free trial is available.
The Core Web Vitals are not the only metrics that Google considers when indexing and ranking pages. There are numerous other factors such as content quality, backlinks, user experience, keyword optimization, etc. that play a vital role in bringing a site higher in ranking. Your competitors may use better SEO strategies, aiding them in ranking higher on the search engine. If your CWV scores are green, also consider focusing on the other factors.
No metric in CWV is less significant than the other. All three metrics (LCP, INP, and CLS) are, technically, crucial when it comes to optimizing Core Web Vitals. But, if you’re short of resources, run a brief analysis of your codebase to determine low hanging fruits to catch first.
It depends entirely upon the tools and the strategies you use to improve CWV. However, if you feel confident enough to manage the website code or admin panel, giving it a try yourself first might be worth it.
The Core Web Vitals optimization topic is a vast one to grasp on a first try. If you’re just starting out, you may find yourself lured into thinking that “green CVWs will solve everything”. While web performance measurement tools have made a giant leap forward since the dawn of the Web, these are still tools made to quantify the real user experience, so treat them accordingly. And feel free to check out other performance-related articles on Uploadcare.
Ready to get started?
Join developers who use Uploadcare to build file handling quickly and reliably.