Core Web Vitals is currently the topic of trend (and headache) among the blogging and SEO community. It is a part of the page experience update rolled out by Google in June and July of 2021.
While many SEO professionals claim that core web vitals aren’t ranking factors on Google SERP yet, I beg to differ!
I started ranking on more than 200 keywords
In this case study, I will show you how I passed the core web vitals metric on my pet-related website ‘Petfather.in‘. And when I say that, I don’t mean lab data.
Yes, I passed core web vitals on field data and mobile view. That too, on an image-heavy article. The article being tested contains 23 images of cats!
Ok, it is not so big deal. Many websites pass mobile core web vitals easily. But the caveat is, the field data is solely based on the visitors’ experience. How good is the content loading on visitors’ mobile?
In India, most mobile users have pretty slow internet connections. Hence, webpages often take a very long time to load fully, effectively screwing up your core web vitals statistics. So yes, if most of your visitors are from countries that have slow internet, the CWV stats of your website will suffer.
And about 97% of the visitors to the Petfather website are from India.
I use shared hosting and no premium cache plugin has been used.
Still, I managed to pass the core web vitals on mobile. The proof is here.
Google Pagespeed insights results:
How I did that? Well, please read this article till the end.
What are Google core web vitals? a short recap
Well, the three components of core web vitals are:
Largest Contentful Paint (LCP)
In layman’s terms, LCP is the loading time taken by the element in your webpage that covers the most part of the screen (in terms of maybe, pixels). For most cases, it is the image(s). But it can also be a font, a big header, a giant pop-up, or ANYTHING else!
The goal is you need to load that element as fast as you can.
Google is pretty clever here. When you are optimizing LCP loading time, you are basically trying to load the biggest element as fast as possible. Naturally, all the other elements will load faster, helping Google to render the webpage as soon as possible. Yes, speed is the key!
First Input Delay (FID)
I remember our college days when we had to wait for about 10 seconds (not joking) after clicking something, or add something to the Amazon cart, to wait for the browser to complete that task.
Thankfully, this isn’t the thing now.
The user’s device and internet connection play the most important role. FID isn’t even lab data, it’s all about the field data. In page speed insights, TBT is the lab equivalent to FID.
You can control this with some tweaks on your website. We will discuss this soon!
Cumulative Layout Shifts (CLS)
I remember an incident. I was filling out some form online, and when I went to preview the submission, the whole webpage suddenly sort of fluctuated/went down and I ended up pressing the submit button. Turned out there was an error in the submission, which eventually led to the rejection of my application.
I am pretty sure most fellow here has experienced this kind of thing more or less. This type of incident where the whole webpage is not stable and moves up and down randomly is known as cumulative layout shift (CLS).
Most of the time, the culprit is an ad popping up, an image suddenly appeared and pushed the other things down, or any other issues.
In my opinion, CLS is the biggest culprit that can ruin the user experience. People will never want to visit your website again if your website made them click the wrong button!
I have managed to remove all kinds of CLS on my websites. See the image above, the CLS is zero.
Basic configurations to pass Core Web Vitals?
Not only on Petfather, but I also use more or less the same strategies on all the websites I own/manage. The other websites pass pagespeed insights lab tests with flying colors, but they don’t have the SEO traffic necessary to generate field data. Once I get their field data as well I will post it here.
Your Web Hosting affects Core Web Vitals
Your hosting plays a crucial role in the LCP and FID metrics (it doesn’t affect CLS). This is intuitive. If your hosting is fast enough, it will render your webpage faster. Hence, the LCP element will also load faster. A similar argument applies for FID too, but FID needs a bit more tweaks.
The content delivery network (CDN) you use also plays a great role in LCP and FID. Later on that.
I use Hostinger Litespeed shared hosting. It may sound surprising to you but, I use a shared hosting from Hostinger and still passed core web vitals.
Yeah, you do it too. This post is all about that!
Hosting with Litespeed Web Server
Almost all (I don’t know exceptions) web hosting out there predominantly uses Apache, Nginx, or Litespeed webserver. While Apache is a little backdated and Nginx is a beast, I prefer Litespeed for multiple reasons. Litespeed webservers are lightweight and can handle larger concurrent visitors.
With Apache or Nginx, you will need WP Rocket, which is a premium plugin. With Litespeed, you can just use the built-in LS Cache plugin and it can outperform Apache or Nginx easily.
Also, you get QUIC Cloud CDN free with LiteSpeed web hosting (Hostinger in my case), which has a monthly free tier that is sufficient for small websites, and you can even recharge after the free tier is over with a nominal cost.
CDN-Switched from Cloudflare to QUIC.Cloud
If you get visitors from all over the world, you must use a CDN (content delivery network). There are plenty of good CDN providers out there, and Cloudflare is among the most well-known among them. But I had to move away from Cloudflare as my CDN to QUIC Cloud CDN.
Read: Why I moved away from Cloudflare
Current DNS-Hosting-CDN configuration:
I use Cloudflare as DNS provider (proxy off), Hostinger shared hosting, and QUIC.Cloud CDN. The result is a very fast website.
Choice of WordPress theme on CWV
Ok listen, I am an advocate of minimalism. Pretty sure Google also likes web pages to be junk-free and non-bloated.
Your hosting may be ultra-fast (such as Closte.com or Servebolt), but Google’s aim is clear here: it wants to save the data cost of the users.
Hence, your WordPress theme must be as lightweight as possible. That’s the reason I chose Generatepress after all my initial confusion.
I like Generatepress for multiple reasons. I found that this theme has the lowest number of external requests on the Pingdom tool. It also has minimal CSS. Many bloggers and speed experts regard Generatepress as the fastest, SEO-friendly theme out there.
Read more about it in my Generatepress Review.
I use 23 plugins on Petfather! Well, any WordPress speed expert will call me insane for that. But, I can’t do without those plugins. Check out the list of plugins I use.
Tweaks I use to pass core web vitals
After getting right the basic WordPress configurations listed above as the foundation of my website, I had to apply these small tricks to pass the core web vitals.
Image optimization for CWV
I compress each and every image down to ~20 kB before uploading. I don’t use any image compression plugin for that.
I use webp images on that website. I always rely on the LS Cache plugin to do that for free on the QUIC cloud server. Go to LS Cache settings-Image optimization settings-Create WebP Versions ON-Image WebP Replacement ON.
Also, lazyload all the images. Go to LS Cache settings-Image optimization settings–Media Settings-Lazy Load Images ON.
In the Media Excludes tab-write the URLs of the page logo, hero image, above-the-fold images, etc.
My tip: I never put any images in the first 2-3 paragraphs, which are referred to as above-the-fold. That way, I don’t have to worry about above-the-fold images causing LCP issues and CLS (due to lazy loading on).
This small trick helps me to get rid of the images being selected as LCP. My LCP elements are always some text or headers (Proof-Webpagetest.org results).
Optimizing the LCP element
Now, the image is not tagged as the LCP element which solves half the problem. In the URL being analyzed (also the same for all other pages), the post header is being picked up by the browser as the LCP element. Now, this is very easy to load fast.
In Generatepress customizer settings, I choose ‘system stack’ as the body font and choose ‘inherit‘ for all the other options. This way, the browser never requests any external fonts, which dramatically speeds up the loading time. The H1 font size I use is 36. Don’t use more than that.
I don’t use any Google fonts. I always make sure that the plugins I use always load default theme fonts, not any Google fonts.
Read more about Generatepress best customization settings!
For me, this is the easiest.
- I don’t use Critical CSS-it is the number one culprit for CLS.
- I exclude above the fold images from lazyloading, which is, in my case, the website logo. I don’t use any other images in above the fold.
- Use LQIP feature in LS Cache plugin. What it means is, it will replace your lazy-loaded images with some very low sized blurred images. This will prevent shuffling on the webpage while images are lazy-loaded, with keeping loading speed intact.
- I use default system font in generatepress. This way font-swapping and/or FOIT can be avoided.
- While I still don’t use adsense on the website, I also got my plan for that. When I do, I will make sure the ads are placed below the fold and are asynced/deferred. Speed is the number one priority for me.
Using fast, LiteSpeed web hosting. I use Hostinger.
Use server-side caching and full page caching on the CDN. I use QUIC Cloud CDN which caches dynamic contents. I also use browser cache.
Read about Jetpack Boost here.
While it was a hard task to optimize for and pass core web vitals for mobile visitors, that too from a slow internet country like India, I learned many things and still learning. The key is always to monitor. I check the pages on pagespeed tools and search console every day, and take actions if necessary. This is a dynamic process, and I am sure I have to change things again. I will keep you updated. Please share this article if you found it helpful.