WP Speed > How To Fix Core Web Vitals Issues In WordPress | Optimize LCP, FID, CLS (Complete Guide)

How To Fix Core Web Vitals Issues In WordPress | Optimize LCP, FID, CLS (Complete Guide)

how to fix core web vitals errors in Wordpress

Recently Google announced that the Core Web Vitals will also be considered as a ranking factor in search results from May 2021. So, it’s time to fix your core web vital issues and give your visitors a better user experience.

In this post, I have shared what are Google’s Core Web Vitals & how you can improve core web vitals errors in your WordPress website.

Google is trying to give a better user experience whether the Speed on desktop & mobile or even AMP pages to give a fast & better user experience to the users. Whether you like it or not, we have to follow it to stay in the market. So, this time Google has come up with a new concept called Core Web Vitals.

So, let’s discuss it in details –

Table of Contents

1. What Are Google Core Web Vitals?

Core web vitals are a set of metrics that includes loading time, interactivity, and visual stability of a web page that helps website owners to measure user experience. Here, Google is trying to improve user experience, especially on mobile devices.

optimize core web vitals

2. The Three Main Factors Of Core Web Vitals Are

Google Core Web Vitals for WordPress
  • Largest Contentful Paint (LCP):

Largest Contentful Paint (LCP) means that the main content of your web page should load fast. The faster it loads, the better your LCP.

Here Google is not talking about the loading time instead Google wants that as soon as a user visits your web page, it should show the main content first.

fix core web vitals wordpress

The LCP should be under 2.5 seconds if it is more than 2.5 seconds then you have optimized your web page.

How To Improve Largest Contentful Paint (LCP) In WordPress?

Here are some ways that will help you to optimize LCP in your WordPress Website:

  • Optimize Images.
  • Preload Critical Images (Logo, featured images).
  • Minify CSS & Javascript.
  • Use CDN.
  • Lazy load images.
  • Preload fonts.
  • Reduce TTFB( Use a faster web, hosting provider).

  • First Input Delay (FID)

FID or First Input Delay may be the most complicated metric to understand and optimize. To explain it simply, FID deals with how long it takes for a site to become interactive with the user after they click on a link or button or just simply interact with a javascript-powered control.

A simple example to explain this would be if a user clicks on a button to expand or retract a certain section in your website, how long does it take for your website to respond to the click? An important thing to mention here is that FID is heavily affected by JavaScript, which means if a user is visiting your site via a mobile phone and the phone is busy processing a large javascript file from your site, your website may not be interactive to the user no matter how repeatedly they press on an element.

how to improve core web vitals

For your website to be classified in the section of “GOOD” sites, your site’s FID should be less than 100 milliseconds. In this scenario, FID is considered for User Experience, because it reflects how quickly content that you care about is accessible to the users, immediately upon request.

How To Improve First Input Delay (FID) In WordPress?

Ways to fix your First Input Delay (FID):

  • Eliminate render-blocking Javascript using Async Javascript plugin (free), FlyingPress (Paid), or by using WP Rocket (Paid).  
  • Remove Unused CSS & Javascript.
  • Delay loading of third-party scripts like analytics, chat widget, etc. using the flying script plugin.
  • Apply Brotli compression.

  • Cumulative Layout Shift (CLS)

CLS or Cumulative Layout Shift definition to be precise is a website loading metric which measures visual stability, but also it can be easily described by saying it deals with how your site loads and if or not the contents of your site moves around after loading of any new contents.

An example to help in understanding Cumulative Layout Shift (CLS) is a few of those websites with news, you may have noticed how the content shifts to take place for a loaded ad? Simply said, that is CLS and we can all agree here that it is as annoying and frustrating at the same time, as it sounds. Here are a number of things that may cause high CLS: –

  • Images or videos with an unknown size.
  • Fonts in the process of rendering.
  • Any third party ads that resize dynamically.
how to improve lcp in wordpress

Also, to mention one of the big issues of CLS is, websites look and behave differently for users and developers. 

How To Fix Cumulative Layout Shift (CLS) In WordPress?

Common ways to fix CLS in your WordPress website:

  • Try to avoid animation.
  • Avoid layout shifts.
  • Specify dimension for Images, videos, ads & iframes.
  • Preload & host your fonts locally.

