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?
- 2. The Three Main Factors Of Core Web Vitals Are –
- 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 Errors 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
- 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).
- Use CDN.
- Lazy load images.
- Preload fonts.
- Reduce TTFB( Use a faster web, hosting provider).
- First Input Delay (FID):
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):
- 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.
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)-
On Google Page Speed Insight (Mobile)-
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.
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.
Best Shared Hosting
Cloudways (Use Coupon: DIGIROCK20)
Best Cloud Hosting
Best Managed WordPress Hosting
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.
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
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.
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
Finally, update these settings.
Smush plugin also offers CDN for images but this feature is available only in the premium version.
Image Resize Detection: ON
Color Accessibility: OFF
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.
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.
Enable Direct redirection to exist converted images? : Check this box.
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: 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 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).
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
Aggregate JS-Files – Enable this option.
Also, Aggregate Inline JS – Enable this.
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.
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.
Optimize HTML Code – Enable.
Keep HTML Comments – Enable this.
If you are using any CDN like StackPath, BunnyCDN, or any other CDN then you can add the CDN URL here.
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 –
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.
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
How to Fix Eliminate Render- Blocking Resources In WordPress?
Install & activate the plugin.
- 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).
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.
13. Use A CDN
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.
- 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.
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, 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.
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.
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.
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
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.
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.
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.
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.
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.
STARTING AT $2.99/MONTH
STARTING AT $10/MONTH
STARTING AT $20.83/MONTH