Google Core Web Vitals for WordPress – Easy Guide for WordPress Optimization in 2021

Core Web Vitals for WordPress

Improve your Core Web Vitals for WordPress Easily.

Hi There! What’s Up? I hope you’re doing fine. Recently Google announced several major changes coming to their Search Engine algorithm this month. These algorithmic updates are to be called are “Core Web Vitals” which will include many factors that a website must accomplish in order to get a better ranking in their search engine and improve the user’s experience on the web.

Without wasting much of your time, I’ve prepared a short comprehensive guide for helping you in optimizing your website according to the “Core Web Vitals“. So without any ado, let’s dive into it.

What Are Google Web Core Vitals?

Google Core Web Vitals, popularly known as Web Vitals is an initiative by Google to enhance the quality of websites and deliver a fast and great user experience on the web. Google has provided a number of tools over the years to measure the performance of websites and report the issues along with their suggestions.

What Are the Metrics of Page Experience?

For now, the three pillars of page experience are:

  • Loading Performance
  • Responsiveness
  • Visual Stability of Website

To measure the essential aspects of User Experience, Google has chosen three metrics that should be accomplished by every website in order to enhance user experience:

  • LCP (Largest Contentful Paint)- LCP measures the Loading Performance of your website. It looks at how quickly the main content of your website becomes visible to users. As stated by Google, LCP should occur within the first 2.5 seconds of the page load time for a good User Experience.
  • FID (First Input Delay)- FID measures the interactivity of your website. It actually measures the time taken by the user’s browser to process your website in response to the user’s interaction. Google suggests the pages should not have an FID greater than 100 milliseconds.
  • CLS (Cumulative Layout Shift)- CLS measures the visual stability of your website. It is the time taken by a website to become visually stable for users. As a website loads, some elements According to Google, a page should maintain the CLS of 0.1 or less.

How to Test Your Google Core Web Vitals Score?

The easiest way to test the Core Web Vitals Score is to use the Page Speed Insights tool by Google. It’s super simple, just enter the URL you want to test and click on Analyze button.

core web vitals for wordpress 3

The test results are displayed under the section titled “Field Data” section.

core web vitals

Best Tools to Test Core Web Vitals for WordPress

You can also access the Core Web Vitals report in your Google Search Console dashboard.

Note: Always use incognito mode in Google Chrome for more accuracy in results. Otherwise, your browser extensions may affect the core web vital scores negatively.

How to Improve Core Web Vitals for WordPress Website?

Use Faster WordPress Hosting Provider

Without any doubt, your hosting provider plays the most significant role when it comes to your website’s performance. You always need a server optimized for WordPress that provides your website the optimal performance.

There’re many hosting providers which provide high-performance website on your budget but it’s always to use the best.

We recommend using Bluehost for most of the beginners, but if you’ve high traffic, I’d recommend you to go with FastComet or GreenGeeks. They provide SSD storage infrastructure with almost zero downtime on all servers along with several benefits including Daily Backups and Additional Security with all plans.

If you’re looking for a managed option to get rid of all tasks and just focus on the content of your website, there’re many managed hosting providers that might fit your needs and budget. For budget, managed hosting, we recommend using Cloudways with DigitalOcean droplets. If you want a premium option, there’s nothing better than Kinsta for the managed hosting provider.

core web vitals for wordpress 6
Kinsta Homepage

Kinsta utilizes Google Cloud Platform for their servers along with their in-house LXD-Container & Cache Technology which provides unmatched performance for your WordPress website.

How to Improve Largest Contentful Paint on WordPress Website?

Optimizing for Largest Contentful Paint is quite an easy task and can be done by following a straightforward process to achieve the best of your WordPress performance along with best practices:

  1. Setup Page Caching – Page Caching plays a significant role in the load time of your WordPress website. It signifies how quickly your website server responds to user requests. It helps in reducing the server response times (TTFB). Know more about TTFB. You can use WP-Rocket. It is the best solution for WordPress Caching and I use WP Rocket in all websites I develop. You can also use W3 Total Cache or WP Super Cache too.
  2. Server-Level Compression – Using Gzip or Brotli compression will reduce the page size and speed up LCP. Luckily plugins like WP-Rocket enable GZIP Compression automatically by adding Apache’s mod_deflate module to the .htaccess file in the root directory of WordPress, and W3 Total Cache includes an option to manually enable GZIP compression in the Browser Cache settings panel.
    Know more about GZIP Compression from Kinsta.
