1-888-959-PAPA [7272]
24/7/365
Top
HostPapa Blog / Web Design & Development  / How to Optimize Your Site for Google’s Core Web Vitals
How-to-Optimize-Your-Site-for-Google’s-Core-Web-Vitals-header
12 May

How to Optimize Your Site for Google’s Core Web Vitals
Share

(Last Updated On: May 12, 2022)

With Core Web Vitals, Google is on a mission to improve the overall performance of the web. Why? Because Google’s business is primarily web-based – slow websites and web applications cause users to return to native applications.

Your position in Google search results is heavily influenced by the keywords associated with the search term, the use of those keywords within your page, and the popularity of your page as measured by the number (and quality) of links pointing to it from other sites.

What are Core Web Vitals?

Core Web Vitals are page experience signals that measure how well a website performs for its visitors. In simple terms, these signals are used to determine how quickly users will be able to interact with your website and what kind of result they will receive. In addition, the ease with which users can navigate through the website is also measured by these signals.

The more significant the user experience and the overall improvement in your website, the higher your page experience scores.

Core Web Vitals metrics are divided into three categories:

  • In website performance, the Largest Contentful Paint (LCP) measures how quickly the most significant element (such as an image, a video, or an animation) can be loaded and displayed on the page.
  • Cumulative Layout Shift (CLS) ensures that a website’s pages don’t contain any unexpected or confusing movements that could distract users from consuming the content.
  • The First Input Delay (FID) of a website’s pages indicates how responsive the pages are when a user interacts with them for the first time. It also assesses how quickly a website’s browser can deliver the desired result to the user.
How-to-Optimize-Your-Site-for-Google’s-Core-Web-Vitals-inner-1

The LCP, FID, and CLS score is calculated using real-time user metrics collected anonymously through the Chrome browser. The 75th percentile is determined by calculating rather than an average. These measurements can vary depending on the user’s device, Internet service, and other concurrent activities, so it’s more accurate.

In other words, metrics from all users are ranked from best to worst, and the figure at the three-quarters mark is taken as the final result. As a result, three out of every four site visitors will experience the same level of performance or better.

Pages with a high (green) score for all three Core Web Vitals metrics will appear higher in search results and will be featured in the “Top Stories” carousel in the Google News app, among other benefits.

Tips to Improve Core Web Vitals

Website performance analysis should be performed quickly to determine how well your website performs in critical web functions. You can accomplish this by using Google tools such as Search Console and Page Speed Insights and third-party tools such as GTmetrix.

Running performance reports with different tools and comparing results is an excellent way to make your page more efficient and improve its overall performance.

Reduce the amount of JavaScript (JS) executed.

A low FID score indicates that your page interacts with users for more than 300 milliseconds. Consider reducing and optimizing the amount of time your JS is executed. This means that the amount of time between the execution of JS code in your browser and the display of the page is decreased.

It’s also essential to use as little memory as possible when programming. Whenever the code on your site requests the browser, the browser reserves new memory, which causes the JavaScript to stop and the page to load slowly. According to Google, one of the ways to reduce the execution time is to defer JS that isn’t currently being used.

To check if your website contains any unused JavaScript, do the following:

  • Navigate to your website and select Inspect from the context menu on the right.
  • Select Sources from the drop-down menu and look for three dots at the bottom of the page. You should include a tool called Coverage. After you’ve finished adding it, click on the load function.
  • As soon as the load is complete, you’ll be able to see how much JavaScript is not being utilized on your web page.

You should start removing it from your system when you see how much JS you’ve been wasting. Code splitting is one of the methods that can be used to accomplish this. This refers to breaking up a JavaScript bundle (a collection of files combined into a single bundle to avoid making too many HTTP requests to load a page) into smaller pieces.

Lazy loading should be implemented.

If you have images on your site, use lazy loading to ensure that your site’s user experience and core web vitals score are not negatively affected. By using lazy loading, you can load images at the exact moment that users scroll down through the page without compromising the loading speed of your website and achieving a top-notch LCP score.

The following are some additional advantages of lazy loading:

  • The overall performance of your website will be enhanced.
  • It will restrict the amount of bandwidth that can be used.
  • It has the potential to improve the search engine optimization of your website.
  • Keep your visitors on your page longer, and you’ll see a reduction in your bounce rate.

