Core Web Vitals for WordPress: How To Get A Good Score

September 12, 2021 | By Mfon Abel Ekene | No Comments
September 12, 2021
By Mfon Abel Ekene

No Comments
The number one factor responsible for the server response time is your web host -- Mfon Abel Ekene
Tweet

Google has announced that the roll out of the Page Experience update is now complete. Now it's time to ensure your WordPress website's Core Web Vitals are healthy.

Core Web Vitals via page experience is now officially a ranking factor in Google Search. And from what is known, it will gradually play a big part in SERP because user experience matters.

Core Web Vitals is meant to care for user experience. And Google gives a big priority to user experience. If you also care about user experience, you should not just optimize your site for Google but do it to offer a better experience to your users.

The important Core Web Vitals metrics

Let's have a look at the 3 metrics that make up the core web vitals.

First Input Delay (FID): FID measures how long it takes for a site to respond to user interaction. For example, a user types in your website on a browser, or a user clicks a button on your site. That is an interaction. We can all agree that as a user, we want faster interaction with web pages.

Largest Contentful Paint (LCP): LCP measures how long it takes the largest image or text block on the above-the-fold of a web page to load. Please note that it measures just one element, either an image or text block, depending on which is larger. We can all agree that no one likes it when images take forever to load.

Cumulative Layout Shift (CLS): CLS measures changes in layout on the screen. For example, if you are reading an article then suddenly something appears and there is a shift in the layout, and you have to scroll down or up to find where you were reading. We can all agree that it is a terrible user experience

3 key factors that affect Core Web Vitals

Here are some well-known factors that affect Core Web Vitals

Ads: Ads are good for making money but they can have a thing or two to say about core web vitals. Most ads from ad networks add third-party assets like images and js to your website that you cannot control. Most times, these assets are not optimized. And they can affect LCP, FID, and CLS.

Server response time: The faster your server responds, the better. If your server response is slow, there is no way you are passing FID, and it can affect every other metric.

Unoptimized JS and CSS:  JS and CSS help in making websites attractive to the eyes. JS helps in adding important functions to websites such as search box, subscription box, scroll to the top, and many key features implemented in WordPress. CSS helps in styling, making everything look good, from fonts to colors and more. But when they are unoptimized, they can affect all core web vital metrics.

ABOUT THE AUTHOR
Mfon Abel Ekene
I am a Tech enthusiast, I am amazed at how tech has transformed the world. And I also imagine what it will be like in years to come. I not only enjoy using tech, but I also love talking and writing about it when I can. The world will be a better place if we share valuable information every day to help others. So I wholeheartedly believe in impacting and changing the world for good through information sharing.
Free Resource

Sign up for our newsletter

Receive our monthly round up of what's new with WordPress.

Spotlight

Want faster, scalable & more reliable WordPress sites?

Convesio is not just another hosting provider. Our infrastructure was designed from the ground up for hosting high performance, scalable WordPress sites.

30 DAY FREE TRIAL

How to pass Core Web Vitals for WordPress sites

1. Use a fast web host

Like I have mentioned, server response time also known as Time to First Byte (TTFB) can affect every core web vital metric. The number one factor responsible for the server response time is your web host. The stacks they are using matters a lot.

While a fast server response time does not guarantee that you will smash core web vitals, it provides the right foundation to do so. Without the right foundation, everything else may not give desired results. The faster, the better.

So, ensure your web host is fast and that they are using a good tech stack.

For example, at Convesio, they spare no cost to provide the highest available hardware and software to power their platform. Which is why they intergrate Cloudflare Enterprise features to boost performance. That means users get a solid foundation to build a fast and Core Web Vitals-friendly website.

2. Use server-based cache

WordPress blogs and WooCommerce are mostly dynamic not static. This means items on a site keep changing. Since these changes are regular, and for every visit queries have to be made to the database, and so on, caching is used to give that static feel. Object caching can greatly improve database queries. And page caching can improve front-end rendering.

While caching can speed up WordPress websites, there is a big issue, it is known as cache-hit-ratio. How many users are getting served via cache?

The real-world data of core web vitals are collected from Chrome User Experience Report (CrUX). And it is not every chrome user that is part of it. Only those that have "opted-in to syncing their browsing history, have not set up a Sync passphrase, and have usage statistic reporting enabled." So out of 1000 users that visit your site a day, only 40 may account for the real-world data.

So having a higher cache hit ratio is important. While caching plugins are good, the problem is the hit ratio. Using a server-based cache gives a significantly higher cache hit ratio. This increases your chances of serving cached content to the users contributing to your real-world core web vitals report. Remember, lab data does not count.

If your web host does not offer server-based cache you can use Cloudflare to give your site a higher cache hit ratio.

