Sign up for our newsletter
Receive our monthly round up of what's new with WordPress.
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.
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
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.
Receive our monthly round up of what's new with WordPress.
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
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
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.
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.