How to Improve Website Page Speed and Core Web Vitals?

Analyze Core Web Vitals Report and Improve Page Speed of Your Website

By James Gibbons

Core Web Vitals metric- CLS, FID, and LCP all scoring Poor and Need Attention.

The core web vitals report is the primary source of inputs to improve page speed for websites. The three key metrics to monitor and improve for page speed are LCP, FID and CLS. When working on a large website with hundreds to sometimes millions of pages, how many core web vital reports can you review and translate into actionable page speed improvement work items by reviewing them manually? This article will provide you a detailed guide on improving the core web vitals and describe how Quattr can help scale your work using our unified website optimization platform which includes monitoring and recommendations for the core web vitals reports.

Performance Matters - Users rank the time it takes a page to load as the most important metric. Speed ranks higher than site usability or how attractive the site looks.

To provide consumers a positive experience, Google provides higher ranking to sites that provide consumers a seamless journey.  To meet this requirement, sites need to be responsive, stable, fast and allow consumers to navigate the site without interruptions.

What are Core Web Vitals?

Largest Contentful Paint, First Input Delay & Cumulative Layout Shifts together form the Core Web Vitals. Other signals include Mobile-Friendly, Safe Browsing, HTTPS, and No Intrusive Interstitials.
Search Engine Signals for Page Experience (as per Google)

Core Web Vitals are a set of metrics Google has created to measure the Page Experience for a web page. Page Experience is an algorithm update that Google will be rolling out and Google has been very specific about the metrics and the related benchmarks it expects.

Core Web Vitals are a set of metrics that measure a webpage’s user experience.

Page experience is measured by quantifying the load time, interactivity, and visual stability of a page. Currently, Core Web Vitals includes three metrics - Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). Each Core Web Vital measures a real and distinct aspect of the user experience as explained below. 

Core Web Vitals take into account the time it takes for a page to load, the time it takes for a page to become interactive and the amount of unexpected movement of content on a page.

What is Largest Contentful Paint (LCP)?

LCP score above 4 seconds is Poor, between 2.5 to 4 seconds Needs Improvement, and Under 2.5 seconds is Good.
How to measure Largest Contentful Paint (LCP)? (as per Google)

Largest Contentful Paint (LCP) is the amount of time it takes for the main content on the page to load. A study conducted by Akamai found out that 53 percent of mobile site visitors will leave a page that takes longer than three seconds to load. Several studies have found the conversion rate is the best if the page loads within four seconds. (Portent, 2019). 

Google recommends websites aim to keep LCP under 2.5 seconds for 75% of their page loads. LCP is mainly affected by four factors: Slow server response times, Render-blocking JavaScript and CSS, Resource load times, and Client-side rendering. Find more details on how to improve LCP here.

What is First Input Delay (FID)?

FID score above 300 milliseconds is Poor, between 100 to 300 milliseconds Needs Improvement, and Under 100 milliseconds is Good.
How to measure First Input Delay (FID)? (as per Google)

First Input Delay (FID) is the amount of time it takes for a page to become interactive. For example, a button may become visible on a page but because the JavaScript libraries are still loading the button does not respond to user inputs. This can be frustrating for the user and prevents them from experiencing a seamless journey through the site. 

Google recommends sites should aim to keep First Input Delay (FID) under 100 milliseconds for 75% of page loads. 

FID can be improved by Reducing the impact of third-party code, Reducing JavaScript execution time, Minimizing main thread work, and Keeping request counts low and transfer sizes small. For detailed guidance, please review how to improve FID here

What is Cumulative Layout Shift (CLS)?

CLS score above 0.25 is Poor, between 0.1 to 0.25 Needs Improvement, and Under 0.1 is Good.
How to measure Cumulative Layout Shift (CLS)? (as per Google)

Cumulative Layout Shift (CLS) is the amount of unexpected movement of content(s) on a page. Each layout shift on the page is calculated based on the size of the HTML Element and the distance the HTML element moved from the original location. CLS for a page is then calculated by adding up all individual layout shifts that take place on the page. Low CLS scores imply very few elements have shifted on the page. Review how unexpected movement of HTML elements affects CLS score and other layout shifts in detail here

Individual layout shifts can happen because pages load HTML elements progressively or content is dynamically injected into the page. A base-level experience is loaded first and the more advanced functionality is loaded later. This technique is used by developers to support legacy browsers. The progressive loading technique is also used to load pages fast and lower LCP. 

