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.