Enabling GZIP compression in W3 Total Cache
Enabling GZIP compression in W3 Total Cache
  1. Optimizing Browser Caching – Browser caching is one of the most important cache settings that should set the right option for the static files that your browser keeps in its cache to load the website faster when the user visits the website next time.
    Google PageSpeed Insights also recommend “Serve Static assets with an efficient cache policy“. WP-Rocket & WP Super Cache automatically utilizes this feature and enables the optimal expiration length.
  2. Optimize your CSS/JS Files- As you know loading unnecessary CSS/JavaScript files before the main content of websites causes an increase in overall loading time, which might affect your visitors and lead them to leave the website without making any conversions.
    WP-Rocket already offers minification & optimized load delivery of CSS/JS files of your website and also supports deferred loading for JavaScript files. If you’re not using WP-Rocket, you can use Autoptimize, another popular free plugin for optimizing the CSS/JS files of your website.
  3. Optimize your Images – If you’ve got a lot of images of your webpage, then those images could be could increase the LCP as well. Optimizing the images on your website will not only help you decrease your page size & load time, but it will also address many PageSpeed Insight’s recommendations such as “Properly Size Images“, “Defer Offscreen Images“, “Serve Images in Next-gen Format i.e. WebP“, and “Efficiently Encode Images“.
    I personally use and recommend Optimole for this task because Optimole not only optimizes images and converts them into WebP on their cloud, it also serves them from their CDN for faster delivery. That helps us to decrease the load of our server in case of heavy traffic and also saves our bandwidth. You can also use Imagify for image optimization.
core web vitals for wordpress 9
Optimole Homepage
  1. Preconnecting Important Resources – Preconnect lets you establish important third-party connection requests early. This allows the browser to load third-party assets like Google Fonts, CDN Requests to load them simultaneously along with the resources from the website server.
    WP-Rocket & Perfmatters offers a simple interface for adding “Preconnect” URLs to the website.

How to Improve Cumulative Layout Shift on WordPress Website?

CLS plays and important role in improving the Core Web Vitals scores of any website. Unlike improving LCP, improving CLS on WordPress is a little bit technical. Sometimes it requires you to get into the codes for the solution of any specific problem, but most of times it can be easily fixed using the plugins I’ve mentioned about.

  1. Always Include Width & Height in Images, Embeds, Ads, iFrames & Video Content: One of the simplest way to improve CLS is to include the fixed width and height to the images and video embeds in your WordPress website instead of using automatic settings.
    Plugins like WP-Rocket offers option to add missing image dimensions automatically to help prevent in CLS. You can add them manually from the block settings in Images, Videos & Embeds.
core web vitals for wordpress 11
WP Rocket “Image Dimensions” Setting in “Media”
  1. Optimize & Preload Web Fonts – It’s always wise to preload the webfont to address the PageSpeed Insight’s Recommendation “Ensure text remains visible during webfont load” and improve your Core Web Vitals score. It helps us to avoid two major font loading issues such as Flash of Invisible Text (FOIT) and Flash of Unstyled Text (FOUT). You can optimize these settings using plugins such as WP-Rocket & Autoptimize. You can also utilize Perfmatters for completely disabling heavy fonts and emojis including Google Fonts, FontAwesome & more.
    If you’re using a CDN, you can locally host your webfonts to serve more efficiently. You can also host Google Fonts locally using OMGF plugin available for free in WP Repository.
    Know more about Google Fonts Optimization at Meta box
Perfmatters
  1. Careful with Ads & Other Dynamic Content – You need to be carefully place your ad codes and always use the ad codes with specific dimensions instead of automatic containers, WP Rocket suggests not to dynamically injecting any content above existing content unless it’s in response to user’s action.

How to Improve First Input Delay on WordPress Website?

