The Evolution of Web Performance
In the past, improving website performance was relatively straightforward. Slow loading times were often attributed to bloated resources and sluggish connections. However, you could gain a competitive edge by optimizing elements like image compression, text compression, and minification of style sheets and JavaScript modules.
Today, the landscape has evolved. Faster connection speeds have become the norm, and most resources are automatically compressed. Additionally, various plugins handle tasks like image compression and cache deployment. Despite these advancements, Google’s pursuit of a faster web persists.
PageSpeed Insights (PSI) remains a valuable tool for evaluating individual page loads. While some view PSI ratings as overly punitive, it provides insights into how Google may assess and rank websites based on page speed signals. To succeed in Google’s latest page speed test, you must meet the Core Web Vitals Assessment.
Understanding Core Web Vitals
Core Web Vitals are a set of metrics introduced in 2021, integrated into the broader page experience search signals. According to Google, each metric “represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome.” The current Core Web Vitals metrics include:
First Contentful Paint (FCP)
FCP measures the time from when a page starts loading to when any part of its content is rendered on the screen. This includes text, images, <svg> elements, or non-white <canvas> elements. For users, FCP signifies how quickly a page visibly loads, even though it may not be fully loaded.
First Input Delay (FID)
FID measures the time from a user’s first interaction with a page to when the browser can begin processing event handlers in response to that interaction. It’s set to be replaced by Interaction to Next Paint (INP) in March 2024. FID indicates how responsive a website is to user interactions.
Interaction to Next Paint (INP)
INP assesses a page’s overall responsiveness to user interactions by observing the latency of click, tap, and keyboard interactions throughout a user’s visit. INP will replace FID as a Core Web Vital in March 2024 and provides deeper insights into user interaction responsiveness.
Time to First Byte (TTFB)
TTFB measures the time between a resource request and when the first byte of a response starts arriving. It indicates how quickly a requested resource begins loading. For example, it measures how long it takes for the first byte of an embedded image to reach the user’s browser.
Largest Contentful Paint (LCP)
LCP reports the render time of the largest visible image or text block within the viewport relative to when the page began loading. LCP is crucial for user experience, focusing on the loading of a page’s main content.
Cumulative Layout Shift (CLS)
CLS measures the largest burst of layout shift scores resulting from unexpected layout shifts during a page’s lifespan. It accounts for visible elements changing position between rendered frames. CLS was introduced to counteract site owners deferring render-blocking resources, which led to a glitchy user experience.
Assessing Core Web Vitals for Improved UX and SEO
To analyze a webpage’s performance, a powerful tool is PageSpeed Insights. It provides various data views, including URL-level data, domain-level data, lab data, and field data. Let’s break down the process:
Mobile-First Focus
In a mobile-first web, select the Mobile results tab, which is crucial for assessing the results that matter most. Toggle the Origin to view general data averaged across your site’s domain rather than just the homepage. Look for the Core Web Vitals Assessment result.
Understanding the Core Web Vitals Assessment
Google’s Core Web Vitals Assessment (Pass/Fail) relies on real user field data. It evaluates how users experience your site. In contrast, the traditional numeric rating is based on simulated mobile crawls and lab data, offering only estimates. While lab data provides granular insights, it’s not used in Google’s ranking algorithms. Focus on passing the field-based Core Web Vitals assessment for better SEO.
Leveraging Lab Data
While the Core Web Vitals Assessment relies on field data, it’s advisable to leverage lab data and diagnostics to improve your site’s performance. These two tests are not intrinsically connected, but optimizing both can lead to success in the Core Web Vitals assessment.
Assessing Core Web Vitals via PageSpeed Insights
Now, let’s look at an example using PageSpeed Insights for TechCrunch’s homepage. Pay attention to the Core Web Vitals metrics and potential issues.
Core Web Vitals Assessment
On the TechCrunch example, the Core Web Vitals Assessment shows a failure. Focus on mobile results and domain-level data for a comprehensive view of your site’s performance.
Core Web Vitals vs. Numeric Rating
Understand the difference between the Core Web Vitals Assessment (Pass/Fail) and the traditional numeric rating. Google now prioritizes the Core Web Vitals assessment for ranking, emphasizing real user experience.
Optimizing for Core Web Vitals
To improve Core Web Vitals, address lab opportunities and diagnostics, as these factors contribute to passing the field-based assessment.
Understanding Opportunities and Diagnostics
PageSpeed Insights offers insights into opportunities and diagnostics. Focus on key areas such as reducing unused JavaScript and CSS, as well as eliminating render-blocking resources.
Taking a Closer Look with Chrome Dev Tools
To delve even deeper into web performance, Chrome DevTools is invaluable. Here’s how to use it effectively:
Record Page Load
Open a new instance of Chrome, preferably in a guest profile to ensure a clean environment. Load the webpage you want to analyze, accept cookies, and open Chrome DevTools.
Analyzing Performance
Navigate to Performance > Screenshots and hit the reload button to record the page load. A report will be generated, illustrating requests over time. Focus on the main thread, where most rendering tasks and JavaScript executions occur.
Main Thread Insights
In the main thread, observe how scripting tasks are processed over time. You can click on individual bar chunks to see detailed information about each task. This visual representation helps identify bottlenecks.
Call Tree Analysis
The Call Tree view groups tasks thematically, making it easier to identify performance issues. You can explore individual scripts and their impact on page load times. This insight guides optimization efforts.
Other Tools for Core Web Vitals Measurement
While PageSpeed Insights and Chrome DevTools are powerful, other tools can aid in Core Web Vitals analysis:
GTMetrix
GTMetrix offers a waterfall chart that provides a detailed breakdown of page loading elements. Ensure it’s set to an LTE connection for accurate results.
Google Search Console
Set up and verify your site in Google Search Console to access performance and usability data, including Core Web Vitals metrics across multiple pages.
Screaming Frog SEO Spider
This tool can be connected to the page speed API, allowing bulk fetching of Core Web Vitals Pass or Fail grades for multiple pages. Use it to identify performance issues.
In conclusion, improving your website’s page speed ratings has evolved into a complex Core Web Vitals crusade. To succeed, you must embrace a holistic approach, combining field-based assessments, lab data insights, and technical optimizations. The goal is to deliver an exceptional user experience while meeting Google’s Core Web Vitals standards.