Ways to Enhance Page Speed and Meet Google’s Core Web Vitals Assessment

Site performance is essential to attract and retain web traffic and drive conversions. Users want fast-loading sites and a seamless experience and Google rewards brands providing just that with higher search rankings. If you haven’t already optimized your website using technical SEO, it’s time.

Google is laser focused on creating a better web. This means continuing to look for ways to improve page experience for users. Google Search determines ranking results by incorporating criteria such as how fast pages load, interactivity and visual stability. These metrics are part of Google’s Core Web Vitals initiative and apply to all web pages across all Google tools.

Google launched its latest enhancement on March 12, 2024. That’s when it introduced a new metric for page experience called Interaction to Next Paint (INP), which measures responsiveness. More specifically, INP measures how fast a page responds to user interactions and inputs – a critical criterion to determine and track user experience scores.

Higher scores for each of the three Core Web Vitals can help you achieve higher search rankings, lower bounce rates and better conversion rates.

The best way to stay visible to Google’s algorithms is to incorporate page experience into your SEO strategy. Simply put: Make sure your website is fast and responsive.

This article will show you how to optimize your Core Web Vitals to achieve faster website speed, better user experience and higher positioning on search engine results pages.

What is Google’s Web Vitals initiative?

Google launched Core Web Vitals in 2021. The objective of Core Web Vitals is to provide web developers a set of unified user experience metrics to assess the specific signals Google has deemed necessary to deliver a great user experience once someone lands on a web page.

What are Google’s Core Web Vitals?

Google’s Core Web Vitals represent the best available signals to measure the quality of experience across the web. They are dynamic and evolve over time. Today, three specific metrics make up Core Web Vitals. Each is focused on a particular aspect of the user experience and is measured in the field, which means it is measured on real users interacting with web pages in real time.

The metrics that make up Core Web Vitals are:

• Largest Contentful Paint (LCP). This is the time from when the browser starts loading a web page to the point when the largest content element — such as an image or block of text — shows up on the screen. Google has determined that to provide a good user experience, LCP must occur within 2.5 seconds.
• Cumulative Layout Shift (CLS). This measures visual stability. Pages should maintain a CLS of 0.1 or less to provide a good user experience.
• Interaction to Next Paint (INP): As discussed, this measures how fast a page responds to user interactions. To provide a good user experience, pages must have an INP of 200 milliseconds or less.

Google performs a Core Web Vitals check on websites and the results factor into how sites are ranked for search. Your website will rank well if users have good experiences based on all three metrics at least 75 per cent of the time. Google uses its Chrome User Experience Report (CrUX) (the official data set of the Core Web Vitals program) to determine whether sites have achieved this threshold.

If your website does not meet the good experience threshold, you will receive an alert letting you know Google’s Core Web Assessment failed.

To ensure your site is deemed “good” across all three metrics, it’s important to conduct your own assessments. LCP and CLS can be measured in the lab using Chrome DevTools, Lighthouse, PageSpeed Insights and WebPageTest. They can also be measured using the following field tools: Chrome User Experience Report, PageSpeed Insights, Search Console (Core Web Vitals report) and web-vitals JavaScript library.

The most straightforward way to measure INP is in the field using PageSpeed Insights, which pulls data from CrUX.

Ways to enhance page speed

Here, we’ll look specifically at how to improve LCP and INP.

Start by running one of the site audit tools listed above to measure each of the Core Web Vitals. Google has guidelines for each: good, needs improvement and poor.

If you find any or all of the Core Web Vitals is in either the “needs improvement” or “poor” ranges, then you can pinpoint exactly what needs to be optimized.

How to speed up LCP

There are four subcategories that make up LCP and they can each contribute to a poor LCP score:

• Time to first byte, also known as server response times to browser requests.
• Resource load time, which is how long it takes a page’s largest pieces of content to load. Not surprisingly, high definition images take more time to load than text.
• Resource load delay. Some parts of a web page’s framework — such as scripts, stylesheets, cookie banners and page building blocks — can block the process of displaying an HTML page, which slows loading times.
• Element render delay. Client-side rendering can also lead to lags in loading, particularly when content is loaded for the first time in a user’s browser.

Google’s PageSpeed Insights tool can help you identify and analyze the LCP element on any page. Type in the page’s URL and click “Analyze” to get a performance report. Scroll to the Diagnostics section and click LCP to show you the LCP element, such as text or an image.

To start improving your LCP performance, Google has four high-impact recommendations and presents them in order of easiest to most difficult to implement:

1. Eliminate unnecessary resource load delay so the resource (such as images or text) can start loading once the HTML document is received.
2. Eliminate unnecessary element render delay. In this case, you may want to minify or preshrink JavaScript, CSS and HTML files. By making these codes more compact, scripts download faster. If these resources aren’t necessary, remove render-blocking JavaScript and CSS code. You may also want to shift from client-side rendering to server-side rendering or prerender pages as static files.
3. Reduce resource load time as much as possible without sacrificing quality. To help PNG and JPG images load faster, consider making them smaller and compressing them, or change the format to WebP, which makes images up to 34 per cent smaller. If the LCP element on a page is text, the fonts you use may be slowing page loads. In this case, you may want to consider opting for the default system or web-safe fonts, which avoid the need to connect to a third-party.
4. Reduce time-to-first-byte. This comes down to delivering the HTML document as fast as possible. This is one of the most difficult items to optimize. Google recommends using a content delivery network to get your servers as close to users as possible and upgrading servers to improve processing times.

How to speed up INP

Google explains that interactions happen in three stages:

1. The input delay. This starts when the user initiates an interaction with the page, and ends when the event callbacks for the interaction begin to run.
2. The processing time. This includes the time it takes for event callbacks to run until they are completed.
3. The presentation delay. This is the time it takes for the browser to present the next frame, which contains the visual result of the interaction.

As with LCP, the CRuX report and Google’s Page Speed Insights tool can help you quickly diagnose problems and find slow interactions in the field. You can then take your field data and manually test it to identify the causes.

There can be many potential causes, including third-party scripts that schedule too many tasks on the main thread (this is where the browser does the majority of the work necessary to display a page), large Document Object Model (DOM) sizes (DOM is a representation of an HTML) and expensive event callbacks.

Once you’ve figured out what the problem is, you can take the necessary steps to optimize INP.

For example, to reduce input delay, you may want to:

• take a close look at the timers in your code and reduce their use as much as possible;
• break up long tasks into smaller chunks to improve the main thread’s responsiveness to user interactions;
• limit the number of times an event callback executes within a specific period of time; or
• cancel outgoing fetch requests.

To improve processing time, you may want to assess event callbacks to ensure they’re necessary. If they’re not, remove the code or at least delay its execution to a more appropriate time. Another option is to temporarily pause long tasks on the main thread (this is known as yielding) to more quickly process smaller tasks.

To optimize presentation delay, consider reducing DOM size by avoiding coded plugins and complicated CSS declarations and JavaScript.

Site performance plays a crucial role in attracting and retaining users. Slow-loading sites can easily discourage visitors, while fast-loading sites tend to attract more traffic and achieve higher conversion rates. Optimize your website to achieve enhanced website speed, a better user experience and higher search engine results page rankings.