3. How To Measure Your Website’s Core Web Vitals?

Google has given us many ways to measure our website’s Core Web Vitals & has also added Core web vitals in the search console. 

So, apart from the Google search console, Here are some other tools that you can use to check your Core Web Vitals score –

4. My Core Web Vitals Test Result:

On Google Page Speed Insight (Desktop)-

how to improve cls in wordpress

On Google Page Speed Insight (Mobile)-

how to pass core web vitals

On Gtmetrix

how to improve fid in wordpress

5. How To Fix Your Core Web Vitals Errors In WordPress?

Now, I am going to share how I fixed my Core Web Vitals error in WordPress. I got a CLS Issue: more than 0.25 (desktop) & LCP issue: longer than 4s (desktop) errors on this site. After optimizing my site with core web vitals, my ranking for most of the keywords has improved in the Google search results.

core web vitals google update

So, here are some of the ways to fix your Core Web Vitals Errors in WordPress.

6. Reduce Server Response Time

Choosing a faster web hosting provider solves most of your problems. I have also moved my site to Cloudways (Digital Ocean) & after migrating my site, my server response time has come down. My site was already optimized with a 98% GTmetrix score but still, the TTFB was really high with Hostinger hosting (my previous host).

I know that Cloudways hosting is a little bit expensive, so I am sharing 3 other web hosting providers that you can consider based on your budget. All these web hosting providers offers faster loading time.

A2 Hosting

Best Shared Hosting

Cloudways (Use Coupon: DIGIROCK20)

Best Cloud Hosting

WPX Hosting

Best Managed WordPress Hosting

Kinsta

Best Premium Hosting

Disclamier: Since I don’t recommend ‘not good’ hosting like various different affiliates out there, you could really help me out by signing up for any web hosting mentioned above using my affiliate link. Also, let it be known that I base my reviews not only from my own experience but also from other trusted sources.

You can also join some Facebook groups or some Sub Reddits related to WordPress hosting to get Unbiased reviews.

7. Optimize Your Images

Images also slow downs your WordPress website speed & give the largest contentful paint (LCP) error to your site. 

So, how to Optimize Images in WordPress? Well, there are many free plugins out there in the WordPress directory that will help to optimize your Images.

You can either use Smush plugin, ShortPixel, or Imagify plugin to compress your images. All these plugins have both free & paid versions.

But before uploading, I compress all my images using Tinypng.com and then I upload my images to my site.

Now, let’s Configure Smush Plugin:

how to fix cls issue more than 0.25 desktop & mobile
  • Bulk Smush tab setting:

Image sizes: All

Automatic compression: ON

Metadata: OFF

how to fix cls issues

Image Resizing: On (choose max width = 2048 & max height = 2048)

Then click on the Update setting.

  • Directory Smush

With directory smush, you can compress all the images including theme images. Just select your directory and click on the Compress button.

  • Integrations
what is cls issue

Gutenberg Support: OFF.

WPBakery Page Builder: Enable it if you are using the WPBakery page builder editor.

  • Lazy Load
core web vitals lcp

Media Types: Check all

Output Locations: Check all

Display & Animation: None

Include/ Exclude : Check all

Scripts: Footer

Finally, update these settings.

  • CDN

Smush plugin also offers CDN for images but this feature is available only in the premium version.

  • Tools

Image Resize Detection: ON

  • Setting
what is google core web vitals

Color Accessibility: OFF

Data: Keep

Finally, click on the Update setting.

The PRO version will compress your images even more whereas the free version will compress 50 images at once & you have to click again to compress your images if you have more than 50 images.

8. Serve Images In Next-Gen Formats

WEBP is a new image format & it is lighter than the JPG format. Most of the top web browsers like Firefox, Google Chrome, Edge, Safari, etc. are now supporting WEBP images. 

As of now, the WordPress media library doesn’t support WEBP images. But using the WEBP express plugin we can convert all our images in WEBP format.

So, here are the best settings for the WEBP Express plugin:

WEBP Express Plugin Settings:

Operation Mode: Choose Varied Image Responses.

General:

Scope: All content.

Image types to work on: Both jpegs and pngs.

Destination folder: Mingled.

File Extension: Append”.webp”.

Destination structure: Document root.

Cache-control header: Do not set.

