Here is my sharing for WordPress Hong Kong meet up @ 19 February 2021. Whatever I’m sharing is very simple laymen term for new user to understand. For advanced user, may watch this video.

Google Core Web Vitals

Google Core Web Vitals is the new ranking signals and performance metrics from Google that is focus on user experience. Core Web Vitals are focus on how your website is loads, not the overall page load times.

Google first announced on May 2020 that Core Web Vitals will be Search Page Experience will be included in Goole Search ranking.

And on November 2020, they announced the page experience signals in ranking will roll out in May 2021. The new page experience signals combine Core Web Vitals with their existing search signals including mobile-friendlinesssafe-browsingHTTPS-security, and intrusive interstitial guidelines.

Search Page Experience
Search Page Experience

source: webmaster.googleblog.com

What are Google Core Web Vitals?

Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools. Each of the Core Web Vitals 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 metrics that make up Core Web Vitals will evolve over time. The current set for 2020 focuses on three aspects of the user experience—loadinginteractivity, and visual stability—and includes the following metrics (and their respective thresholds):

Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP)
First Input Delay (FID)
First Input Delay (FID)
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS)
  • Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
  • First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have a FID of less than 100 milliseconds.
  • Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of less than 0.1.

For each of the above metrics, to ensure you’re hitting the recommended target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.

source: web.dev/vitals/

How to fix Core Web Vitals poor URL

My idea is simple. Less is MORE.

Speed Optimization
is Not Difficult

You just need to focus 1 thing.

Keep page SMALL.
Keep everything minimal.

first contentful paint fcp first input delay fid largest content paint lcp cumulative layout shift (cls)

How to optimize for First Contentful Paint (FCP) / First input Delay (FID)

  1. Time To First Byte (TTFB) – FAST hosting
  2. Cache – Cache Enabler / Swift Performance Pro
  3. Inline the background image – CSS
  4. Minify CSS – Swift Performance Pro / Autoptimize
  5. Preload CSS
  6. Remove non-critical CSS/JS – perfmatters / Asset Cleanup
  7. Generate Critical CSS – Swift Performance Pro
  8. Defer or Async Scripts – Defer or Async Scripts – Async JavaScript
  9. Delay 3rd party JS scripts – Flying Scripts
  10. Preload / prefetch DNS Queries – Swift Performance Pro / perfmatters
  11. Use CDNBunny

How to optimize for Largest Content Paint (LCP)

  1. Reduce element
  2. Don’t use slider
  3. Don’t use video background
  4. Reduce the images size
  5. Image with correct dimensions
  6. Optimize the images – ShortPixel
  7. Use WebP format – ShortPixel / WebP Express
  8. Use lightweight graphic – SVG
  9. Inline & lazy load the background image – CSS
  10. Fast Hosting like Rocket.net
  11. Cache – Cache Enabler / Swift Performance Pro

How to optimize for Cumulative Layout Shift (CLS)

  1. Image with correct dimensions
  2. Ads, embeds and iframe with dimensions
  3. Preload / Preconnect font

If you find it hard to understand, here are something you need to do on your WordPress website to to fix Core Web Vitals poor URL.

34 point to Optimize Core Web Vitals for WordPress

  1. Reduce element
  2. Reduce DOM
  3. Don’t use slider
  4. Don’t use video background
  5. Ads, embeds and iframe with dimensions
  6. Reduce the images size
  7. Image with correct dimensions
  8. Optimize the images – ShortPixel
  9. Use WebP format – ShortPixel / WebP Express
  10. Use lightweight theme – GeneratePress, Blocksy, Neve
  11. Use lightweight WooCommerce theme – Blocksy, Shoptimizer
  12. Use lightweight plugin that don’t loads scripts on every page
  13. System Font Stack – CSS
  14. Inline the background image – CSS
  15. Lazy-load images – Autoptimize, Swift Performance Pro, perfmatters
  16. Lazy load youtube video – Lazy Load for Videos
  17. Self-host Google font + Preload / Preconnect – OMGF / CSS / Theme
  18. Reduce 3rd party Script – social media feed
  19. Minify CSS – Swift Performance Pro / Autoptimize
  20. Preload CSS
  21. Generate Critical CSS – Swift Performance Pro
  22. Defer or Async Scripts – Async JavaScript
  23. Reduce Asset – perfmatters, Asset Cleanup
  24. Selfhost Google Analytics – perfmatters / Flying Analytics
  25. Delay 3rd party Script like FB Pixel, gtag- Flying Scripts
  26. Cache – Cache Enabler, Swift Performance Pro
  27. Optimise Database – Advances Database Cleaner Pro
  28. Preload / prefetch DNS Queries – Swift Performance Pro / perfmatters
  29. Fast Hosting like Rocket.net
  30. Use latest PHP
  31. GZIP / Brotli compression
  32. HTTP2
  33. Use CDN – Bunny
  34. If use FREE CloudFlare – WP Cloudflare Super Page Cache

Every site is different
You need to keep testing to get Good Score

Optimize for Core Web Vitals – From Google

If you are advance user, you may watch this video from Google