How Our Site Passed Core Web Vitals in just 7 Days

It’s April 30th, 2020; the Core Web Vitals was officially introduced to the world. Right at the moment, I started working on this site Bloggingio to improve the Core Web Vitals Score.

I did a lot of optimizations, tried different tech stacks. Later, I made one final change, and then the site passed the Core Web Vitals in just 7 days.

I am documenting my every move here to give you a clear idea to improve your sites.

Before Core Web Vitals

This site bloggingio.com was hosted on FastComet for more than five years, and I was pretty much satisfied with the service. However, a shared host does not offer the best performance. The TTFB will be inconsistent as it oscillates between 150 – 300 ms. Since the Core Web Vitals (CWV) is based on field data, your host should be more powerful to offer superior performance.

So, I planned to move the site to a faster host. I have been using Liquid Web VPS since 2015 to host my other sites. Their servers are reliable and offer good performance compared to shared hosts. I moved the site bloggingio.com to Liquid Web VPS after the 10th day of Core Web Vitals official announcement.

May 2021 with Cloudflare Full Page Caching

The site bloggingio.com gets worldwide visitors, and I definitely need a CDN to reduce the TTFB. I started using Cloudflare free CDN. Instead of improving the TTFB, the free plan increased the TTFB as their free plan has a lot of routing issues where the free users are routed through different countries, and it badly affected the whole performance of my site.

To fix this, I started using Cloudflare CDN Full Page Caching as it can produce sub-100ms TTFB across the globe.

I used Cloudflare for caching and the site was live with the above setup for 30 days; however, there is no scope for big improvements. So, I moved to the next step of using Cloudflare Pro.

June with Cloudflare Plus

Liquid Web, in partnership with Cloudflare, offers an exclusive plan where Cloudflare Pro ($20/ month) is available for just $10/month. I started using the Cloudflare Pro by June End with Full Page Caching for better performance.

It comes with mobile speed optimization, image optimization features like Polish and Mirage, which I believe a good option to pass the Core Web Vitals.

However, I was wrong. There are only little improvements like a 10 point increase in PageSpeed Score as the image optimization features are good. However, the routing issues are the same, and my site was delivered from Lahore (Pakistan) and Singapore POP instead of their seven Indian POPs. The case was the same when I checked the site from Australia and Europe locations; the traffic was routed through long paths.

July with Argo Routing

The only option left with Cloudflare is to try their Argo Routing, which promises to use a less-congested network path to reduce latency and improve load times. I bought the Argo add-on for $5 per month and used it for the next 30 days.

However, there are no improvements. While Cloudflare Argo showed graphs on how the latency is reduced, it doesn’t help us pass the Core Web Vitals.

August with StackPath

As there is nothing more to try with Cloudflare, I went with StackPath CDN. The reasons for choosing StackPath are simple. They offer fast TTFB than Cloudflare and are also cost-effective. Here is the data to prove my point, compare it with the above Cloudflare TTFB.

StackPath is at least 15- 30 ms faster than Cloudflare, and I really enjoyed using them. The biggest drawback is they don’t have an Indian POP which affected the TTFB in the location, so there are no improvements in the LCP score. Since 30% of my traffic is from India, the field data remains the same, and I didn’t pass the Core Web Vitals Score even after using them for 30+ days.

Note: If your traffic is from the United States, then StackPath is a great option and I highly recommend them over Cloudflare or other CDN providers.

September with Templ

By September 22, 2020, I moved the site to Templ hosting. A brief story, they reached me in April to test their hosting services. I tested their services for three long months and wrote a detailed Templ review here.

Impressed by their performance, I thought of testing them for my site. So, I bought a hosting account and moved to the site bloggingio.com by September 22, 2020, which you can confirm from the above image. The Templ tech stacks come with Google Cloud, CDN, and DNS, it looked promising to me.  Once the site migration was completed, I changed the DNS from Cloudflare to Google, and the site was live on Templ Platform.

Passing Core Web Vitals in seven days

I didn’t expect the results quickly; the site bloggingio.com passed Core Web Vitals in just seven days. The site was on Templ since Sep. 22, 2020, and the Search Console data from October 1st, 2020, shows all the URLs are moved to “Good” from “Needs improvement.”

The most luxurious thing I’ve ever experienced is that I didn’t carry out any optimizations, yet the scores are improved automatically. WP Rocket and PerfMatters are the only two speed-focused plugins that I’ve been using for a long time.

Even pages using Thrive Architect have passed “Good” (It’s usually hard to get a pass score if the page uses page builders like Elementor, Architect, etc.)

Comparing the data of June 2020 with October 2020: Only 53.26% of URLs had good Largest Contentful Paint in June, while a whopping 90.68% of the URLs are good by October.

When 36.9% of URLs are poor by June, it got reduced to 2.22% of URLs by October. On the other hand, only 29.59% of URLs are good by June and it went up to 67.83% in October.

The site didn't have any issues with First Input Delay and Cumulative Layout Shift, so I didn't add any screenshots for it.

As you can see, Templ improved our scores in no time, but it doesn't mean, all sites hosted on Templ passes CWV automatically. I optimized my site right from caching to other speed optimization techniques available on the internet. If you believe, you've optimized your site but it's not passing Core Web Vitals, then try Templ and see how it works.

How did Templ helped us to pass “Core Web Vitals”?

According to Google Web.dev, the reasons for poor Largest Contentful Paint are

  • Slow server response time
  • Render-blocking CSS and JS
  • Slow resource load time.

The slow server response time can be improved by either choosing a fast CDN on the top of your existing host or choosing a new Fastest WordPress hosting. Templ hosting produced the fastest server response time and helps a lot to improve LCP.

The second way is to use fast CDN. According to CDNPerf, Google CDN is the fastest CDN in the world with the fastest query speed. Note: 5centsCDN is used for live streaming, so you can ignore it.

If you're wondering why I've shared this data, Templ is the only host that uses Google CDN. In our test, it proved Templ offers fast server response time even without the CDN. Now, when you use Google CDN over Templ, it offers the best-in-class performance.

What should you do to get a pass score?

The best way to get a pass score in Core Web Vitals is to use the fastest hosting / CDN combined with speed optimization plugins like WP Rocket and Perfmatters.

With the above combination, I've passed Core Web Vitals in more than five sites. Not only Templ, but you can also use any other fast host. However, keep an eye on CDN.

No matter how powerful your servers, CDN is the one that is going to connect the end-user with your server. The CDN should be powerful as it takes care of Time to First Byte (TTFB), which paves the way for a good Largest Contentful Paint score.

I don't recommend Cloudflare free or any paid plan. I took this decision not only based on my personal experience but I went through a lot of sites and their TTFB speed are not consistent, the cache-hit-ratio is not great.

The list of things I did to pass the core Web vitals are

  • Fast hosting with fast CDN via Templ.
  • Delay JavaScript execution via WP Rocket.
  • Removed unused CSS/JS per page via Perfmatters.
  • Image Optimization using Shortpixels.
  • Preconnect external resources and preload fonts.
  • Eliminate render-blocking CSS and JS.

Concluding

Overall, Templ is a great host to improve your server performance and get a pass in Core Web Vitals. Also, it’s not guaranteed to get a passing score with Templ as there are many field factors involved in it.

However, if you’ve tried a lot of solutions and nothing worked, then try Templ just like me and see how it goes. You can start using Templ hosting with $30 free credits if you sign up with this link. And then share your experience in the comments.

Leave a Comment