Redirection Rules:

Enable Direct redirection to exist converted images? : Check this box.

Conversion:

Jpeg Options: Let it be default.

Png options: let it be default.

Metadata: No metadata in webp.

Convert on Upload: check this box

Bulk convert: Convert all your images in webp from here.

Alter HTML:

Alter HTML: Check this box.

What To Replace: Choose Replace Image URLs & check the box of only do the replacements in WEBP enabled browsers.

How to replace: Choose the complete page option.

Finally, Click On Save Settings.

9. Properly Size Images

If you are getting this error in your Gtmetrix or Pagespeed Insight speed test, then you have to resize those images in the correct dimension shown in your Gtmetrix report.

how to fix lcp issue

How to Fix Properly Resize Images Error In WordPress?

To fix this, You have to download those images, resize it according to the dimension given in Gtmetrix and replace it.

10. Specify Image Dimension

Specify image dimensions means that the width & height of the images is blanked in HTML. This mainly happens in the Widgets section. Gtmetrix will provide you the correct dimension for that image & you just need to insert it.

How to Fix Specify Image Dimensions?

Go to the widget area, find the widget where width & height are missing. You just insert the correct width & height (see the example below).

lcp issue

11. Use A Cache Plugin

Cache plugins are really helpful to speed up your WordPress website. You can use WP Rocket or Flying Press plugin if you are looking for paid plugins & If you are looking for a free alternative then you can use Autoptimize, WP fastest cache or LiteSpeed Cache (if you are using litespeed based server) plugin.

So, here is the best Autoptimize plugin settings:

Under JS, CSS & HTML Tab

lcp issue longer than 2 5s mobile

JavaScript Options:

Aggregate JS-Files – Enable this option.

Also, Aggregate Inline JS – Enable this.

Force Javascript in < Head> – Disable.

Exclude scripts from Autoptimize – If you want to exclude any script from optimization then you can add that here. By default Wp-includes/js.dist/, wp-includes/js/tinymce/ & js/jquery/jquery.js are excluded.

Add try-catch wrapping – disable this.

CSS Options:

lcp issue longer than 4s mobile

Optimize CSS Code – Enable this.

Aggregate CSS – files – Enable.

Also Aggregate Inline CSS – Enable. This will inline all CSS files.

Generate data: URLs for images – Enable this if you are not using any CDN.

Inline and Defer CSS – Enable this. Run a speed test in Gtmetrix. If any CSS file is still showing, then you can line and defer the CSS file. The best tool to inline and defer CSS is criticalpathcssgenerator.

  • First, enter your website URL.
  • Next copy the entire codes from the CSS file and paste that code in the full CSS box.
  • Now, click on the create critical path CSS button to generate the file.
  • Next, copy the newly CSS file codes and paste that in the inline and defer CSS box.
  • If you have more than one CSS file then you can generate separate codes, just give some space in the inline and defer CSS box and paste those codes.

Inline All CSS – Disable.

Exclude CSS From Autoptimize: Here you can exclude certain CSS files. let it be default & if you want to exclude any CSS file then you can add here.

HTML Options:

core web vitals wordpress

Optimize HTML Code – Enable.

Keep HTML Comments – Enable this.

CDN Options

fcp issue longer than 2.5s desktop

If you are using any CDN like StackPath, BunnyCDN, or any other CDN then you can add the CDN URL here.

Misc Options:

first contentful paint wordpress

Save aggregated script/CSS as static files – I will recommend Enable this as it will serve cache CSS and Javascript files through your server. You may need to disable this option if your web server doesn’t properly handle the compression.

Minify excluded CSS and Javascript Files – Enabling this will also minify the excluded CSS & JS files. But if your site breaks or you see any minification related issues then uncheck this option.

Experimental: Enable 404 Fallbacks: Disable this.

Also Optimize For Logged In Editors/ Administrators – Up to you. You can either enable/disable it.

Check out my complete post on best Autoptimize settings to optimize your WordPress site.

Now let’s configure WP Fastest Cache Plugin

wp fastest cache settings 2020

Settings Tab:

Cache System: Enable.

Widget Cache (Premium): Check this box.

