Core web vitals will be a ranking factor soon in May, 2021.
- Is there a plugin for that?
- How do I fix it without a plugin?
- Just show me the code and where to put it!
- Which Facebook Groups can I find answers in?
This guide covers nearly every recommendation found in the opportunities and diagnostics section of PageSpeed Insights. Of course, if you want a more accurate measurement of your web vitals, you should be using Lighthouse or the core web vitals report in Search Console. You’ll want to view the mobile core web vitals report since Google uses mobile-first indexing.
Search Console tells you whether your WordPress site struggles with the 3 core web vitals:
Largest Contentful Paint (LCP)
LCP is the largest element in the viewport.
The largest element is usually an image, background image, or H1 tag, but it can be any of these:
- Background image
- Video or animation
- Block-level element
Your largest contentful paint element can be seen in your PageSpeed Insights report. In this particular case, the LCP element is a background image that appears across the entire website.
- Preload the LCP image
- Compress the LCP image (try 85%)
- Serve the LCP image from your CDN
- Reduce the LCP image’s size using WebP or SVG
- Exclude LCP image (and other images in viewport) from lazy load
- Reduce TTFB (get off shared hosting and try a faster, cloud hosting provider)
- Optimize fonts (host locally, preload, use font-display: swap, reduce weights/icons)
- Preconnect CDNs and third-party fonts if you’re using them (i.e. //fonts.gstatic.com)
- Minify CSS and use critical CSS (make sure optimize CSS delivery works in cache plugin)
- Read more on how to fix LCP
This article was written by Tom Dupuis and originally published on Tom Dupuis.