Generally, a server-based cache is more efficient than plugin file-based caching. Most especially when you have a lot of concurrent users.

3. Use a fast and lightweight theme

WordPress is open source and has a very large community. By far the largest community of any CMS. While this is a good thing, it can also have a bad effect. For example, there are so many people developing products for WordPress, products like WordPress themes. And these developers have different experiences and motivations.

There are so many badly coded themes in the WordPress community that are heavily bloated. Using such themes can frustrate your effort to speed up your site for core web vitals. A bad theme affects TTFB and every metrics core web vitals metric.

Ensure that you look for a well-coded theme that follows all the generally accepted best practices of Google. And it is lightweight, not bloated.

A tool like Yellowlab.tools can help you test the demo of any theme to see how it performs taking into account the best practices out there.

4. Remove unnecessary plugins

While plugins are not a bad thing, using badly coded plugins can do more harm than good. Plugins add to the number of requests when a user visits your site.

The ideal solution is to use only necessary plugins. And also look for the most lightweight and well-coded plugin for every need. Remember, the popularity of a plugin does not mean it is best for the purpose.

5. Optimize JS

Optimizing JavaScript (JS) will greatly improve all your core web vital metrics. If you have ever tested your website on tools like PageSpeed Insights or Web.dev and you get a "eliminate render-blocking resources" warning, it was most likely caused by JS.

You can remove the comments and white spaces to reduce the size of a JS file. Deferring the loading of non-critical JS will also help.

Some plugins can help achieve this, an example is Autoptimize. While we recommend you use a server-based cache, some caching plugins have features that can achieve this and more. An example is WP Rocket and WP Fastest Cache. If you use a server-based cache, you can turn off their caching feature and use the optimization features.

6. Optimize CSS

"Remove unused CSS" is very common advice when you run your website through Google PageSpeed Insight.

When a user visits your website, the browser will first load and execute all CSS that is referenced in your site's header before rendering. If there are too many of them, it can slow things down.

Some plugins load their CSS even on pages that are not needed.

You can generate critical CSS for your pages, this will eliminate all issues caused by CSS and only the critical CSS will be first loaded by the browser.

Removing white spaces and comments can reduce the file size. And you can remove unused CSS for your pages with a free plugin like Asset CleanUp.

7. Use a CDN

The internet is global. Unless you restrict access to your website to a particular region, you will get users from all around the globe.

While your website might be hosted in your country and loading fast there, you might have users in countries that are over 10,000 kmcaway from you, contributing to your Core Web Vital score.

Using a Content Delivery Network (CDN) ensures that your website serves fast around the world.

If you have users from different parts of the world, you will see a lot of improvement in your page speed and also offer a better user experience.

8. Optimised ads placement

Ads above the fold will affect your LCP and CLS the most. The images in the ads can count towards your site's LCP if it is larger than all images or text blocks above the fold. And the problem with images served on AdSense and similar Ad networks is that you cannot optimize them. And they may be unoptimized. It is out of your control.

If it will not impact your revenue, consider removing ads above the fold most especially for mobile devices.

Also, using responsive ads above the fold will affect CLS as there will be a layout shift when it loads. You can overcome this by setting a minimum height attribute to the ads. This will prevent a layout shift.

9. Lazy loading Images

Images contribute to the size of your page. The larger your page size, the longer it takes to load.

Lazy loading images will ensure that images only load when needed, as a result, will reduce your page size and improve load time.

You may have seen the warning "defer offscreen images" in speed testing tools. It is simply telling you to lazy load images.

10. Set attribute to images

CLS happens when there is a layout shift. For example, browsing your homepage and suddenly an image loads, the page becomes bigger and the part of the website you were reading is now out of view. That is a layout shift.

Setting size attribute will reserve that size on page load. So that when the image finally appears, there will be no layout shift

11. Optimise your font or use system font

On LCP, the time it takes your text block to load may count. So if the font you use takes too long to render, it may affect your LCP.

Also, third-party fonts add extra requests.

Try and optimize your third-party font like Google Font or Font Awesome by pre-connecting. You can also opt for system stack font which is native to your user's device and makes no external request.

12. Use DNS Prefetch

If you rely on a lot of third-party services for different functions on your website, then you should consider prefetching their domains to reduce DNS lookup.

Examples of common third-party services are Google Analytics, CDNs, third-party fonts, Facebook/Twitter/Instagram embeds, and so on.

13. Learn from others

You can have a look at websites in your niche that have passed core web vitals and see what they are doing right. Learning from others is part of growth. With PageSpeed Insight, you can be able to see if a website passes or not.

Don’t get discouraged, take a look at lists of websites that passes core web vitals to draw inspiration. You can look for sites in your niche and see what they are doing right.

Comments

Be the first one to comment.
Have your say

Leave a Reply

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

Copyright 2021 © Convesio