What are Core Web Vitals?
Core Web Vitals are a set of measurements created by Google to determine a web page’s overall user experience. These measurements include:
- First Contentful Paint (FCP): The time from when the URL is submitted to when the first item is displayed.
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
How important are CWV?
The importance of CWV depends on what you’re seeking to achieve. Regarding search rankings, CWV is 1 of 100 factors that Google uses to determine search rankings. (The most substantial factor for search rankings remains high-quality content.) That said, if your site has many competitors, CWV can be used as a tiebreaker to put your site ahead of the pack.
Outside of search rankings, a high CWV score generally means that your site provides a good user experience. A good user experience helps generate loyal readers, and so on.
How can you analyze your site’s CWV scores?
Google Search Console provides site-wide CWV results. If you’re looking for a more in-depth tool, use Google PageSpeed Insights.
PSI is ideal for spot-testing or general analysis of CWV scores. Other tools are available, but PSI is the clearest and simplest tool to use for site analysis.
To go more in-depth, watch this 20-minute presentation on understanding Core Web Vitals and PageSpeed Insight reports.
What should I know about Google PageSpeed Insights?
When you enter a URL from your site on the Google PageSpeed Insights site, you’ll receive separate analyses and scores for mobile and desktop. Don’t stop with testing your home page—testing the performance of articles is more important, since most readers enter sites through individual posts.
You will likely always be on the first page in a search for your publication, but home pages’ performance will differ from articles’ performance. The home page is typically much heavier than the average article (with a more complex layout, more images, etc.).
To get a clearer picture, test several articles. Embeds, article length, featured image style, and other items included in a given post will affect scores.
What about Lighthouse?
Lighthouse is another well-known tool for CWV analysis, but not one we recommend due to the complexity of configuration and additional management of network/devices/other settings in order to get realistic readings. If misconfigured, it will provide inaccurate readings.
Breakdown of a CWV report
The Core Web Vitals assessment uses aggregate data from the last 28 days, taken from Chrome users. The assessment also includes the following information.
- Pass/Fail
- Four scoring areas:
- First Contentful Paint (FCP)
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
- Gray legend area, detailing data sources used in assessment (where Google got data)
First Contentful Paint
This is the amount of time it takes for the browser to render a piece of content on a page (such as an image). Large images, font style sheets, non-asynchronous scripts in the header, and server response time are just a few of the variables that could affect this score.
Largest Contentful Paint
This measures the time from when the user initiates loading the page until the largest image or text block is rendered within the viewport. The same variables as FCP affect this score.
First Input Delay
This measures the time from when a user first interacts with the page (e.g., when they select a link or button) to the time when the browser is actually able to begin to process event handlers in response to that interaction. What affects this score is the amount of JavaScript running on a site. This could include ads, analytics, third-party scripts, and more. If the browser is occupied processing JavaScript, it can’t respond as quickly to a user’s actions.
Cumulative Layout Shift
This measures how much the elements on a page shift and move around as the page loads. As items pop into view, the browser re-renders the page. A site with a lot of these shifts can provide a less satisfactory user experience.
An example of a layout shift is when an ad renders at the top of the page, shifting the content below it farther down the page. The more significant the amount of movement, the more it affects this score. It’s also worth noting, movement occurring as items load in at the top of a page affects the score more than movement near the bottom of a page.
Opportunities
This section is found below the Core Web Vitals assessment results. It suggests potential changes that could improve performance. It’s possible that not everything in this list will be actionable. For instance, “remove Google font” isn’t a helpful suggestion if a publication prefers to use the default browser font.
Ads and Core Web Vitals (CWV)
Ads can negatively affect CWV scores. For example, ads can cause layout shifts, as well as increased runtime to load and render. The most sustainable strategy to combat the potential effects of ads on CWV scores is to obtain higher CPM (cost per thousand impressions) ads. This strategy lets you continue to provide ads on a site without drastically affecting site performance, offering a better reader experience.
How do you achieve the best performance with CWV?
Sites need to maintain balance between reaching the best possible CSV score and considering business needs. For example, a site with no custom fonts or styles, ads, analytics, or featured images would provide the best mobile performance score, but what about the business?
A number of techniques allow sites to obtain solid scores while also reaching their business needs, such as async-loading scripts, including placeholders to reduce page movement as components load, and lazy-loading. Newspack’s tools make use of these techniques out of the box wherever possible.