Last updated - May 25, 2022
Most beginner bloggers start their blogging journey from cheap hosting (Hostinger is something we recommend if you are starting a new blog) services. There is nothing wrong with that as long as your site works fine with minimal timeouts and good enough average response times but what makes your site slow is the number of plugins you use and the theme you choose.
Well even if you are using a heavy plugin or theme you can still manage great improvements on page speed insights which is OK. But you want to pass the core web vitals so, by the end of this article, you will know how to pass the Core Web Vitals Assessment on PageSpeed Insights.
If you do not want to waste time on optimizing your website for Core Web Vitals, you can outsource it and focus on things that matter more like sales, CTR, ads revenue etc.
What are Google’s Core Web Vitals Metrics?
These are the metrics:
LCP element: It is the largest content element painted within the viewport (the first largest element that a user sees as soon as your website loads). Target: 2.5 Seconds or Less.
CLS: It is related visual stability of elements on your website.
eg: Any element pushes the other elements as it loads (because necessary JavaScript and CSS on your site loads after some time).
Target: Less than 0.1.
FID: It is the time your website takes to accept the visitor’s first input.
Target: Less than 100 ms.
Note: 75% of your traffic should get a good page experience and since Google collects the aggregate data over 28 days. If you are adding heavy-weight plugins, that may still affect the results.
Some backup plugins can make your web server go down (503 or 504 error) or response times get bad (takes 700 ms+ to respond to a request) when backing up your site or doing some other heavy task that puts too much load on your database application. If this happens, you need to upgrade your host (RAM is not sufficient). Bad response times add to your page speed field data and drag your website into the “poor” category.
Note: You can hire a professional for optimizing website speed. I will cover just basic speed optimization in this article.
1. Use a caching plugin
It is the easiest thing you can do to pass core web vitals but most of the bloggers use free cache plugins that do not give the same performance as some premium plugins like WP Rocket.
Most of the free cache plugins cannot handle the high requests (visitors) per second as WP Rocket or LiteSpeed cache (with minimal timeouts and low average response times).
Settings of cache plugin can also impact your performance, so read this article and find out what options you should or should not use.
For example: Enabling delay js might load your ads after all the styling elements are loaded which might hurt your ad revenue. You can exclude your ads from delay js just put ‘adsbygoogle’ in excluded javascript files like shown in the image below:
2. Use Asset clean up or perf matters
Have you ever thought about why this javascript of a form plugin or any other plugin is loading on posts where you are not using it? If yes then I have something here that you could use.
Asset clean-up allows you to Unload that specific javascript or CSS from a single post or sitewide (helps in passing for audits like “Reduce unused JavaScript”, “Reduce unused CSS”, “Eliminate render-blocking resources”).
It works flawlessly with the WP Rocket cache plugin.
Related
How to remove unused CSS using asset clean up.
3. Migrate or upgrade your hosting
Were you happy with your host when you started hosting your website? But recently you just realized their performance just got degraded as your website started to grow.
Then maybe you are on cheap hosting and your server location is far from your visitors and you might not using CDN then you have two options. Either use a CDN or migrate your host close to the country you are getting the most traffic from. If you get a server in the targeted country then you can see a huge difference in your site speed.
Most cheap hostings use apache server technology which can handle 160 requests (visitors or traffic) per second. This can be a huge issue if are getting more than 100K visitors per month, and if are getting tons of timeouts then go for digital ocean or Vultr Openlitespeed server, they can save a lot of money on CDN (no need for a CDN if your server location is close to a location you are getting the most amount of traffic), and provides even better performance. Use Bunny CDN or Amazon CloudFront with these hosts if you like.
Use a load balancer whenever you want and no need to migrate frequently from one host to another.
Note:
Want a managed Digital Ocean, Vultr, AWS hosting?
Then Use Cloudways. Since they are managed hosting-provider, upgrading your PHP version or enabling object caching is way easier than on Digital Ocean or Vultr unmanaged hosting. Also, the chat support of Cloudways is something you do not get most of the unmanaged hosting services.
Openlitespeed is a free version of the LiteSpeed server technology. Server location can make a huge difference so choose your server location wisely.
If you are getting more than 100K visitors per month and your host can’t handle it (your response times got worse and you are getting tons of timeouts), then migrate your host or upgrade your plan ASAP. A CDN alone won’t help much.
4. Find Lightweight alternatives
So, migrating your host did not help much then analyze your post on page speed insights and see what is causing CLS or LCP issues. In most cases, you can easily find out which plugin is causing the issue.
So let’s say you found that you failed for the “Eliminate render-blocking resources” audit. Now you can Prefetch these requests in wp rocket(Prefetch example for external URLs like this.
“https://google-analytics.com” put these URLs in the prefetch DNS request section of WP Rocket (it will look like this after you save the settings //google-analytics.com)) and if you are using the right settings (for example Load JavaScript deferred) of WP Rocket, you might not get this error. Well, let’s say you tried every setting that could solve this issue, but there’s no improvement then you have to find alternative lightweight plugins.
Now how will you know which plugin is causing the CLS or LCP issue?
Just click the audit you want to pass for and see the list of URLs
Click each URL and mostly you will get something like this wp-content/plugins/elementor/(just an example).
You can easily identify using the URL or let’s say you got something like this wp-includes/js/. Now, to solve this kind of issue check asset clean up’s Site-wide common unloads tab in asset cleanup settings and unload jquery migrate and some other items. There is a learn more button under every audit just click on it and find more about how you could clear that audit.
5. Use a CDN
A CDN is a service that can help you improve your response times and reduce latency worldwide. Delivering your HTML, javascript, CSS, images, and other assets through CDN reduces the load on your server. You might be wondering why Cloudflare’s free plan performance is better in the US but not equally good in India.
That’s the only reason why you should not use free CDN (if performance is not good in your targeted region). AWS CloudFront and Bunny CDN perform better in India and bunny CDN is even cheaper than Cloudflare’s premium plans.
Note:
You can use CDN and load balancers together it won’t cause any issue.
Right CDN and server location can get you “Core Web Vitals Assessment: Passed” even if your lab data is red and your score on PageSpeed insights is less than 50. (For example TechRadar and PC gamer). So hire a professional for choosing the right hosting and CDN (might help you pass core web vitals without sacrificing your site elements, plugins and theme).
6. Stop using heavy page builders
Well, the performance of most of the page builders have gotten better than before (developers removed a lot of bloat from their page builders) but is still not good enough to get “Core Web Vitals Assessment: Passed” on Google PageSpeed Insights and to make the matters worse the page builder addons made by 3rd parties drag your site.
And if you think your page builder and some addons are the only culprits left then you have to remove your builder and start using lightweight alternatives like Gutenberg blocks with Kandace blocks and some other addons. Before finding an alternative try to find what developers of your page builder are doing for optimizing their page builder. For example, Elementor and Divi have improved a lot and they are continuously putting their best efforts to improve their page builder’s performance.
7. Use image optimization plugins
If your LCP element is an image then you should optimize your images (reduces the size of images without any loss of image quality). You can use Webp image converter plugins that can serve your images with the same quality but lesser image sizes (for example 2 MB image to 300 KB). Let’s say this can help you save 500 ms, which means if your LCP is 2.9 then you can drag it to 2.4. And you can pass for core web vitals assessment without much effort (considering you passed for CLS).
Bonus tips:
If you are now in yellow but still did not get green on page speed insights then you have to follow this. The field data of page speed insights updates after every 28 days so if your lab data is good then there is nothing to worry about. Just run the Gtmetrix speed test and choose the test server location where your website gets the most traffic from. If you get LCP less than 2 seconds and CLS less than 0.1. Then there is nothing to worry about, If 75% of your traffic gets a good page experience then only your server and CDN response times can affect your performance now.
Now let’s solve your LCP issue
If you do not want to remove any plugin that is causing any javascript-related failed audit then you can remove your LCP image, video, Form, etc. from viewpoint of desktop and mobile devices like this tech blog. Now make sure the first Largest element that a visitor sees as soon a visitor visits your post or page, is a heading or paragraph. Google page speed insights show your LCP element under DIAGNOSTICS heading as “Largest Contentful Paint element”
Now here you need to find out what the web page’s LCP element is. I recommend you make a heading or paragraph as your LCP element as the text faster than other elements on any kind of site(HTML content is given more priority(loads before anything else) than any other element when the web page loads.)
As I mentioned before server technologies can have a huge impact if you are getting lots of traffic then choose Litespeed or Nginx hosting and get ready to be amazed. Litespeed server technology has the capability of serving thousands of clients simultaneously with the minimum usage of server resources such as memory and CPU.
Let’s solve your CLS issue
Solving the CLS issue is kind of tricky. You have to remove an element that is causing the CLS issue or remove it only from the viewpoint(might work in some cases). Otherwise, there is nothing you could do you have to find an alternative plugin or HTML and CSS to fix it.
So let’s say an advertisement is causing the CLS issue. Now what you can do is reserve the space for that ad as it loads. You can use a plugin to do that.
HTML for reserving space
<div style="width: 100%; min-height: 280px;">
Put your ads code here
</div>
You can change the minimum height and width according to your needs
Here is another code:
<div style="width: 300px; min-height: 250px;">
Put your ads code here
</div>
You can also put your shortcodes and images in it. WP Rocket also has a setting for reserving space for images (Enable: Add Missing Image Dimensions”)
Logo causes CLS issue: Logo of your website can cause CLS issue (reserves space for your logo which pushes Navigation menu items) when lazy-loaded. So you have to just exclude your logo from lazy loading.
Video player or image Slider causes CLS issue: To resolve this issue find a video player alternative plugin or use some Html to solve this issue.
A Few More Tips
Ignore “remove unused CSS”,” use passive listeners to improve scrolling performance”, and “avoid using excessive DOM audits”: “Remove unused CSS” is very tricky to resolve if a deleted plugin left unused CSS on your website.
Asset cleanup and some other plugins might help but you might still be left with some unused CSS in the end, but you need not worry about these audits as long you pass the core web vitals. And wp rocket is working on the “Remove Unused CSS” setting that can help you pass this audit but it’s still in beta mode.
Use amp: If you want you can use the amp to improve your core web vitals on mobile devices.
Optimize fonts and do not use too many fonts: preload the fonts that you use on your site and try to use as less number of fonts as possible. Host the fonts locally. You can use asset clean to preload google fonts or locally host fonts.
Enable object caching and server-side caching
Enabling object cache helps in improving the load times of dynamic content(content that keeps on changing like WooCommerce or larger, complex websites )on a website. It stores the dynamic content in memory using a key-value-based storage system. Fetching dynamic content from R.A.M. is faster than fetching from the database.
Server-side caching helps in executing all the necessary database operations once and serving the same content to lots of different clients. It will help in reducing the load on your database application. Don’t worry it won’t serve stale content just set the server-side cache life span to 1 day.
Note:
Keep your PHP version, plugins, and themes updated, this can give a slight boost in performance.
WooCommerce
For Woocommerce users use the Disable WooCommerce Bloat plugin which helps in removing a ton of bloat added by WooCommerce and disables WooCommerce scripts/styles related to non-eCommerce content.
Final tip
Try to reduce your web page sizes(target less than 500 KB) and use delay JS whenever possible. Now For fixing FID and the remaining audits or items, read this article.
Final thoughts:
By now you must have got enough information to pass core web vitals and I am sure you have at least made your website come out of the red. (If you are in yellow you know what you need to get green. )
Now passing the core web vitals assessment won’t improve your ranking much but if your website is “poor” in the core web vitals assessment then you can get a huge drop in rankings over time.
