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

Recently Google announced that the Core Web Vitals will also be considered as a ranking factor in search results from May 2022. So, it’s time to fix & improve your core web vitals for WordPress 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 detail –

Table of Contents

• 1. What Are Google Core Web Vitals?
• 2. The Three Main Factors Of Core Web Vitals Are –
  • How To Improve Largest Contentful Paint (LCP) In WordPress?
  • How To Improve First Input Delay (FID) In WordPress?
  • How To Fix Cumulative Layout Shift (CLS) In WordPress?
• 3. How To Measure Your Website’s Core Web Vitals?
• 4. My Core Web Vitals Test Result:
• 5. How To Fix Your Core Web Vitals In WordPress?
• 6. Reduce Server Response Time
• 7. Optimize Your Images
• 8. Serve Images In Next-Gen Formats
• 9. Properly Size Images
• 10. Specify Image Dimension
• 11. Use A Cache Plugin
• 12. Eliminate Render- Blocking Resources
• 13. Use A CDN
• 14. Use Cloudflare
• 15. Use Server Level Compression
• 16. Avoid Large Layout Shifts
• 17. Remove Unused CSS
• 18. Remove Unused Javascript
• 19. Preload Largest Contentful Paint Image
• 20. Keep Request Counts Low and Transfer Sizes Small
• 21. Extra Optimization
• 22. Submit for Validation
• 23. Optimize More

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.

2. The Three Main Factors Of Core Web Vitals Are –

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

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.

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 the 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 that 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 move 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.

Also, to mention one of the big issues of CLS is, that 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 dimensions 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 –

• Page speed Speed Insight
• Web Vitals Chrome Extension
• Web. dev
• GTmetrix

4. My Core Web Vitals Test Result:

On Google Page Speed Insight (Desktop)-

On Google Page Speed Insight (Mobile)-

On Gtmetrix

5. How To Fix Your Core Web Vitals 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) & an 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.

So, here are some ways to optimize your Core Web Vitals 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 offer faster loading times.

Disclaimer: 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 on my own experience but also on 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 down your WordPress website speed & give the largest contentful paint (LCP) errors 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 the 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:

• Bulk Smush tab setting:

Image sizes: All

Automatic compression: ON

Metadata: OFF

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

Gutenberg Support: OFF.

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

• Lazy Load

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

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 into 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 existing 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 Properly Resize Images Error In WordPress?

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

10. Specify Image Dimension

Specifying 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 with the correct dimension for that image & you just need to insert it.

How to Fix Specify Image Dimensions?

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

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

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:

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 into 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 it here.

HTML Options:

Optimize HTML Code – Enable.

Keep HTML Comments – Enable this.

CDN Options

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

Misc Options:

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 the best Autoptimize settings to optimize your WordPress site.

Now let’s configure WP Fastest Cache Plugin –

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 files, 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 the 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 the speed test then you can use the Async JavaScript plugin.

How to Fix Eliminate Render- Blocking Resources In WordPress?

Install & activate the plugin.

Go to the setting> async javascript.

• Choose defer in all the options & click on save changes. (If any part of your site breaks then choose to 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.

Again, you might have to inline critical CSS.

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

So, under the 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 Asynchronously.

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 adds additional security on our site, preventing our site from DDoS attacks, 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 vital 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, and WP fastest cache have 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.

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

Again if you are using the Flying Press plugin then go to the Javascript > load script on user interaction and enter 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). 

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, post & 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.

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 the image code.

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 affect 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 the Worpress website for free with timestamps in the video description.

24. FAQs

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 2022, 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.

A2 Hosting

Starting At $2.99/month

GRAB THIS DEAL

Cloudways Hosting

Starting At $10/month

Cloudways Review

GRAB THIS DEAL

WPX Hosting

Starting At $20.83/month

WPX Hosting Review

GRAB THIS DEAL