Core Web Vitals Optimization in Webflow

Learn more about Nimesh and hire for services on his SoftwareSupp Expert profile page.

Core Web Vitals is a metric by Google for evaluating the user experience of web pages. The metric is about to be released by the end of August.

The goal of this post is to demonstrate and educate about Core Web Vitals Optimization in Webflow.

Core Web Vitals are a set of three specific measurements: largest contentful paint, first input delay, and cumulative layout shift.

These measurements quantities: loading speed, interactivity, and visual stability.

There are three individual metrics under this evaluation:

1. Largest Contentful Paint (LCP) - metric to track page loading speed.
2. First Input Delay (FID) - metric to track the time it takes for the webpage to become interactive.
3. Cumulative Layout Shift (CLS) - metric to track visual stability on the page.
   

Largest Contentful Paint (LCP) for Core Web Vitals

LCP is the loading of the majority of the page while clicking on a link. LCP is impacted by the number of images and assets on a page.

Google recommends an LCP below 2.5 seconds.

LCP optimization for Webflow:

1. Avoid using large images in the Hero and the rest of the page
2. Compressing images using compressor.io (effective than tinypng)
3. Setting the assets above the fold to Eager load
4. Adding <section> tag to sections (this makes the sections lazy load)
5. Cleaning unused Styles and Interactions
6. Using IMG elements instead of setting the background to divs
   

Core Web Vitals First Input Delay (FID)

FID is the time required for the interactive elements to become active like the hamburger menu, form fields, buttons, etc.

Google recommends an LCP of 100 milliseconds or less.

FID optimization for Webflow:

1. Minify CSS & JS
2. Defer Javascript
   

Cumulative Layout Shift (CLS)

CLS is the stability of elements on the webpage. CLS is seen when a page loads or when advertisements appear on the page.

Google recommends an LCP of 0.1 or less.

CLS optimization for Webflow:

1. Setting explicit height and width to the images
2. Predefined space for advertisements
   

The above mentioned is a brief about Google’s Core Web Vitals.

The important part is to know that the measurements will be considered by Google for rankings of websites once it is released.

Hence, it is crucial to optimise all the Webflow sites for the update.

It should be noted that the metrics take the user experience of the web pages into consideration rather than only performance.

Do test this information on your Webflow Project and share it with people who could be benefited!

Please feel free to contact us if you need an expert to handle your Webflow Core Web Vitals Optimization and help you in getting a better search ranking.

We also encourage you to check out his previous article: 7 Actionable Steps for Webflow Page Speed Optimizations.