Create Project
Free

Core Web Vitals Optimization in Webflow

Nimesh Kumar

Certified SoftwareSupp Webflow Expert

Webflow Expert working with startups and businesses to build fast​,​ responsive​,​ and pixel-perfect Webflow websites. Over 25 projects completed for customers all over the world.

3 min read

written by

Nimesh Kumar

Certified SoftwareSupp Webflow Expert

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.


Screenshot of Google Lighthouse


Largest Contentful Paint (LCP)

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.

Screenshot of Largest Contentful Paint - queue.gg


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

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
Screenshot showing effective CLS - www.creativebloq.com


Screenshot showing effective CLS - www.creativebloq.com


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.

Learn more about Nimesh and hire for services on his SoftwareSupp Expert profile page. We also encourage you to check out his previous article: 7 Actionable Steps for Webflow Page Speed Optimizations.

Share Article

written by

Nimesh Kumar

Certified SoftwareSupp Webflow Expert

Create your project and connect with a Certified Expert.

Create Project Free

You might also be interested in these