While pages may load fast, the visible elements on the page keep shifting thereby negatively affecting the user page experience journey. More importantly, in some cases, large layout shifts can cause serious errors. For example, a user may be intending to click the cancel button but may land up clicking on the buy button or may click buy twice. 

For these reasons, it's important to keep the CLS on a page low. Google recommends sites aim for a CLS of less than 0.1 for 75% of page loads. A few practices that can help keep the CLS score low include adding size attributes to images and never inserting content above existing content. Review how to improve CLS here.

Understanding Google's Page Experience Algorithm Update

Google has announced that Page Experience will officially become an important ranking factor in August 2021 and will potentially have an outsized impact on the organic traffic to a site. This feature was earlier expected to be launched in May 2021, but Google has postponed the change to gradually roll out starting mid-June and become completely live by end of August 2021.

This postponement signifies how big this change is for enterprises to manage and why businesses should employ resources to optimize their websites for Core Web Vitals metrics.

Page Experience pulls together all three Core Web Vital metrics to classify a page as Good, Needs Improvement, or Poor. The table below is the criteria used to classify pages. 

A Good PageExperiencee score means LCP under 2500ms, FID under 100ms, and CLS under 0.1. 
A Needs Improvement Page Experience score means LCP is between 2500-4000ms, FID is between 100-300ms and CLS between 0.1-0.25. 
A Poor Page Experience score means LCP over 4000ms, FID over 300ms, and CLS over 0.25.
Quantifying Page Experience using Core Web Vital metrics (as per Google)

Google has invested a significant amount of time and research to come up with all the Core Web Vitals thresholds listed in this article. The threshold-based recommendation is based on analyzing data from tens of thousands of sites available in the Chrome User Experience Report (CrUX) database. 

Page Experience for the landing pages is the top factor along with Click Through Rate (CTR) for improving Ad Quality Score as well. It is thus essential to improve your website’s Page Experience scores.

Good Page Experience is important but it is one of several important ranking factors like High-quality and relevant content, Site security, Mobile Friendliness, and several other factors.

Note: Google has more than 200 ranking signals. So, a Good Page Experience rating on its own is not sufficient to gain organic traffic. Page experience work must be complemented with other ranking factors like high-quality and relevant content.  For example, in addition to Page Performance Experience, Google also tracks overall Site Security (HTTPS-security), Site Accessibility, Mobile Friendliness, Technical SEO, User Experience (CTR, Bounce Rate and Dwell time), Internal and External linking, and No Intrusive Interstitials (or no popup ads) to list a few important ranking factors.

Page Experience Optimization Tools

There are several tools available to help improve the Page Experience rating for a page. Performance tools are based on Field data or Lab data. 

Field data (also referred to as Real User Monitoring or RUM) is based on data collected by the Chrome browser. Lab data on the other hand is based on loading and analyzing page performance data on a server. Some of the top tools available include:

There are several tools available to help you measure and optimize the Page Experience score for your webpage.

Field (RUM) Tools

Google Search Console (GSC)- Core Web Vitals Report

The Page Experience feature of GSC classifies a page as Poor, Needs improvement, or Good. Additionally, the Speed Test feature on GSC has been replaced with Core Web Vitals to provide more granular information on the page.

Chrome User Experience Report (CRuX) is a database of performance data gathered from real users’ web browsing experience. Google maintains this database and collects real user experience data from Chrome. This database contains data from more than 18 million websites and provides insights into how users experience the Web.

A tool provided by Google to let consumers understand how a site is performing. PSI collects Field Data* for pages over 28 days and provides suggestions on how the performance of a page can be improved. Under the hood, PSI uses Lighthouse to calculate performance metrics using field data.

Lab Tools

Lighthouse is Google’s open-source tool for improving the quality of web pages. It does this by running hundreds of audits on a page for performance, accessibility, SEO, mobile, and best practices. Lighthouse runs a series of audits and generates a report for the page in JSON and HTML format.

WebPageTest is a Lab tool that gives the user fine-grained control on loading a Web page. The user can specify the device, browser, geographic location, connection speed, and cache state. 

*Google PageSpeed Insights (PSI) tests for page speed using Google Lighthouse but uses field data to calculate performance metrics.

How to Improve Core Web Vitals?

Currently, the process for tracking and addressing issues related to Core Web Vitals and Page Experience is done on a page-by-page basis using the tools listed above. Each team in an organization uses Lighthouse, PageSpeed Insights, or one of the other tools to analyze performance data for the pages they own. 

