How to use Cloudflare to optimize your website for Core Web Vitals

Core Web Vitals - Screenshot

Why is web performance — the speed at which your website loads — important? Performance affects the user experience, and the speed at which a webpage loads affects conversion rate.

But one of the biggest reasons to care about performance is search engine optimization (SEO).

SEO is the practice of ensuring that webpages show up in search engine results — preferably, above the webpages of your competitors. No longer solely focused on keywords, the number of factors Google's crawlers take into account is constantly growing. One of the biggest changes to SEO in recent years is Google's introduction of Core Web Vitals, a new set of measurements to help determine which websites should show up first.

What are Core Web Vitals?

Core Web Vitals are web performance metrics that Google uses to help determine which webpages to show in response to search queries. Google started incorporating Core Web Vitals into its ranking algorithms in mid-2021.

Core Web Vitals This image is reproduced from work created and shared by Google and used according to terms described in the Creative Commons 4.0 Attribution License.

There are a number of "Web Vitals" performance metrics, but Google focuses in on these three as their "Core" ones: Largest Contentful Paint (LCP), which measures loading speed First Input Delay (FID), which measures interactivity Cumulative Layout Shift (CLS), which measures visual stability

LCP measures how long it takes to load the largest element of a webpage, usually an image or a text block. The prevailing wisdom is that LCP should take 2.5 seconds or less.

FID measures the time that passes between a user's first attempt to interact with a webpage and when the webpage actually responds — when the browser is able to carry out the requested action. This measures the human experience of when someone can click on the screen and have something happen. Website owners should aim for an FID of 100 milliseconds or less.

CLS measures how much a webpage "jumps around" as it loads. A good CLS score is 0.1 or less. CLS is a somewhat complex measurement; this article has a more thorough breakdown of how it is measured. But the general idea is to aim for all webpage elements to load as close to simultaneously as possible, and in their correct positions.

Why do the Core Web Vitals matter for your site?

Good scores on these three Core Web Vitals make it more likely that Google will rank your content highly in search results.

Poor scores make this less likely. But how can you tell if your website is doing well or poorly according to these metrics?

You can measure Core Web Vitals with Cloudflare

Cloudflare Web Analytics provides you with these metrics for your website. If Cloudflare is already protecting and accelerating your website, you can easily turn on Web Analytics with a couple of clicks in your Cloudflare dashboard. (If you have not signed up for Cloudflare, you can do so here.) This support article has further information on getting started with Web Analytics.

Once you have turned on Web Analytics and you know how your website is doing, it's time to take the next step: making the necessary improvements to speed up your website and hit those Core Web Vitals targets.

How Cloudflare can help you improve Core Web Vitals

Improving LCP: A combination of caching and smart routing will improve your website's LCP. The Cloudflare content delivery network (CDN) caches your website's static content in data centers all over the world. Because those data centers are physically close to users — within 100 milliseconds of 95% of all Internet users — content has less distance to travel to and from users' devices, and page loads are consequently faster. The sooner the content gets to your user, the sooner their browser can start processing it and the sooner they can start interacting.

On top of that, Argo Smart Routing sends network traffic along faster routes compared to typical Internet routing. Turning on Argo for your content can speed up page load times by up to 35%.

For websites built with WordPress, Cloudflare offers Automatic Platform Optimization (APO), which can speed up WordPress sites by up to 300%. APO costs $5 per month; learn more about it here.

Improving FID: Caching and smart routing have a similar effect on FID. The faster your webpages load, the faster users will be able to interact with them. Use smart routing and the Cloudflare CDN to get your website's FID to acceptable levels.

In addition, input delays often occur because the browser is busy executing large JavaScript functions. Try building fast static webpages with Cloudflare Pages, which makes it easy to deploy JAMstack websites and serves those websites from the Cloudflare CDN.

Improving CLS: Layout shift is often caused by images loading slowly or in the wrong size. Use Cloudflare Images to store, resize, optimize, and quickly deliver even large amounts of images from the Cloudflare edge.

Some of these features are available only with Cloudflare Pro Plans and above. Learn more about the Free, Pro, and Business plans.

Are there any other important performance metrics?

There are a number of other "Web Vitals" in addition to the Core ones. You may have heard of some of them, like First Contentful Paint (FCP), DOMContentLoaded (DCL), and Time to First Byte (TTFB). Measuring these metrics can help identify performance issues with a website.

But for the purpose of optimizing your website for search, the Core Web Vitals are the three to focus on. Start measuring your website and optimizing its Core Web Vitals with Cloudflare to make sure you're not left behind on the search engine results page.

Sign up free and start improving your Core Web Vitals scores today