Preload: This option will create a cache of the entire site automatically. After enabling this option a pop up will appear where you have to select all the options, add 4-6 if you are using Shared Hosting, and 10-12 if you are using VPS hosting in the pages per minute. You can also check out their official blog post for more info.

Logged – In – Users: If your site has multiple users then uncheck this box otherwise enable this.

Mobile: Check this box.

Mobile Theme (Premium): Enable this.

New Post: Enable this option as this will clear cache files when a post or page is published. After checking this box a pop up will appear where you have to choose to Clear All Cache Option.

Update Post: Check this option. This will clear cache files when a post or page is updated. Again, a pop up will appear and this time you have to choose Clear cache of Post/page.

Minify HTML: enable.

Minify HTML Plus (Premium): Premium users should check this box to minify HTML even more.

Minify CSS: Enable this option.

Minify CSS Plus (Premium): Check this option.

Combine CSS: Enable this. It will combine all CSS in one file which will reduce HTTP requests & thus reduce your WordPress website speed.

Minify JS (Premium): Similar to HTML & CSS file, you can minify your JS files.

Combine JS: Enable this as it will combine all JS files In one file, which will reduce HTTP requests.

Combine JS Plus (Premium): This will combine JS files even more.

Gzip: Enable.

Browser Caching: Check this box.

Disable Emojis: Check this.

Render Blocking JS (Premium): Enable.

Google Fonts (Premium): Enable.

Lazy Load (Premium): Enable.

Now Just click on Submit.

You can also check out my complete post on best WP Fastest Cache settings to speed up your WordPress website.

12. Eliminate Render- Blocking Resources

If you are getting a eliminate render- blocking resources warning in speed test then you can use the Async JavaScript plugin.

How to Fix Eliminate Render- Blocking Resources In WordPress?

speed up wordpress website 2020 free

Install & activate the plugin.

Go to the setting> async javascript.

async javascipt wordpress plugin
async javascript
reduce wordpress speed witn async javascript
  • Choose defer in all the options & click on save changes. (If any part of your site breaks then choose exclude under Jquery).

Using Flying Press Plugin (Paid).

Flying Press also has an option to defer javascript where you can either choose to exclude Jquery from deferring or Fix Render blocking Jquery script. Test these options one by one to see which one works best for you.

autoptimize cumulative layout shift

Again, you might have to inline critical CSS.

Flying Press & WP Rocket has an option to optimize CSS delivery. 

So, under Flying Press plugin go to CSS and check the Generate Critical and Uses CSS option. You will get three options to load unused CSS either Asynchronously, on user interaction, or Remove. I will suggest you first choose Remove and test if it works or not. If you are having any issues, then try Asynchronously or user interaction.

largest contentful paint wordpress

13. Use A CDN

CDNs are also helpful to optimize your WordPress website speed. You can use Bunny CDN or StackPath (paid) CDN to improve your website speed.

14. Use Cloudflare

Cloudflare is a great tool to improve your WordPress website speed, security & Core Web Vitals score. Cloudflare not only offers CDN but also add additional security on our site, preventing our site from DDos attack, etc. You can check my post on how to set up Cloudflare CDN & reduce your website speed.

Recently Cloudflare has launched a new add-on called Automatic Platform Optimization (APO) for the WordPress website at $5/month (free plan users) and if you are a paid plan user, then you don’t have to pay anything.

While testing this feature, the Time to First byte (TTFB) has reduced to 72%, First Contentful Paint has reduced to 23% & 13% reduction in the speed index for desktop users.

So, If you are on a shared host, then this is a great add on that you can try out this Cloudflare add on to improve your Core web vitals scores.

15. Use Server Level Compression

Enable Gzip or Brotli compression to reduce the file size at the server level which will speed up your LCP. Most of the cache plugins like WP Rocket, WP fastest cache has the option to enable gzip compression. If you are using Cloudflare then you can enable Brotli to speed up your LCP.

16. Avoid Large Layout Shifts

As the page loads, some elements on a page move on the screen which affects your CLS score.

So, to Improve your CLS score, you have to do the following things: 

  • Specify Dimension of Images, Videos & iframes: By default Gutenburg Image block specifies the dimension. You can also add custom dimensions to the image by going into the block settings.
