LCP measures the time from when the user initiates loading the page until the largest image or text block is rendered within the viewport.
It’s ranked as “Good”, “Needs Improvement” or “Poor” scores, respectively represented by green, yellow, and red colors. These are the labels that appear on Search Console.
Why improve your Core Web Vitals (guide)
To get an LCP “Good” label, it should load within 2.5 seconds of when the page first starts loading. The threshold to measure for this metric is the 75th percentile of page loads, segmented across mobile and desktop devices.
How to check LCP
Always strive for Core Web Vitals field data(live users), even if you are a small site, as Search Console Core Web Vitals data may take a while or be delayed.
Cloudflare offers free Core Web Vitals Analytics.
For testing LCP lab data use Pagespeed or Webpagetest.org.
How to optimize your LCP in Wordpress
Optimizing LCP is making sure the LCP asset loads early. For that, you can use browser or server-side(TTFB) optimizations so that either the browser or the server(site) finds and loads it earlier.
Wordpress Core has now a dedicated Wordpress Performance Team. If you’re either using a classic, a block theme, or even a page builder, you are reaping the speed enhancements of the Wordpress Performance Team, if you keep Wordpress updated.
Nitropack, Perfmatters, and Wp Rocket are plugins proven to improve LCP.
Boost priority with FetchPriority
Impact: 38% of Improvement. FetchPriority is a new HTML attribute code that improves the loading priority of elements. Use it to load the LCP image(works best with background image) or other above-the-fold elements early. Perfmatters currently offers this feature.
Add fetchpriority="high" on above-the-fold elements. For fetchpriority to work, the elements need to be discovered early, therefore, make sure they are preloaded. Use fetchpriority only if your image isn’t dynamically added to the page.
Use Preload
Impact: Medium. Use the preload HTML tag to tell the browser to discover elements early. You can use preload with Perfmatters or code.
Perfmatters 20% OFF Coupon: WPALPHA
The preload tag allows you to inform the browser about critical resources that are “late-discovered”. As for background images, use preload and fetch priority, as they are later discovered by the browser.
Perfmatters offers both preload and fetchpriority with a friendly interface.
Perfmatter’s “Preload Critical Images” beta feature automatically preloads the number of leading images that you choose (from 0 to 5).
Defer or inline render-blocking JavaScript
Impact: Varies. Deferring non-essential javascript can make the LCP load earlier if the Javascript loads before the LCP(in most cases). Inline essential javascript(small amount), can make it also the LCP appear early.
This technique requires advanced testing as your website may not be compatible with this approach and will produce errors.
Setup Critical CSS
Impact: Varies. Consider a Critical CSS plugin to load the essential CSS before any assets. WP Rocket offers a Critical CSS and a Remove Unused CSS feature alongside many other Core Web Vitals optimizations.
Jetpack recently launched the Jetpack Boost plugin for free and it generates Critical CSS for the homepage, posts, and pages.
Remove unused CSS
Impact: Varies. Removing unused CSS can lead to LCP load sooner. To remove unused CSS from WordPress, use Asset Cleanup, Perfmatters, or Wp Rocket.
The “Remove Unused CSS” feature strips unused CSS but may cause issues, especially with page-builder plugins. What defines the plugin/solution you will use may depend on your theme. The remaining options, Asset Cleanup and Perfmatters may only have the interface as a differential.
Only remove 100% unused CSS files after clicking and interacting with all elements on the page.
Host Google Fonts locally
Your theme may be using Google Fonts to load fonts on your website, and they are probably slowing down the speed. Host them on your site(locally) using Perfmatters.
Perfmatters 20% OFF Coupon: WPALPHA
Use CDN for images and SVGs
Impact: Medium. CDN(Content Delivery Network), loads the images from distributed servers around the world to speed up the load time. We have a list of free image CDNs and the fastest WordPress CDNs.
Improve TTFB
Impact: Low to High. To easily improve TTFB, use Cloudflare APO. Automatic Platform Optimizations (5$ USD/month) caches the HTML of Wordpress to improve the TTFB(time to first byte). It’s compatible with WP Rocket and many other plugins.
You can also improve your TTFB by choosing a hosting with good TTFB. TTFB has a large impact on the LCP metric.
Improve icon font loading or switch icons to SVG
Impact: Low. To improve font loading and LCP, go to your website, look for all the icons used on the pages, and note each class name down. Load only the necessary classes on the font icon css file now. Font Awesome has a cheat sheet listing all icon assets’ class name
Fontello lets you build a css and font files by choosing only the necessary icons from various icon types, such as Font Awesome, Typicons, Entypo, and many more.
You should have a reminder that for adding new icons, it will need to be manual.
Get your LCP Optimized!
Send a request