Is it likely that lazy loading will be beneficial to your website? Resources state that lazy loading should be used for pages containing many images, animations, or videos (also known as “heavy elements”) because they are considered essential. However, there are no hard and fast rules for using lazy loading on specific pages. As a result, if your website’s LCP score is low, you should consider experimenting with lazy loading and comparing the results before and after implementation.

Image optimization and compression

Images are often the most prominent elements on many websites. Optimizing them because doing so can significantly reduce the weight of your page, resulting in improved loading speed, LCP score, user experience, and search engine rankings.

Using tiny jpg to compress images, you can reduce the overall page size while simultaneously improving your LCP results. You might be under the impression that image compression will degrade the quality or resolution of the image. Actually, the difference is only noticeable when the image is zoomed in or when the image is saved in the incorrect file format. Always try to save landscape images in the jpg format and graphics in the png format. You can also use next-generation formats such as JPEG 2000, JPEG XR, or WebP, it’s recommended that you do some preliminary research before proceeding.

In addition to image compression, make use of a Content Delivery Network (CDN) to distribute images. A content delivery network (CDN) is a collection of servers located all over the world that stores your content. Because servers are located in a variety of different locations, images can be served more quickly from the server that is closest to the user.

How-to-Optimize-Your-Site-for-Google’s-Core-Web-Vitals-inner-2

Make sure that images and embeds have the proper dimensions.

A CLS score greater than 0.1 is considered poor, and it’s typically caused by elements such as images, advertisements, or embeds that do not have dimensions in the CSS file. You should consider the dimensions if you want to improve your CLS score. The importance of setting the correct width and height of an element allows the browser to allocate the appropriate amount of space on the page while the element is being rendered.

Make sure that you’ve set the proper dimensions for embeds, such as when embedding videos from YouTube into your website. By default, the video may appear to be fine from the back end, but it may appear to be excessively large or messed up from the front end. This indicates that there is a problem with the dimensions, and you should make the necessary adjustments.

Open the YouTube video that you want to embed on your site. Then locate the share button and select the option <> Embed from the menu.

All of the information, including the dimensions, will be displayed. Copy the code into the back-end of your website and modify it to make it the proper width and height for your particular website design.

Improve the response time of your server.

The longer it takes a browser to receive content from a server, the longer it takes for anything to be displayed on the screen. Increasing the server response time directly improves every page-load metric, including page load time per second (LCP). A slow server response time can hurt not only your SEO but also your user experience.

You can measure server response time using the Time to First Byte (TTFB) metric, which indicates how long it takes for the first byte of your page’s content to arrive in the user’s web browser.

Gather information about the current performance of your server to get a sense of how well you’re doing. When you have completed the report, the following suggestions will be useful:

  • Check the speed of your web hosting service.
  • Make use of a content delivery network (CDN) for your website.
  • Check the plugins you’ve installed. Why? This is because each plugin adds additional weight to your page, which can harm your site’s overall performance. Only the most essential ones should be left.

Google recommends that a server’s response time be less than 600 milliseconds to be effective. Even though the Core Web Vitals will be implemented in less than three months, you must begin working on improving them immediately. Since the reports on vitals are now available, take advantage of the tools to compare your site results before and after the errors were corrected.

Your website’s backend interacts with the front end, so make sure that the back end is optimized to provide the best user experience in terms of loading speed, visual stability, and interactivity, among other things. Also, don’t forget about Google’s existing search signals, such as mobile-friendliness, safe browsing, HTTPS, and intrusive interstitial guidelines, which can all help your site rank higher in search results.

Largest Contentful Paint (LCP)

The loading performance of the Largest Contentful Paint is measured by how quickly usable content is displayed on the page?

LCP measures the amount of time it takes for the largest image or block of text to become visible within the browser viewport and calculates its time. A hero image, a banner, a heading, or a large text block will be the most prominent element in the majority of cases.

Aspects such as the following are eligible for consideration in the Largest Contentful Paint analysis:

  • Graphical representations (<img> element)
  • Images embedded within vector graphics (for example, an <image> embedded within an <svg>).
  • Thumbnails for videos (a poster attribute that points to an image URL contained within the <video> element)
  • Background images for elements (which are typically loaded using the CSS background-image url() property)
  • Text-containing elements at the block level

Pages completing the LCP within the first 2.5 seconds of the page loading are considered to be of high quality (green). Pages that take longer than 4.0 seconds to load are considered poor (red).

