Core Web Vitals: Tools for Measuring Performance
With the arrival of Google’s page experience update, the role of Core Web Vitals has been elevated, creating a key factor in page ranking systems for the world’s most widely-used search engine
What are Core Web Vitals? In short, Core Web Vitals are user-centric metrics that measure specific aspects of the end-user experience, and they now sit alongside existing search signals like mobile-friendliness, HTTPS security, and intrusive interstitial guidelines to decide how sites will appear in Google’s search results.
This ebook, which was co-authored with Google and 10up, a WP Engine Agency Partner, offers a closer look at Core Web Vitals, what they mean for website performance, and why building a seamless page experience matters more than ever. Check out the ebook for steps you can take to measure and improve your site performance with Core Web Vitals at the forefront.
Download the full report now, or keep reading for a preview!
Tooling for Measuring Performance
Good page experience should not be measured at a single point in time. It should be composed using a series of key milestones in your users’ journey. Understanding the different metrics and how to track them is key to effectively monitoring and evaluating page experience and impact.
There is no ‘one size fits all’ when considering the tools that you should be using. Performance optimization is an iterative process and there are a number of factors to be considered when looking at the performance of a site.
It is important to understand how performance metrics are most commonly measured, usually in one of two ways:
1. Lab Data
2. Field Data
Neither of these measures is considered to be better or worse than the other—instead, you should use both in tandem.
Lab vs Field Data:
Understanding the Difference
Lab data is performance data collected within a controlled environment using predefined device and network settings. This offers reproducible results and debugging capabilities that can help identify, isolate, and fix performance issues.
- Strengths: Helpful for debugging performance issues. End-to-end and deep visibility into page experience. Reproducible testing and debugging environment.
- Weaknesses: Does not always capture real-world bottlenecks. Does not always correlate with real-world page KPIs.
Field data is performance data collected from real page loads your users are experiencing in real-time.
- Strengths: Captures true real-world page experience. Enables correlation to business KPIs.
- Weaknesses: A restricted set of metrics. Limited debugging capabilities.
As a publisher looking to improve the Page Experience of your site, the easiest starting point for your analysis of both field and lab data is PageSpeed Insights.
PageSpeed Insights: PageSpeed Insights (PSI) reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved. PSI is a web interface that considers both lab data from Lighthouse (by URL) and field data from the Chrome Page Experience Report.
Lighthouse: PSI uses Lighthouse (LH) to analyze the given URL, generating a performance score on the fly that estimates the page’s performance on different metrics, including:
- First Contentful Paint
- Largest Contentful Paint
- Speed Index
- Cumulative Layout Shift
- Time to Interactive
- Total Blocking Time
Chrome Page Experience Report: When PSI is given a URL, it will look it up in the Chrome Page Experience Report (CrUX) dataset. If available, PSI reports the First Contentful Paint, First Input Delay, Largest Contentful Paint, and Cumulative Layout Shift metric data for the origin and potentially the specific page URL.
Additional Tooling
WebPageTest: Allows you to compare the performance of one or more pages in a controlled lab environment, and deep dive into performance stats and test performance on a real device. You can also run Lighthouse on WebPageTest.
Search Console: Monitor, maintain, and troubleshoot your site’s presence in Google Search results including Core Web Vitals data for every page.
Site Kit: Free official Plugin for WordPress with Search Console and PSI APIs integrated into your WordPress dashboard.
Chrome Dev Tools: Allows you to profile the runtime of a page, as well as identify and debug performance bottlenecks.
Improving Page Experience
Page experience should be considered a journey, not a destination, optimizing the experience for your users takes time and should be integral to your digital strategy. Creating ownership and awareness amongst core business teams is essential.
Useful Starting Points
Evaluate your current web page experience. Use CrUX via PSI, or if you’re on WordPress, use Site Kit (enterprise users may prefer Search Console). Focus on your high-value pages and key conversion areas
Prioritize the highest value improvement opportunities. Recommendations in PSI will help you identify them. Common areas to focus on include:
Removal of third-party scripts: Third-party scripts include any script that can be directly embedded into your website from a third-party vendor. There are numerous WordPress plugins you can use to remove third-party scripts and to limit the load on your site, you can test out various options with the same functionality and (based on lab data) choose the plugin with the least detrimental impact.
Lazy loading: Lazy loading images helps reduce the number of calls a visitor’s browser has to make to your website’s server, which can prevent your site from getting bogged down. With WordPress 5.5+, lazy loading occurs by default.
Removal or optimization of large page elements: Large page elements can include media files, plugins, or other customizations that require a lot of resources to run. While some of these may be necessary for your site design or overall functionality, anything that’s not mission-critical should either be removed or optimized to ensure minimal impact on all Core Web Vitals.
Make changes and test their impact before shipping to production. If applicable, integrate Lighthouse (LH) into your testing using Node CLI
Introduce performance budgets to avoid regressions. Make performance a KPI for all business units: from SEO to Frontend Dev and review them as part of your development lifecycle.
Core Web Vitals:
The Managed WordPress Difference
To ensure your website is delivering an optimal Core Web Vitals experience, these three areas are key for you to focus on:
Fast hardware and up-to-date software: Provides better overall speed and uptime as well as the resources needed for uncached hits.
- Fast network: Delivers page content quickly, with optimal load times.
- Clean front-end code: Reduces unwanted layout shifts, ensures a smooth user experience.
WP Engine is the only managed WordPress host that provides solutions at all three of these layers, including:
- Fast hardware: all WP Engine customers benefit from the latest version of PHP (7.4), WordPress-specific server configurations, as well as leading cloud solutions including Google Cloud Platform. WP Engine also offers access to Google’s next-gen C2 hardware, which provides a more than 40% drop in server execution time and a powerful boost for both LCP and FID.
- Fast network: including an integrated global CDN powered by Cloudflare, standard with every WP Engine plan, ensures WP Engine customers have a fast network that reduces LCP by reducing protocol overhead and bringing content closer to visitors. Our advanced security offering, Global Edge Security, further improves LCP with Argo smart traffic routing, and DDOS protection insulating your site from unwanted load.
- Clean front-end code: from WP Engine’s suite of premium themes (also standard with every plan) to headless frontends powered by Atlas, WP Engine offers solutions for both small and large sites, all built with Web Vitals and other user-centric metrics at the forefront.