how-to-avoid-large-layout-shift-in-wordpress
  • Dynamic Ads: Another biggest problem that affects your CLS is dynamic ads. So to fix this issue, you have to reserve space for dynamic ads. Instead of pasting the Adsense or any other dynamic ad code directly, insert those codes inside the <div class> & set the dimensions of the element in CSS.

One more thing you can do is by delaying the loading of dynamic ads. You can achieve this by using the flying script plugin. All you have to do is add a keyword of that script for example – use the keyword “tag” for Google Tag Manager”, Fbevents.js for Facebook Pixel, etc.

flying script plugin settings

Again if you are using the Flying Press plugin then go to the Javascript > load script on user interaction and inter the file name.

17. Remove Unused CSS

If you are using any page builders like Divi, Elementor, WP Bakery, etc. then there is a high chance that you will get this error in the Google page speed insight test. This error occurs because all these page builders come with lots of codes that load but are of no use for your layout.

So, the best way to fix and remove unused CSS is by unloading those CSS files either by using the Asset Clean UP plugin (Paid Version) or by using the Perfmatter plugin (Paid). 

perfmatters google analytics
reduce page load time wordpress plugin

Steps to Disable plugin on Specific page:

  • Step 1: Install & activate asset clean up plugin.
  • Step 2: Go to the asset clean up setting. Under the setting tab, click on general & file management.
  • Step 3: Turn on manage in the dashboard option. This will show all the files that are loading on that page.
  • Step 4: Open each page, posts & disable those scripts that are not required on that page. You can set contact form 7 to load only in the contact page, social sharing is not required in pages, it only requires in the blog post to content in social media, Google Maps should load only contact page, etc. You can disable these scripts which ultimately helps your WordPress website to reduce page load time.
increase website speed wordpress plugin

Flying Press plugin (paid) also has an option to remove unused CSS but this feature may not be compatible with every website. So, if your layouts break after removing then you can try out Asynchronously or on user interaction & see if it works for your site or not.

largest contentful paint wordpress

18. Remove Unused Javascript

Similar to unused CSS, Unused Javascript also slows down your WordPress website & affects your core web vital score. Again the best way to remove unused javascript is by using the Asset Clean Up plugin or by Perfmatter plugin.

Just run a speed test on Gtmetrix and click on the structure tab > remove unused Javascript, where you can find all the unused javascript files that are loading. You can unload those javascript files by using the Asset clean Up or by using perfmatter plugin.

If there are any third-party javascript scripts file, then it is better to either host them locally or delay the loading of those scripts by using the flying script plugin. 

19. Preload Largest Contentful Paint Image

Preloading the top image or slider will fix your largest contentful paint (LCP) error. You will have to exclude the logo & top image from lazy loading.

Flying Press & WP Rocket plugin has an option to preload critical images. But you can also do it manually by using the <link rel=’preload’ before image code.

autoptimize cumulative layout shift

20. Keep Request Counts Low and Transfer Sizes Small

Google has not set standards like the ideal number of requests or the maximum number of requests but it is better to keep it as low as possible. The lower requests a browser has to make to load your pages, the lower the resources it will use & will load your website fast.

21. Extra Optimization

Heavy Javascript codes also affects your First Input Delay (FID). So, it is really important to limit heavy Javascript codes so that the browser can respond quickly.

The biggest reason for heavy & unwanted Javascript code is because of heavy themes, using any page builder, and heavy plugins. 

For WordPress themes, always use lightweight themes & if you are looking for a free light-weighted WordPress theme then you can check out this blog post where I have shared 8 free fastest loading WordPress themes.

Page builders come with lots of codes which makes your WordPress website heavy. So, if it is possible try to avoid page builders but if you are using any page builders like Elementor, Divi, or WP Bakery then try to optimize your WordPress website speed. You can also check out my post on how to speed up your slow elementor website where I have shared 16 ways to optimize your Elementor website speed.

The most light-weighted page builder is Oxygen builder. So, If you are planning to start a new website or a blog & you want to use any builder then you should go with Oxygen builder. 

Finally, the heavy plugins also affect your core web vitals score. Replace the heavy plugins with light-weighted plugins.

22. Submit for Validation

After fixing all your Core Web Vital errors, it’s time to submit a request for validation. Open your Google Search Console > Core web vitals & then click on the VALIDATE FIX button. You will have to wait for the next 28 days & if everything is ok, then you will see a Passed message.