Running the Lighthouse application on a single page can surface more than 1000 issues across more than 100 audit types. Issues that can surface include "Eliminate render-blocking resources", "Remove unused JavaScript" and many other performance improvement suggestions

Reasons for Poor Page Experience Score

There are several reasons for having a Poor Page Experience score. A few reasons include unused CSS, unused JavaScript, unoptimized images, and render-blocking resources that prevent other files from being downloaded.

For example, images used on a web page may not be optimized for the web. This can be fixed by hosting images on a CDN, Lazy loading images, and converting all images to WebP format. The WebP format reduces image size significantly. Similarly, CSS and Javascript issues can be addressed by using GZIP Compression and Minifying Resources.

Identifying Performance Issues to Fix

Once these issues are highlighted by Lighthouse or other tools, teams have to look through the reports generated for each page to identify all the issues, prioritize issues they believe will have the highest impact, and fix them. 

The reports generate tens of thousands of issues that need fixes across several web pages on the site. Prioritizing issues to work on and improving these pages can take time and cause your Page Experience scores to remain poor for longer thereby affecting the traffic to your web pages.

Furthermore, most teams that use PageSpeed Insights and Lighthouse lack the expertise and experience to convert the reports generated from performance tools into actionable code improvements.

Key Problems with the Current Process to Improve Core Web Vitals

The current process described does not scale for large enterprise websites that may have thousands of pages. Furthermore, there are several additional problems with the current process described below.

Page-oriented Core Web Vitals Optimization over Site-wide Optimization

Google recommends optimizing Core Web Vitals for the consumer journey throughout the site and not just for a specific page. The goal is to remove interruptions, obstacles, and errors to provide users a seamless journey site-wide. 

The only way to ensure site-wide optimization is by fixing issues on each specific web page. Performance improvement work is usually targeted to specific teams and pages. As a result, a few pages on your site have ‘Good’ Page Experience ratings while most other pages on the site have ‘Poor’ Page Experience ratings. The result of local optimization is poor consumer journey through the site which in turn can result in lower ranking on Google search for organic traffic.  

Competitive Intelligence is Key to Focus Page Experience 

It is important to benchmark your site’s user experience relative to the competition. Having visibility into the competitive landscape allows you to offer the best-in-class user experience. 

For example, businesses like automobile loans, mortgages, credit cards are highly competitive and tend to invest a lot in site usability. Similarly, other sites that have B2B traffic may tend to invest less in site usability and more in terms of adding functionality. 

Thus, understanding the industry and competitor-specific performance scores for each page and keyword is essential. It is critical to have visibility on your competitor’s Page Experience scores and to make sure your page experience is better, something that current optimization tools do not offer.

Where is the ROI for All the Core Web Vitals Work?

The reports generated by the performance tools like Lighthouse and PageSpeed Insights do not link web resources to traffic or other metrics like clicks, impressions, and conversion. As a result, teams do not have sufficient visibility on how to prioritize work and spend a lot of development cycles making less impactful improvements. These changes do not necessarily make big performance score impacts and are unable to move the needle for businesses.

After teams have released a performance improvement they do not have tools to correlate the performance improvements they make with business success metrics like clicks, impressions, and conversions. All these shortcomings fail to provide a wider view on how to improve Core Web Vitals and align them with your business needs to grow organic traffic and improve conversion for paid traffic.

Gain Competitive Advantage from Core Web Vitals with the Quattr Platform

The Quattr platform addresses the shortcomings of the current process and helps you optimize your site to improve overall Page Experience and Core Web Vitals. Quattr is a data-driven AI platform trusted by the world's top brands to grow organic and paid presence on search engines. The platform helps customers grow traffic twice as fast and improve conversion by optimizing not just Page Experience Factors but so much more.

Quattr Offers Fast Track to Ace all Core Web Vitals

The Quattr platform generates, connects, and transforms data from multiple sources including Lighthouse and Google Search Console into a single coherent SEO Data Lake.  The platform runs Google’s open-source Lighthouse tool on your website and competitor sites in a controlled simulation environment using multiple network profiles in both desktop and mobile mode. Network profiles are based on average network conditions for each country.

The Data Lake includes data for your website and your top competitors. The platform then uses advanced analytics to score your website and top competitors based on performance experience and users’ journey across devices and locations. 

The platform uses AI and other advanced analytics techniques to generate a ranked list of highly actionable core web vitals and page experience recommendations. Organizations can use these recommendations to gain unprecedented speed in improving Page Experience for the entire site.