Tools for Largest Contentful Paint Analysis

Although LCP is the Core Web Vital metric that is the simplest to comprehend, it is not always clear which element will be chosen for analysis.

Chrome, Edge, Brave, Opera, and Vivaldi are all Chromium-based browsers, and the DevTools Lighthouse panel is available in all of them. Select Lighthouse from the DevTools drop-down menu in the browser menu – typically found at More tools > Developer tools or by using the keyboard shortcuts Ctrl | Cmd + Shift + I or F12 – and then click it (older editions may name it Audit).

Create a Mobile Performance report, and then examine the Performance section in the report.

If you don’t have access to a Chromium-based browser, you can generate the same information using the online PageSpeed Insights and web.dev Measure tools.

As well as displaying an LCP indicator, the DevTools Performance panel also displays an LCP indicator. To begin, click on the circular Record icon, then reload your page before clicking on the Stop button to view the report. When you are in the Timings section, select the LCP icon to identify the element and view a summary of statistics.

The Web Vitals extension is currently only available for Google Chrome, but it can be installed on the majority of Chromium-based browsers by following these instructions. It calculates Core Web Vitals metrics for each site you visit, and its icon changes colour from green to orange to red depending on the outcome of the calculation. You can also view additional LCP details by clicking on the extension icon.

If your website is added as a property to Google’s Search Console, you’ll now have access to the Core Web Vitals section. The report illustrates how the CWV metrics have changed over the course of several decades. It should be noted that it does not provide specific LCP metrics and that only sites with a reasonable amount of traffic are available.

The Chrome User Experience Report allows you to query real-time usage statistics for a specific URL, including LCP across multiple countries, connections, and devices. Due to the fact that it is a publicly accessible project on Google BigQuery, you must create a Google Cloud Platform account and provide billing information. Once again, the report will only be useful if the URL in question receives a significant amount of traffic.

The web-vitals JavaScript library is a small 1 kB script that can determine LCP and other Core Web Vital metrics for actual users on your live site using data from the web-vitals JavaScript library.

A callback function is triggered when the LCP value calculated is passed to the getLCP() function, which is an asynchronous function (though it may never trigger if the page loads in a background tab). An object containing the following elements is passed to the callback function:

  • Name: the name of the metric (in this case, “LCP”) is specified
  • Value: the amount that has been calculated
  • ID: a one-time identification number that represents this metric for the current page
  • Delta: the difference between the current value and the value that was previously reported
  • Entries: an array of entries that are used in the calculation of the value,

However, sending the data to a server or Google Analytics for further analysis is more practical than simply printing the object to the console.

Common Causes of Poor Largest Contentful Paint Scores

Poor LCP scores are typically caused by pages that take too long to load, preventing the largest block from appearing as quickly as possible:

  • It’s possible that the server response is slow because it is overloaded or because it is performing too much work to render a page. The reason for this may not necessarily be the fault of your website; if you’re using a shared hosting service, it may be due to server limitations.
  • Render-blocking, when CSS and JavaScript are referenced in the HTML above the primary content, can cause a delay in the page loading time.
  • Other resources, such as large images and videos, can reduce the available bandwidth and cause the rendering process to take longer.
  • It also takes longer for the page content to appear when it is generated on the client rather than the server.

How To Improve Largest Contentful Paint Scores

When loading issues are discovered through a thorough audit, it’s usually a simple matter of decreasing the amount of data transmitted to the browser. The following suggestions will assist you in achieving a higher LCP score:

  • Upgrade your server and/or hosting service to the latest version. Make certain that download speeds remain fast even during periods of high usage.
  • Server compression and HTTP/2+ should be enabled. 
  • Reduce the amount of effort put forth by the server. Deactivate any unused code or CMS plugins before enabling effective caching.
  • Confirm that the browser is able to cache files effectively. Set the appropriate Expires, Last-Modified, and/or ETag hashes in the HTTP headers to prevent files from being requested multiple times in the future.
  • To distribute the load and host assets on servers geographically closer to the users, a Content Delivery Network (CDN) should be used.
  • Optimize the quality of your images. Reduce them to their smallest possible dimensions and save them in an appropriate format to keep file sizes as small as possible. Maintain the earliest possible request for any image in the largest content block; a preload could be useful in this regard.
  • Add the loading=”lazy” attribute to images to make them load more slowly. By including the width and height attributes, you can ensure that enough space on the page is reserved before the image has finished loading.
  • Reduce the number of third-party requests, and move assets to your primary domain to avoid unnecessary DNS lookups.
  • Reduce the number and size of files that are requested, especially at the beginning of your HTML.
  • Confirm that only the web fonts that are required are loaded. Make the switch to web-safe fonts for the best possible performance.
  • Remove any JavaScript and CSS files that are no longer in use.
  • Concatenate and minify the JavaScript and CSS files on your computer.
  • Avoid using CSS @import statements because they are render-blocking and cause styles to be loaded in series.
  • Base64 encoding should be avoided because it increases file sizes and necessitates additional processing.
  • If you want to run scripts later, you can use asynchronous, deferred, or ES module JavaScript. Long-running JavaScript processes can be carried out by a service worker.