23. Optimize More

You can also watch my video or blog post, where I have covered almost everything on how to speed up Worpress website for free with timestamps in the video description.

24. FAQs

What Are Core Web Vitals?

Core Web Vitals are new metrics from Google which includes Largest Contentful Paint (LCP), First Interactive Display (FID) & Cumulative Layout Shift (CLS). Starting from May 2021, Core Web Vitals will be a ranking factor in the search results.

How To Fix Cumulative Layout Shift WordPress?

The most common reason for getting cumulative layout Shift error in WordPress is because of ads, embeds & iframes without dimension & images without dimension. You can check out this post where I have shared the perfect solution to fix your CLS error in WordPress.

How To Fix LCP Issue Longer Than 4S In WordPress?

LCP (Largest Contentful Paint) measures the loading time of the main content. The LCP should be under 0.25 seconds. The common reason for getting LCP error in WordPress is because of using a slow web hosting provider & using larger size images. In this post, I have shared the complete solution to fix your LCP issue.

How To Fix FID (First Input Delay) issue in WordPress?

FID (First Input Delay) measures the time a web page is taking to become interactive. FID is mainly affected by Javascript codes, so if your web page has more javascript codes then you might get this error in your Google search console. If it is under 100 ms then it is considered as Good, If it is between 100 ms and 300 ms then it comes under needs improvement & if it is more than 300 ms then it comes under poor. You can fix FID by reducing & deferring the javascript codes.

Best WordPress Plugins To Improve Google Core Web Vitals –

1. Autoptimize (Free)/ LiteSpeed Cache (Free) /Flying Press (Paid)/ WP Rocket (Paid)
2. WP Smush (Free)/ ShortPixel (Free)
3. WP Optimize (Free)
4. Flying Fonts (Free)

Conclusion: Fix Core Web Vitals in WordPress

Google is trying to give users a better & faster web experience & this time they have introduced Core Web Vitals.

But, currently, Core Web Vitals aren’t a ranking factor in the search engine result page but it will be a ranking factor starting from May 2021, so this is the right time to optimize your WordPress website with Core Web Vitals metrics and offer a better user experience to your visitors. A faster website will increase conversion & will reduce bounce rate.

You can test your Core Web Vitals score by using PageSpeed Insights, Light House, GTmetrix, or from the Core Web Vitals tab in the Google Search Console. 

These are the things I did to fix my Core Web Vital errors in my WordPress blog. If you have any questions related to Core web vitals then feel free to comment below.

Sandip Maheshwari

A guy blogging for the last 4 years, I am a guy who loves to write about SEO, social media and affiliate marketing. An avid cricket fan, die-hard fan of Silicon valley the series. I love to blog in my free time to share my knowledge with people around the world.

cyber monday web hosting deals 2020
A2 HOSTING

STARTING AT $2.99/MONTH

cloudways cyber monday deal
CLOUDWAYS HOSTING

STARTING AT $10/MONTH

cyber monday sale 2020
WPX HOSTING

STARTING AT $20.83/MONTH

Summary
How to Fix Core Web Vitals Issues in Wordpress | Optimize LCP, FID, CLS
Article Name
How to Fix Core Web Vitals Issues in Wordpress | Optimize LCP, FID, CLS
Description
How to Fix Core Web Vitals Issues in Wordpress | Optimize LCP, FID, CLS 1. Move To A Faster Web Hosting Provider 2. Optimize Your Images 3. Convert All Your Images In WEBP 4. Serve Scaled Images 5. Specify Image Dimension 6. Use A Cache Plugin 7. Defer Parsing Of Javascript 8. Use A CDN 9. Use Cloudflare 10. Use Server Level Compression 11. Ads, Embeds & Iframes Without Dimensions 12. Extra Optimization 13. Disable Plugin On Specific Page 14.Submit_for_Validation
Author
Publisher Name
Digirockstar
Publisher Logo

2 thoughts on “How To Fix Core Web Vitals Issues In WordPress | Optimize LCP, FID, CLS (Complete Guide)”

  1. This is the post that i was looking. You have explained everything on how to fix core web vitals. I have applied some of your tips & have seen a greater improvement in LCP & CLS. Thank You so much for sharing this post.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.