We cannot really optimize the First Input Delay (FID) completely for a WordPress website unless it is developed keeping FID in mind. Optimizing FID is most complicated of all because it entirely depends on the codes of website. So both theme & plugins are needed to be keep in check for a better FID.

Most importantly FID deals with execution of heavy JavaScript execution so that the browser can respond to user requests quickly without any slow down. So it is recommended to start with eliminating unnecessary JavaScript from being loaded, if possible. This will address the following recommendations by PageSpeed Insights:

  • Reduce JavaScript Execution Time.
  • Remove unused JavaScript.
  • Minimize main thread work.
  • Delay JavaScript Execution feature.

Most of these recommendations can be easily address using any of the plugins mentioned above especially by WP-Rocket & Perfmatters.

Some of the issues in FID can be fixed automatically when you optimize the LCP of your website. As for the LCP, Optimizing your code and images, server-level compression, and using pre-connect for loading important assets help in improving the FID score. Improving FID can be difficult sometimes when you’re not a developer. Google already has a solution for you on the Web.dev blog.

If you’re still unable to figure out your problem, you can connect with me directly on Instagram or Upwork for help. You can also join Hustle Hub on Discord for Community Support.

Tips to Boost Your WordPress Performance if Core Web Vitals Don’t Improve

Sometimes it happens that you’ve tried your hard luck but the results are not as good as you would have expected. Here’s my story when I begin blogging on this blog:

When I started this blog, I was using Phlox Pro as my primary theme because it’s a really beautiful theme, at least in the demo and it uses Elementor Page Builder to build pages but soon I found having a pre-made theme is a very bad idea. It’s enough good for static websites but when it comes to daily blog posts, it affected my SEO too much, then I decided to switch to Astra Pro in the Winters Last Year, since then I’ve seen a growth of 250% since then.

After that, let’s take a look at the suggestions that I will recommend you to improve your WordPress Performance likely over 200%:

  1. Use a CDN to Improve the Load Time of Assets: Content Delivery Network, most commonly known as CDN are third-party services that allow you to serve static content of your website from their multiple servers situated in different locations of the globe.
    Using a CDN allows users to download the static files including Images, CSS & JavaScript from servers closest to their location. In this way, not only it reduces the load on your website but also allows it to continue loading other dynamic elements that cannot be cached on CDN. It also helps in reducing latency and saves your bandwidth as well.
    Some popular CDN Services include:
    • Cloudflare
    • Sucuri
    • KeyCDN
    • StackPath CDN
    • BunnyCDN
What is a CDN
Source: CloudFlare
  1. Use an Optimized WordPress Theme- WordPress Themes serves a potential part when it comes to Speed Optimization and Asset Loading. As I described in my story, a bad theme can harm your website performance as well as SEO. It also affects the user experience in many ways. So, it is always recommended to use a speedy WordPress Theme. Some of the most popular user-friendly themes include:

Also Read: Best Themes for WordPress in 2021

  1. Only Use Essential and Lightweight Plugins, and Optimize their Performance- Plugins are the most favorite part that I like about WordPress. It is very common to use many plugins for WordPress. Most of the time, the majority of these plugins impact the front end of the website quite often because of their Javascript files. Even Contact Form 7 loads a JavaScript file on every page even it is not required. These are 100% unnecessary files! It is recommended to use plugins only on dedicated pages.
    Perfmatters‘s Script Manager feature allows you to filter the requests made by other plugins to reduce the requests for the website, it enables your plugins to load plugin files only on relevant pages.
  2. Use Best Practices of Your Page Builder- If you’re using Page Builder like Elementor or WP Bakery, it is necessary to optimize your Page Builders for Asset Loading and always use best practices so that it doesn’t affect your website load time too much.

Conclusion:

Start Optimizing Your WordPress Website Today…

With all the said, I hope you’ll consider all these recommendations for speeding up your website performance. Now you know almost everything about Core Web Vitals and also how they affect performance. Let’s see how you manage to get your Core Web Vitals scores improved. If you have any queries comment down below. See you guys in the next one…

Resources to Know More:

Leave a Comment

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

Scroll to Top