Google Core Web Vitals is here. Google launched the Page Experience Signal update, which brings many changes to SERP ranking, as the boost it brings for websites with Good Core Web Vitals.
LCP also makes up to 25% of the Pagespeed score.
Learn how to reduce or fix LCP issues in WordPresss with the top 10 tips.
What is the Largest Contentful Paint (LCP)
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, alongside the issue based on field data.
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 check for Core Web Vitals field data or strive for results from live users. Since Search Console Core Web Vitals data may take a while or be delayed for small website owners, do a test simulating most of your userbase or set up a tool to capture Core Web Vitals field data.
To get field data use Web Analytics by Cloudflare, which we have a guide for.
For testing LCP lab data and field data(when the website has enough data) use Pagespeed. Go to Pagespeed Insights, do a page test, and go to “LCP” under the results. There are two results, mobile, and desktop, the first we go to is mobile:
The mobile LCP in the result above is a <h2> tag, a text element. Click on the desktop tab to see the desktop LCP. The desktop LCP result may be different than the mobile result.
To see issues related to the LCP, click on the tab below the screenshots “Show audits relevant to” and click LCP.
Best ways to fix or optimize your LCP in WordPress
Consider the following solutions for solving or improving LCP issues:
- Preload the LCP
- Setup Critical CSS
- Remove unused CSS
- Switch to lighter HTML elements
- Use CDN for images and SVGs
- Use Cloudflare APO
- Improve icon font loading or switch icons to SVG
- Limit access from users with bad Core Web Vitals
- Cut and use a different image for the mobile
- Avoid page builders or update yours
Preload the LCP
Impact: Medium
Preload above-the-fold images including the mobile image to speed up their load time. Use a WordPress function to preload the image only on the specific pages where it appears, or use a plugin to do it automatically.
You can boost the priority of the LCP image by specifying fetchpriority=”high” on the image element. To use it download the WordPress Performance Team Fetchpriority plugin. This plugin will be later merged on WordPress core.
Use Perfmatters and its conditional preloading to preload assets only on certain parts of the website, or its “Preload Critical Images” beta feature that will automatically preload the number of leading images that you choose (0-5).
After preloading an image, make sure the LCP will be evoked early by preloading its CSS and removing non-essential files from loading early than the LCP.
Setup Critical CSS
Impact: Medium
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 Jetpack Boost plugin for free and it generates Critical CSS for the homepage, posts, and pages.
Remove unused CSS
Impact: High
Removing unused CSS can lead to LCP load sooner. To remove unused CSS from WordPress, you either use Asset Cleanup, Perfmatters, or Wp Rocket.
Wp Rocket’s “Remove Unused CSS” feature strips unused CSS but may cause issues, especially with page-builder plugins. What defines what 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.
Get your Unused CSS removed and all pages visually tested!
Switch to lighter HTML elements
Impact: High
If you’re using a slider in the header or a large image, switch to a simple CSS background color(gradient color) or an animated CSS background. It can also reduce the CLS, as sliders may cause them. Consider also removing the slider from loading only on mobile, and using an image instead.
Sliders can cause the page to not pass the mobile-friendly test, which is part of the Page Experience Google algorithm.
Use a blurry placeholder technique for loading dynamic javascript elements or large images, reserving space for them until they appear.
Consider a CSS-only element to reduce the amount of loading time for the LCP.
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.
Use Cloudflare APO
Impact: Low to High
Cloudflare currently offers Automatic Platform Optimizations (APO) for 5$ USD/month, and it caches the HTML of WordPress to improve the TTFB(time to first byte). Cloudflare APO is compatible with WP Rocket and many other plugins.
You can also improve your TTFB by choosing a hosting with good TTFB field data. 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’ classes 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.
Limit access from users with bad Core Web Vitals
Impact: High
Core Web Vitals are global, not deferred by country.
Limit access to a region where you’re failing Core Web Vitals. Install and set up Cloudflare Web Analytics. With the available data, you can define if some country is contributing to lowering the Core Web Vitals. Install Cloudflare reverse-proxy CDN and block the region via firewall rules.
You should allow Googlebot and other search engine crawlers to crawl your website through their bot crawlers. Crawlers can be from multiple locations.
Cut and use a different image for the mobile
Impact: Low
Cut the size of the LCP image and use a smaller image for the mobile viewport. Modern themes have built-in UI to change responsive images.
Avoid page builders or update
Impact: High
Consider a theme that has a mobile-first CSS approach, which is a stylesheet for mobile different from desktop. Many of the popular page builders don’t have this approach.
Update your theme builder to the latest release, it may have improvements on its CSS, and thus the DOM.
Elementor has a feature to optimize the DOM, go to Elementor > Settings > Advanced. Using this feature can potentially break your website features, use it wisely.
Get your LCP Optimized!