/web-vitals-wordpress

Insights about the Core Web Vitals (essential metrics that Google considers important in a webpage's overall user experience) especially related to WordPress.

Web Vitals for WordPress

In this repository, there are some notes referent to the Core Web Vitals (essential metrics that Google considers important in a webpage's overall user experience) especially related to WordPress.


How do users experience or interact with my web products?

Pilars of UX

  1. Loading - Is it happening?
  2. Interactivity - Is it responsive?
  3. Visual Stability - Is it delightful?

Metric Tresholds

Metric Tresholds Image


Largest Content Paint - LCP (less than 2.5 sec)

Loading

Measures the render time of the largest content element (image or block of text) visible within the viewport.

Recommendations to prevent or address it:

  • Optimize your featured/landing/banner/hero image.
  • Do not lazy-load images which are very likely to be in the initial viewport -> How to disable lazy-loading from those elements? With WP Rocket
  • Use an image CDN to ensure fastest image loads -> How to select a good CDN for WP?

Cumulative layout Shift - CLS (less than 100 ms)

Visual Stability

Measures the sum of all unexpected layout shifts that occur thoughout the lifespan of a page.

Recommendations to prevent or address it:

  • Ensure images include width and height (update to WP 5.5) -> That prevents content to shift around when images are finally loaded by making the browser to reserve a space for them beforehand.
  • Dynamic content: reserve space for content that renders dynamically (ads, JS widgets, social, login, discussion)

First Input Delay - FID (less than 100 ms)

Interactivity

Measures the time from when the user first interacts with the page until the time when the browser is actually able to respond to that interaction. Total blocking time: if the main thread becomes blocked for long enough to prevent user input, how long is it blocked for?

Recommendations to prevent or address it:

  • Look for CPU intensive scripts in plugin or theme code
  • Reduce script load/plugin boat
  • Simplify load - concatenate scripts/styles
  • Add async tag to enqueued scripts when possible (if there is no dependencies)
  • Caching
  • Try AMP-WP

How to Measure the Core Web Vitals (CWV)

  • Lighthouse -> Measures CWV by stimulating page load in a lab environment
  • PageSpeed Insights -> *Reports page-level CWV measurements made by running Lighthouse (lab) as well pulling data from CrUX (field)
  • Chrome Dev Tools -> Exposes LCP, CL, and TBT (Total Blocking Time - FID)
  • CrUX -> Provides an origin level report for all CWV across country, device, and connection type dimensions
  • Google Search Console -> Reports page-level CWV measurements made by pulling data from CrUX (field)
  • Web Vitals Chrome Extension -> Measures the CWV providing instant feedback on loading, interactivity, and layout shift metrics

Web Vitals for WordPress Links