In addition to the Core Web Vitals, the platform also reviews and generates recommendations for other performance metrics, all tracked weekly. The metrics include Time To First Byte (TTFB), First Contentful Paint (FCP), Speed Index, and Time To Interactive (TTI). 

Site-wide optimization for Maximum Business Impact

At any point in time Lighthouse can surface hundreds of issues per page that adds up to tens of thousands of issues across the site. It's important to first address issues that will have the highest user experience and business impact. To create a list of ranked recommendations the Quattr platform first converts all issues generated for all pages into milliseconds wasted. It then applies proprietary AI algorithms to generate a ranked set of highly actionable recommendations. 

The ranking is based on many factors to optimize site-wide performance rather than performance improvements that are local to a specific page. It does this by taking into account milliseconds wasted by the resource, the number of pages impacted by the resource, the total clicks impacted by the resource, and quantifying how this issue impacts your website’s organic traffic.

Compare key performance and usability issues across webpages in Quattr
Usability Recommendations by the Quattr Platform

The ranked and quantified usability recommendations allow developers to focus on the highest value work that can potentially have an outsized site-wide impact. Teams also have an option to filter and organize recommendations by Department, Type of technical work, Keyword Intent, and Page experience rating. 

For example, using filters teams can ask questions like: 

  1. Show me all recommendations for pages owned by my department that have a “poor Page Experience”.  Focusing on these recommendations allows you to improve the Page Experience rating from “Poor” to “Good”.

  2. Show me all images that need to be converted to a next-generation format.

  3. Show me all images that are not correctly encoded and run through an image optimizer.

Competitive Intelligence and Benchmarking for Page Experience Metrics

The platform includes automatic competitor identification for each page and provides complete competitive analysis which is critical for benchmarking. This helps teams understand how they are operating within the competitive landscape. The platform provides side by side comparison for each Core Web Vital and Page Experience as shown in the illustration below. Besides, the platform also provides side by side comparison for several other ranking factors.   

To maximize the business impact, your website should have performance scores that are better than the fastest competitor. Quattr's Site Usability platform automatically identifies competitor’s pages, benchmarks your site, and provides specific recommendations on improving your site performance.

Quattr platform allows you to compare Core Web Vitals against your competitors. Check LCP, FID, and CLS scores for competitors and evaluate overall Page Experience.
Compare Core Web Vitals against your competitors in Quattr
Compare various experience factors with Quattr. Evaluate Speed Audits, Technical SEO, Mobile-First, Best Practices, and Accessibility against top competitors. Determine overall page experience rating as Good, Needs Improvement, or Poor based on the same.
Compare Experience Factors with competitors in Quattr

The Quattr platform provides a comprehensive heat map view of experience factors including Page Experience rating so that users can quickly identify the part of the site that needs attention.

Correlate Performance Recommendations with Key Business Metrics

Teams can review and co-relate performance metrics with traffic metrics like impressions, clicks, position, and conversion over a period. In addition to the current period, the platform supports period over period analysis. The period over period analysis can be quarterly, monthly, or a custom period. After a performance change is completed teams can use this feature to measure the impact of their change.

Quantified visual data view of your performance score change against competitor In Quattr platform. Compare it with other metrics like change in clicks. The graph shows quarter over quarter comparison against 3 competitors.
Quattr’s visual data view of Performance Score vs Clicks against Competitors

Summary

Search Engine Optimization is a zero-sum game with long-term impacts. One of the best ways to receive a boost in traffic is to have a Good Page Experience score for all the vital pages in a customer’s journey. Enterprise websites with thousands of pages of content need a better way to monitor gaps, prioritize issues and measure impact and make this a continuous process.

Yet, for enterprises, the development cost and infrastructure cost required to improve the overall Page Experience can be very high and can take valuable time away from other high-impact work.

The Quattr platform provides an automated, data-driven AI system that addresses shortcomings with the current approach to improve core web vitals and page experience at scale. It enables you to optimize your website based on recommendations with the highest business impact that can be delivered in the lowest time with minimal effort.

Core Web Vitals is a major update by the Google search algorithm and the right tools like Quattr can help you stay ahead of the curve and beat your competition.

Interested in Tackling Core Web Vitals Reports for Hundreds to Millions of Pages?

About Quattr

Quattr is an innovative and fast-growing venture-backed startup based in Palo Alto, California USA. Quattr is focused on transforming website optimization with AI, delivering higher traffic and engagement for organizations of all sizes. We are rapidly emerging as the new verb for growth in the digital age. Quattr with us today!