Hamburger menu icon

Optimize page experience

Core Web Vitals May 2021

Core web vitals

Core web vitals

is a new Google ranking factor

essential metrics for a healthy site

Web Vitals

Optimizing for quality of user experience is key to the long-term success of any site on the web. Whether you're a business owner, marketer, or developer, Web Vitals can help you quantify the experience of your site and identify opportunities to improve.

Overview

Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.

Google has provided a number of tools over the years to measure and report on performance. Some developers are experts at using these tools, while others have found the abundance of both tools and metrics challenging to keep up with.

What's new in Web Vitals

The "What" and "Why"

Astronaut background
Web Vitals are metrics with a focus on user experience.

Site owners should not have to be performance gurus in order to understand the quality of experience they are delivering to their users. The Web Vitals initiative aims to simplify the landscape, and help sites focus on the metrics that matter most, the Core Web Vitals.

Core Web Vitals

Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools. Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome.

APPLY TO ALL WEB PAGES

Surfaced across all Google tools.

Measurable in the field

Ground truth of what real users see.

Critical user-centric outcome

Small number of key metrics.

Google logo Comparision of web vitals
Core web vitals comparision

Why?

  • To make it easier for developers to focus on the user experiences That matter.
  • To make the web a better place for users.

metrics and tooling updates

The metrics that make up Core Web Vitals will evolve over time. The current set for 2020 focuses on three aspects of the user experience—loading, interactivity, and visual stability—and includes the following metrics (and their respective thresholds):

Largest Contentful Paint [LCP]

When is the main content loaded?

LCP is the time it takes a website to load the largest content element in the viewport. Such an element can be a graphic, video or a block of text.

Loading icon

(Loading)

LCP

Largest Contentful Paint

Largest contentful paint spread
Phones
  • Slow server response times
  • Reduce server response times (TTFB)
  • Render-blocking JavaScript and CSS
  • Eliminate render-blocking resources
  • Avoid chaining critical requests
  • Resource load times
  • Efficiently encode images
  • Serve images in next-gen formats
  • Enable text compression
  • Preconnect to reguired origins
  • Preload ket request
  • Minify CSS and JavaScript
  • Remove unused CSS
  • Use video formats for animated content

Success story

NDTV reduced their Largest Contentful Paint time by 55% resulting in a 50% reduction in bounce rates.

55% reduction
LCP

50% reduction in bounce rates

Cumulative Layout Shift [CLS]

Avoid unexpected content shifts

CLS is an indicator that measures any unexpected content shifts that suddenly occur while your site is loading (or later).

Visual stability icon

(Visual Stability)

CLS

Cumulative Layout Shift

Cumulative Layout Shift spread
Phones
  • Avoid shift-triggering anti-patterns
  • Avoid non-composited animations
  • Image elements have explicit width and height
  • Injected frames potentially shifted layout
  • Fonts with font-display: optional are preloaded

Success story

Yahoo! JAPAN reduced their CLS score, resulting in more page views per session, longer session duration, and decreased bounce rate.

15.1% more page view per session

13.3% longer session duration

First Input Delay [FID]

How long does it take to interact?

The FID is the time it takes for you to interact with the website. In other words, it is the time between the start of loading and the moment when the browser is able to respond to the interaction (e.g. clicking a link, button, or performing some custom Javascript action).

Interactivity icon

(Interactivity)

FID

First Input Delay

First input delay spread
Phones
  • Heavy main-thread execution
  • Reduce JavaScript Execution time
  • Minimize main thread work
  • Reduce the impact if third-party code
  • Deferrable / Removable code
  • Some third-party resouerces can be lazy loaded
  • Remove unused JavaScript
  • Remove duplicate modules in JavaScript bundles
  • Avoid Serving legacy JavaScript to modern broswers

Success story

Zalando leveraged Lighthouse as a node module and Lighthouse CI to improve load and interactivity Timings, and prevent regressions.

Load Timings for Their Home page in Their new relase improved by 65% (Desktop) and 32% (Mobile), and interactivity Timings improved by 140% (desktop) and (66%) Mobile.

65%
load timings improved

140% interactivity timings improved

Conclusion and resources

Optimize CWV, for your users and your business

Largest Contentful paint

Address slow server response times, render-Blocking JS and CSS, and resource load Times.

First input delay & total Blocking time

Address heavy main-thread execution and deferrable or removable code.

Cumulative layout shift

Avoid shift-triggering anti-patterns.

Core web vitals vs others example Core web vitals vs others example
Contact form background

Your next step

Houston, we have a contact

How can we help your business?

Project process

Set your own time and we'll call you back.

Please fill in the quick form that will help us with estimations. We’ll get back to you within 2 workdays.