First Input Delay (FID)

The First Input Delay is a metric that measures how responsive your page is. What this boils down to is how quickly it reacts to user actions such as clicking, tapping, and scrolling.

This metric measures the amount of time that elapses between a user’s interaction and the browser’s response to their request. It doesn’t take into account the time it takes to run the handler function, which would normally process the input and update the DOM.

Pages with an FID time of 100 milliseconds or less are considered to be of good performance (green). Pages that load in more than 300 milliseconds are considered poor (red).

First Input Delay Analysis Tools

Due to the fact that it can only be measured when the page is served to an actual user who interacts with the page, it is impossible to simulate the first input delay. As a result, the outcome is determined by the speed and capabilities of the processor in each device.

It’s not possible to calculate FID in either the DevTools Lighthouse panel or the PageSpeed Insights tool. They can, however, determine the total amount of time that is blocked (TBT). First Input Delay is approximately equal to this value, which is a reasonable estimate. It determines the amount of time that has elapsed between:

  • The First Contentful Paint (FCP), also known as the time at which page content begins to render
  • The Time to Interactive (TTI), or the amount of time it takes for a page to respond to user input, is measured in seconds. TTI is presumed to be in effect when no long-running tasks are active and no more than three HTTP requests have been successfully completed.

Additionally, the Web Vitals extension for Google Chrome can display an FID metric after users interact with a page by scrolling or clicking on it. 

Chrome User Experience Report (CURE) is similar to the LCP. It allows you to query real-time FID statistics collected across multiple countries, connections, and devices for a specific website URL.

The web-vitals JavaScript library can also calculate FID metrics for real users on your live

website using the web-vitals JavaScript library. Adding the script to your HTML <head> will allow

you to output FID metrics to a callback function for further processing.

Common Causes of Poor First Input Delay Scores

The majority of the time, poor FID and TBT scores are caused by client-side code that consumes too much processor time, such as:

  • There are significant amounts of render-blocking CSS and JavaScript on the page, which causes the page to stall while the code is downloaded and parsed.
  • Large, time-consuming scripts that begin running immediately after the page is loaded
  • JavaScript tasks that take a long time to complete or are poorly optimized

In their default configuration, browsers run on a single thread, which means they can only

handle one task at a time. If a JavaScript function takes one second to complete, all other

rendering processes are halted for the duration of that one second period. The page cannot

respond to user input, update the Document Object Model (DOM), display animations, etc. GIF animations may be blocked in older browsers.

How to Improve First Input Delay Scores

A client-side JavaScript audit can identify problems. Still, most of the time, it’s just a matter of removing redundant code and making sure tasks are completed as quickly as possible.

The following suggestions will assist you in achieving a higher FID score:

  • Create as much static HTML content as possible on the server and store it in a cache.
  • Make an effort not to rely on client-side JavaScript frameworks to render the same HTML for all of your visitors.
  • Ascertain that the browser can cache files effectively. Set the appropriate Expires, Last-Modified, and ETag hashes in the HTTP headers to prevent files from being requested multiple times.
  • Use progressive enhancement techniques to ensure that the interface is usable in HTML and CSS before JavaScript is loaded and executed.
  • Remove any JavaScript and CSS files that are no longer in use.
  • Concatenate and minify the JavaScript and CSS files on your computer.
  • Avoid using expensive CSS properties such as box-shadow and filter in excess.
  • You can use asynchronous, deferred, or ES module JavaScript if you want to run scripts later.
  • Reduce the number of third-party JavaScript requests for analytics, social media widgets, discussion forums, and other features. These can quickly add up to several megabytes of JavaScript on a single computer.
  • JavaScript components that are lazy-loaded on demand, such as chat widgets and video players.
  • Loading of less-critical scripts, such as analytics, advertisements, and social media tools, will be delayed as a result.
  • Reduce the size of long-running JavaScript tasks by breaking them up into smaller jobs that are executed after a short request IdleCallback, setTimeout, or requestAnimationFrame delay.
  • Consider the possibility of running long-running JavaScript processes in a web worker, which uses a background thread to accomplish this.

Cumulative Layout Shift (CLS)

CLS measures the visual stability of a web page. To put it another way, does the page content move or jump unexpectedly, particularly during the initial load?

When elements move without warning or user interaction, CLS calculates a score for that element. You’ve probably experienced this while reading an article on a mobile device: the text suddenly jumps off the screen, and you lose your place in the article. The worst-case scenario is that you accidentally click on an incorrect link.

CLS issues are most noticeable when a large image or advertisement loads above the current scroll position, causing a zero-height space to instantly grow by several hundred pixels.

Scores for Cumulative Layout Shift are calculated by multiplying all of the metrics together:

Impact Fraction: This is the total area occupied by all unstable elements in the viewport, i.e., those prone to “jumping.” 

Distance Fraction: This is the maximum distance that any single unstable element in the viewport can travel in one frame.

Tools for Cumulative Layout Shift Analysis

Calculations for CLS metrics are made in the DevTools Lighthouse panel, PageSpeed Insights, and web.dev Measure tools, among others. The Web Vitals extension for Google Chrome also displays the CLS metric. The Chrome User Experience Report, like the LCP and FID, enables you to query real CLS statistics recorded across various countries, connections, and gadgets for a specific URL, much like the LCP and FID.

Just as it does with LCP and FID metrics, the web-vitals JavaScript library can calculate CLS metrics for real users on your live site using the same code. CLS metrics could be output to a callback function if the script were included in the HTML <head>.

Common Causes of Poor Cumulative Layout Shift Scores

Slow loading assets, and dynamic or unsized DOM components are the most common causes of low CLS scores.

  • Images, iframes, advertisements, etc., do not occupy any of the available space on the page.
  • Content is dynamically injected into the after a network request for advertisements, social media widgets, etc.
  • Flash of Unstyled Text (FUT) or FOIT (Flash of Invisible Text) is a noticeable effect of loading web fonts (FOUT).

How to Improve Cumulative Layout Shift Scores

For the most part, it’s a matter of making sure there’s enough room for content before it downloads. Although the suggestions for Largest Contentful Paint’s server optimization will help, there is still room for improvement:

  • Using the new CSS aspect-ratio property or adding width and height attributes to HTML <img> and iframe> tags will ensure that the page has enough room for the assets to be downloaded before they are displayed.
  • Ads and widgets can take a long time to load, so make sure your container elements are the correct size.
  • If possible, preload images and other prominently displayed assets at the top of the page.
  • Web fonts should be used sparingly, and OS fonts should be used whenever possible.
  • Set font-display in CSS to optional or swap and then load web fonts. Make sure you use a fallback font that is the same size as the original font.
  • The top of the page should not have any elements unless they are in response to a user action.
  • As soon as an input trigger is received, all user interactions should be completed within 500 milliseconds.
  • Animations that don’t require a re-layout can be made more efficient using CSS transform and opacity properties.

Summing It Up

When it comes to following Google’s lead, developers are not always enthusiastic. Minor search engine updates can hurt the productivity and profitability of web-based businesses, and the company wields considerable power.

The success of well-optimized, usable websites that avoid dark patterns outweighs the success of bloated, pop-up-heavy websites with a poor mobile user interface (UI).

A measurable way to assess user experience, Core Web Vitals can assist you in prioritizing the most significant enhancements to make. Your users will be happier and more loyal due to the changes you make to your vitals, even if your revenues don’t increase.

Julia Keys

Julia is a Content Coordinator for HostPapa, with a special focus on editing copy and all things blog-related. In her spare time, she enjoys reading, watching Oscar-nominated movies, and drinking iced lattes.

No Comments

Sorry, the comment form is closed at this time.