Introducing Core Web Vitals at Data4Life
Ever since the internet became an integral part of our lives marketers, developers, and online business owners have been racking their brains to unravel the ever-evolving SEO myths, and boost their website rankings.
After years of trial-and-error, and a surge in demand for SEO specialists, Google finally let us peek into its world and discover how it ranks websites. In May 2020, it published an official benchmark: the Core Web Vitals.
Each metric in the Core Web Vitals represents an aspect of user experience. In June 2021, Google began to rank web pages using these metrics. While there are many in-depth, technical analyses out there, this article offers an approachable look at the Core Web Vitals’s 3 pillars of page experience.
Largest contentful paint (LCP)
Largest contentful paint is how long it takes to load the largest element on a page above the fold (what’s displayed before you start scrolling).
Largest contentful paint should occur within 2.5 seconds of a page loading.
First input delay (FID)
First input delay measures the time from when a user first interacts with a page to when the browser responds.
Pages should have a first input delay of 100 milliseconds or less.
Cumulative layout shift (CLS)
Cumulative layout shift measures visual stability of a page. That is, how many elements move around the page while it's loading. If there are a lot of moving elements, the page receives a worse cumulative layout shift score.
Pages should maintain a cumulative layout shift of 0.1 or less.
If you're wondering how your website scores for the Core Web Vitals, visit PageSpeed Insights.
Core Web Vitals at Data4Life
Now that we’ve covered the basic foundation of the Core Web Vitals, let’s delve into how we at Data4Life tried to improve our scores.
First, I identified the improvements that would have the greatest impact on largest contentful paint for the lowest dev effort. Optimizing image sizes was a no-brainer: The smaller the images are, the faster the pages load. The question was: What's the most efficient and effective approach to achieve the results?
I made a chart of the largest images across the site, intending to compress and reupload each of them. This seemed like low-hanging fruit, but I quickly realized how time-consuming my manual approach was. Both the existing images and new images had to be compressed, leading to lots of repetitive tasks. To speed this up, we implemented a WebP plugin on Kirby, the content management system we use, which automated the process and tackled all of the images across the site.
The second actionable item was to improve our Cumulative Layout Shift (CLS), which you can read about in this blog post).
What’s next?
In conclusion, many companies have already increased their profit and engagement by improving their Core Web Vitals. It’s too early to see the impact of our efforts at Data4Life, but we’ll provide further updates on our Core Web Vitals in the coming months.
