How to Optimize “Core Web Vitals” For Your WordPress Sites
If you are looking to optimize “Core Web Vitals” for WordPress sites with tried and tested approach, then you'll love this post.
As you might be aware of Core Web Vitals is going to be a ranking factor in 2021, it's the right time to improve Core Web Vitals on your WordPress sites.
Without wasting much of your time, here are is my approach to optimize “Core Web Vitals”.
Optimize Core Web Vitals in WordPress
The Core Web Vitals is measured based on the user experience of loading, interactivity, and Visual Stability and Google characterize them into three metrics:
- Largest Contentful Paint (LCP) – Measures initial load time and LCP should occur within 2.5 seconds
- First Input Delay (FID) – Measures interactivity and should be less than 100 milliseconds
- Cumulative Layout Shift (CLS) – Measures final visual stability which should be less than 0.1
Google collects data from real users visiting your site and puts the data for the measurement of Core Web Vital. Apart from it, you can use tools like PageSpeed Insights, Chrome Audits, and Search Console reports to monitor how your WordPress sites performing for users.
By improving LCP, FID, and CLS scores, we can achieve the best results just like how we did below. If you are looking for more detailed guide, here is our link to other post
Here is our simplest way to improve Core Web Vitals and below are the four mandatory metrics that need to be improved first.
1. Reduce TTTB to improve Server Response Time
Time to First Byte as name suggests, it is the time taken by the browser to receive the first byte of data from the server.
Lower the TTFB, faster is your servers.
Since TTFB is the base to improve LCP which is the base to improve Core Web Vital, you can understand how important the TTFB is, and choose the best TTFB Hosting based on your budget.
Here is how our site loads with less than 50ms TTFB on 14 global locations and Use this tool to check your TTFB and Google recommends less than 200ms to be good.
By a rough calculation, the TTFB value of less than 1000ms can be optimized with the below techniques and if the TTFB is more than 1seconds, then definitely you need to change and choose Fastest WP Hosting.
2. Optimal WordPress Cache Settings
For this tutorial, I'm using WP Rocket as they are the #1 caching plugin for WordPress. Once activated, Check Cache Tab and enable this option.
Just leave Minify {HTML, CSS & JS} in the plugin as we are going to do the same on CDN which is usually faster. Now enable “Combine Google Fonts Files” and “Remove query strings from static resources”
By combining Google fonts, you are reducing HTTP requests.
Under Media, LazyLoad images,iframes and Videos. Also, disable Emojis to reduce HTTP requests.
Head to Prefetch.xyz and enter your site and get the list of domains that can be prefetched from your domain. By doing so, the number of HTTP requests will be lowered and your load time gets improved.
3. Use Paid CDN
In my LCP post, I recommended Cloudflare free version is better than the paid version. But I was wrong. The free version is good but Cloudflare doesn't use all their POP locations for free users.
One case, I found here, Cloudflare uses Singapore POP to deliver content to Indian visitors, although they have more than seven POPs in India. Just like that, Cloudflare uses some limited POP locations to deliver content in the EU & US.
This causes some latency issues and going for a paid option of $20/month is necessary. But the pricing is costlier and you can host only one domain. Luckily, I found StackPath costs just $10/month that also allows unlimited sites hosted which is the real deal. StackPath promises “All Global PoPs Included” while Cloudflare provides preference to Enterprise > Business > Pro > Free customers.
4. Remove Unwanted Slow Loading Plugins
This should be the first and foremost thing, I do while acquiring a new client. I just ask them the list of plugins they're needed the least and remove them without mercy.
Why? Both plugins and WordPress to blame. Suppose you're using a plugin for some particular function on a single post, then WordPress loads all their scripts on all the pages, thus increasing a huge list of scripts loading even we don't use it.
Apart from it, once is every few months, you need to audit your site and remove plugin load time and considering replacing resource-hungry plugins on your site.
Install Query Monitor and it does the job of showing which plugin causes your WordPress to load slow.
5. Use Image CDN
CDN for the site and again CDN for images? Yes, both are different. Most CDNs minify scripts like HTML, CSS, and JS and store them locally on all POPs to improve load time.
But image optimization is something else. The purpose of Image CDN is to deliver adaptive images based on the user's browsers. All your images come with a default size and it doesn't fit well on screens, thus affecting load time and also affects Cumulative Layout Shifts.
To solve this issue, Image CDN is the lastest developed in the web industry which does
- Deliver adaptive images.
- Load images from Global CDN location
- Loads images only in viewport
- Automatically converts images to WebP
WP Compress is one such plugin that uses Google CDN to deliver images across the globe and also does all the things mentioned above. Here is my WP Compress dashboard. There are few more plugins like Optimole in the market but WP Compress is perfect for the job.
6. Remove unwanted JavaScripts
JavaScripts is the only element that needs to be improved for optimizing your sites for First Input Delay. The FID measures the time taken between a user's first interaction in the page to the time taken by the browser to respond to the interaction.
Taking a quote from my earlier post
In simple words, when you visit a page, the text gets visible first followed by other elements. Even though texts are visible, you won't able to scroll the page or zoom images or click any elements that are powered by JavaScripts. After a few times, these elements will be available for interaction. FID measures the time period here and it should be less than 100ms.
The first and foremost thing is to remove unwanted JavaScripts before going for any optimizations.
Load your site URL in Incognito mode and Click Inspect Element, look into the Network tab. Now select JS and Chrome lists all the JavaScripts loading on the page. Here is one of our competitor sites.
When you hover, Chrome shows the JS which takes a long time to load. Just remove them or replace them with similar lightweight plugins. Below is our perfect JS usage, we only use the most essential JS for the site.
7. Reduce JavaScript Execution
Each plugin and page builders inject a lot of JS on all your pages. TablePress is a great example where I used them only on three posts but their JS is loading on more than 100 pages on our site, thus desperately increases the load time. Now, we are going to reduce the JavaScript Execution by loading only the needed JS.
You can use PerfMatters or WP Asset Clean up and it does the job for you. Load any of your pages and Click on Script Manager. With the new window, the plugin list all the CSS/JS loaded on the page and you can simply turn off whichever is not needed.
8. Minify and Compress JavaScript
By Minifying and compressing JavaScripts, the JS size will be lowered and loads faster. With the below option in WP Rocket, it reduces white spaces and comments to reduce file size.
9. Defer Parsing of JavaScript
With WP Rocket “File Optimization” tab and enable ” Load JavaScript Deferred” and select “Safe Mode for jQuery” to defer parsing of JS.
10. Optimize Cumulative Layout Shift
How many times you try to click an element but ended up clicking something else?
Most sites that display ads use this trick. You might have planned to click a button and within some milliseconds, a new display ad will be shown and you might clicking it accidentally.
This is frustrating and happens when the visible button is moved in order to allow the loading of display ads. This may be either intentional or unintentional, it affects the Cumulative Layout Shift Score.
The CLS measures the instability of the content and measures the layout shifts on a page during user interactions.
Here are few things you need to take care to improve CLS.
- Add Dimensions to Images, Ads, Embeds & iframes
- Lowering the presence of Dynamic Contents
- Actions waiting for a network response before updating DOM
Google says Response Design causes such issues. Earlier, the images are mentioned with proper “height” and “Width”. To fix this issue, Google recommends adding “height” and “Width” now and with WordPress, you don't have this issue as most themes specify the image aspect ratio, so layout shift won't happen.
Google also recommends putting a Reserve space for ads, so even if the ads load slower, the layout shift won't happen and the same applies to embeds and iframes.
Unlike optimizing for LCP & FID, CLS requires to check the website manually to identify the exact issues. You can use any of the tools like WebPageTest, PageSpeed Insights, or Chrome Audits to identify the same.
If you are using Google fonts, someone visits your site, a request is made to load fonts from a third-party source.
During this time, the site tries to load fallback font which is present in your site and then loads the new font later and this causes layout shift.
Use the OMGF plugin which not only helps to host your fonts locally but also preloads fonts.
Wrapping up
This is our very first copy of optimizing Core Web Vitals for WordPress sites. You can refer our individual posts of LCP & FID which comes with a more detailed approach to improve your Core Web Vitals Score.
Since this is an evolving topic, expect me to update this post multiple times in a week with the most accurate, your go-to guide to optimize Core Web Vitals.
