Core Web Vitals For WordPress: How To Fix Over 25 Items

Core Web Vitals For WordPress: How To Fix Over 25 Items

Core web vitals will be a ranking factor soon in May, 2021.

But many WordPress users struggle to fix issues because they don’t know how to apply the solutions to WordPress.

  • 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:

Core Web VitalsSource: Google

 

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:

  • Image
  • 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.

Largest Contentful Paint WordPress Element - Background Image

Optimizing LCP

  • 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
  • Use asset unloading plugins to remove unused JavaScript and CSS
  • Eliminate render-blocking resources with Autoptimize + Async JavaScript
  • Reduce TTFB (get off shared hosting and try a faster, cloud hosting provider)
  • Avoid loading heavy third-party JavaScript (e.g. advertisements) above the fold
  • Delay JavaScript using Flying Scripts or “delay JavaScript execution” in WP Rocket
  • 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.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Show Your ❤️ Love! Like Us
Scroll to Top