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.
Learn how to improve or fix your WordPress LCP with the 9 best tips.
What is the Largest Contentful Paint (LCP) and how to check yours
The Core Web Vitals are ranked as “Good”, “Needs Improvement” or “Poor” labels, together with green, yellow and red colors. These are the labels you’re gonna receive at 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. According to Google, a good threshold to measure for this metric is the 75th percentile of page loads, segmented across mobile and desktop devices.
How to check your Largest Contentful Paint (LCP)
As a tip, 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, we recommend testing simulating most of your userbase or setting up a tool to capture Core Web Vitals field data.
To get field data we recommend Web Analytics by Cloudflare, which we have a guide for: How To Get Core Web Vitals Field Data
For testing Core Web Vitals lab data and field data(when your website has enough data) use Pagespeed. Go to Pagespeed Insights, do a page test, and go to “Largest Contentful Element” 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.
The desktop LCP in the result above is also a <h2> tag, a text element.
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
After getting field data on Search Console, you’re gonna receive Core Web Vitals results. If you’re presented with the LCP issues – “lcp issue longer than 2,5s” or “lcp issue longer than 4s”, consider the following solutions for solving them.
- Setup Critical CSS
- Change the slider or the background image to a CSS background-color property or an animated CSS background with SVG
- Cut and use a different image for the mobile
- Use a CDN for images and SVGs
- Preload the Largest Contentful Paint (LCP) Image
- Serve HTML pages cache-first (Paid)
- Improve your TTFB, by choosing a better hosting
- Optimize DOM by avoiding page builders
- Improve icon font loading, remove unused icon fonts, or switch icons to SVG’s
- Limit access from a region with failing Core Web Vitals
Setup Critical CSS
Impact on LCP: Medium
Consider a Critical CSS plugin to load the essential css before any assets. Jetpack recently launched Jetpack Boost plugin for free and it generates Critical CSS for your homepage, posts, and pages.
WP Rocket also offers a Critical CSS feature alongside all their other optimizations. If you haven’t bought Wp Rocket yet, consider using my reflink.
Change the slider or the background image to a CSS background-color property or an animated CSS background with SVG
Impact on LCP: High
Switch the header of the slider(or image) to a simple CSS background color(gradient color) or an animated CSS background. It can also reduce the CLS, as sliders may cause them because of Javascript. Consider only removing the slider from mobile, and using an image instead.
Sliders can cause your page to not pass the mobile-friendly test, which is part of the Page Experience Google algorithm.
Use a blurry placeholder technique on javascript elements(dynamic) or large images, properly reserving space for them.
Consider a CSS-only element to reduce the amount of loading time for the LCP.
Cut and use a different image for the mobile
Impact on LCP: Low
Cut the size of your LCP image and use a smaller image for the mobile viewport. Modern themes have built-in UI to change responsive images.
Use a CDN for images and SVGs
Impact on LCP: Low
Upgrade the load time from your images, with an image CDN. Choose from our list of the 8 best free CDN plugins for WordPress.
Popular Image CDN plugins:
Preload the Largest Contentful Paint (LCP) Image
Impact on LCP: Low
To preload all the Largest Contentful Paint (LCP) images on all pages, follow the steps:
- Go to the Appearance > Theme File Editor > and in the Theme files click to edit functions.php and add the following code:
add_action( 'wp_head', function(){
$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full');
echo '<link rel="preload" as="image" href="'.$featured_img_url.'"/>';
});This function uses get_the_post_thumbnail_url() as LCP image and create a link preload for it. Some themes may be not compatible with this approach, and if your homepage or the page doesn’t have an image thumbnail it will create an empty <link rel=’preload’> tag.
This function doesn’t preload responsive images.
How to Preload a responsive Largest Contentful Paint (LCP) Image
To preload a responsive image, add imgsrcset and imagesizes to the <link> element. To preload the following image:
<img src="bear.jpg" srcset="bear_400px.jpg 400w, bear_800px.jpg 800w, bear_1600px.jpg 1600w" sizes="50vw" alt="bear test image">Do the following:
<link rel="preload" as="image" href="bear.jpg" imagesrcset="bear_400px.jpg 400w, bear_800px.jpg 800w, bear_1600px.jpg 1600w" imagesizes="50vw">Final code to be inserted in functions.php and preload a responsive LCP image only on the homepage:
// Preload a responsive image only on homepage
function preload_featured_image_home() {
if (is_front_page()) {
echo '<link rel="preload" as="image" href="/wp-content/uploads/2021/06/cropped-wpalpha-logo-%E2%80%[email protected]" imagesrcset="bear_400px.jpg 400w, bear_800px.jpg 800w, bear_1600px.jpg 1600w" imagesizes="50vw">';
}
}
add_action( 'wp_head', 'preload_featured_image_home', 90 );Preload Largest Contentful Paint (LCP) only when necessary
Avoid preloading images when it’s not necessary, use a WordPress function to preload the image only on the specific pages it appears.
Use Perfmatters and its conditional preloading to preload assets only on certain parts of your 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 your LCP will be evoked early by preloading its CSS and removing non-essential files from loading early than the LCP.
Serve HTML pages cache-first (Paid)
Impact on LCP: Low
Cloudflare currently offers Automatic Platform Optimizations (APO) for 5$ USD/mo, and it caches the HTML of your WordPress website. This is possible due to Cloudflare Workers that cache dynamic content. Cloudflare APO can also improve First Contentful Paint(FCP) and Speed Index.
Cloudflare APO is compatible with WP Rocket and many other plugins, check the compatibility here.
Improve your TTFB by choosing a better hosting
Impact on LCP: High
Consider choosing a server that has good web vital metric TTFB(time to first byte) field data. Click here for the article on the fastest WordPress hosting by TTFB(or Core Web Vitals).
Optimize DOM by avoiding page builders
Impact on LCP: High
Consider a theme that has a mobile-first CSS approach, a stylesheet for mobile and desktop. 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.
Improve icon font loading, remove unused icon fonts, or switch icons to SVG’s
Impact on LCP: 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: https://fontawesome.com/v5/cheatsheet/free/
Fontello lets you build a css and font files choosing only the necessary icons from various icon types, such as Font Awesome, Typicons, Entypo, and many more: https://fontello.com/
You should have a reminder that for adding new icons, it will need to be manual.
Limit access from a region with failing Core Web Vitals
Impact on LCP: High
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 DNS and block the region via firewall rules.
Get your Core Web Vitals optimized
What if it is a text block and not image? My site is either text block element or header.
You’d need then to improve on font loading and prioritize essential CSS loading, might try Critical CSS.