Logo

dev-resources.site

for different kinds of informations.

Core Web Vitals explained with GIFs

Published at
7/21/2021
Categories
webperf
seo
corewebvitals
Author
zwacky
Categories
3 categories in total
webperf
open
seo
open
corewebvitals
open
Author
6 person written this
zwacky
open
Core Web Vitals explained with GIFs

With Google's June 2021 update Core Web Vitals (CWV) will become a factor in SEO ranking.
It measures the quality of a site by these three metrics: LCP, FID and CLS.

If you pass all of them them, Google will reward you with more visibility.

core-web-vitals-green-urls

You can check how well you do on these metrics via several ways:


Largest Contentful Paint (LCP)

LCP marks the point in the page load timeline when the page's main content has likely loaded.

—web.dev

LCP-techcrunch

The faster you make the biggest content on the above-the-fold appear, the better your metric will be.

If you can preload the biggest image already, e.g. with <link rel="preload" href="..."> or make the content appear without rendering it with your Javascript Framework, you'll win big.

Causes of LCP:

  • Slow server response times
  • Render-blocking Javascript and CSS
  • Slow resource load times
  • Client-side rendering

First Input Delay (FID)

FID measures the time from when a user first interacts with a page to the time when the browser is actually able to begin processing event handlers in response to that interaction.

—web.dev

FID-imdb

Javascript is synchronous and single-threaded. If a user interaction happens while the thread is busy, the user has to wait. If you have too many libraries that load at runtime, worse even if you don't need them right away, this can increase the FID.

It's similar to TTI (Time to Interactive) that you might have heard of already. However FID will only start to be measured from the user interaction. Whereas TTI will be measured from the very start of loading the site.

Causes of FID:

  • too much javascript code to execute right away, especially 3rd party
  • ad networks can push lots of unneeded Javascript
  • not using code-splitting (e.g. with webpack, Rollup, Parcel)

Cumulative Layout Shift (CLS)

CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page.

—web.dev

CLS-giphy

Layout shifts only happen when an element higher up is making other elements move. If the element is changing and there is nothing after it, it doesn't count as a layout shift—as well as DOM changes that were caused by a user interaction with a grace period (500ms).

Note: Mobile viewports and 3G devices will cause much more CLS. Make sure to throttle your connection while optimising your page for these metrics.

Causes of CLS:

  • images without size attributes
  • requests finish later that will inject content above existing content
  • lazy loaded components

Simon Wicki is a Freelance Developer in Berlin. Worked on Web and Mobile apps at JustWatch. Fluent in Vue, Angular, React and Ionic. Passionate about Frontend, tech, web perf & non-fiction books.

👉 Join me on Twitter to follow my latest updates.

corewebvitals Article's
30 articles in total
Favicon
Performance Audit: Analyzing Namshi’s Mobile Website with Live Core Web Vitals
Favicon
Live core web vitals (local metrics) in browser devtools
Favicon
🚀 Master Core Web Vitals: 3 Metrics for a Better User Experience
Favicon
How to Fix Long Animation Frames (LoAFs) and Speed Up Your Website
Favicon
Fixing WordPress Website Core Web Vitals Issues: Complete Guide
Favicon
How to improve the RES of a web page?
Favicon
Key Strategies to Improve Your Google Lighthouse Score
Favicon
Core Web Vitals, what are they and how to improve your website?
Favicon
Ways to Improve Core Web Vitals of Your Website
Favicon
Improve Performances With Dynamic “Content-Visibility”
Favicon
Google I/O (Connect) — Recap de la categoría Web
Favicon
Core Web Vitals, ¿qué son y cómo mejorar tu web?
Favicon
l Back/Forward Cache (bfcache): Performance-Booster for Magento 2 âś” | JaJuMa-Blog
Favicon
Docusaurus: improving Core Web Vitals with fetchpriority
Favicon
Google top Core Web Vitals recommendations for 2023
Favicon
See Current Core Web Vitals with Chrome
Favicon
Understanding SEO and Web Vitals for your NextJS site and how to improve them?
Favicon
Getting to Know Web Vitals!
Favicon
Core Web Vitals Dashboard On Google Analytics
Favicon
How to Optimize Website for Core Web Vitals--A Guide for Designers
Favicon
Google Core Web Vitals Explained
Favicon
Doing the right thing for the wrong reasons
Favicon
Core Web Vitals: How to Measure and Improve Them?
Favicon
How List Rendering Can Cause Huge Cumulative Layout Shift
Favicon
Next.js: The Ultimate Cheat Sheet To Page Rendering
Favicon
Core Web Vitals explained with GIFs
Favicon
Introducing the Core Web Vitals Technology Report
Favicon
Core Web Vitals
Favicon
Top WordPress Plugins to Pass the Google Core Web Vitals Test– 2021
Favicon
Numbers

Featured ones: