Skip to main content
Go to dashboard
Not sure where to start? Take a short quiz to get personalised recommendations.
Lesson 3 of 5
Keep visitors engaged with Core Web Vitals
Keep visitors engaged
Keep visitors engaged with recirculation (4:59)
Keep visitors engaged with web videos (9:52)
Build news apps with Flutter (7:18)
Course
0% completed
5 minutes to complete

Keep visitors engaged with Core Web Vitals

webdev

Build a quality user experience on your news site

webdev

What is Core Web Vitals?

GNI_Data_Presentation (1)

Web Vitals is an initiative by Google to provide unified guidance of what is essential for a great user experience on the web.

Core Web Vitals are three metrics from Web Vitals. When a site meets Core Web Vitals, research showed that people were 24% less likely to abandon the page.

Core Web Vitals focuses on

  • Loading
  • Interactivity
  • Visual stability
GNI_Data_Presentation (1)

Get started with measuring Core Web Vitals

GNI_Data_Analytics

Collecting data is the first step towards improving your Core Web Vitals.

  • PageSpeed Insights measures and reports on the user experience of a page on both mobile and desktop devices, and provides suggestions on how to improve your pages.

  • Search Console measures and reports on how your pages meet Core Web Vitals, based on how your audience uses your site

  • Web Vitals Chrome extension measures and reports Core Web Vitals performance in real time for any page, and is best for developers

💡Best practice: Share suggestions from any of these tools with your developer.

GNI_Data_Analytics

Loading

GNI_Audience_engagement_Blank

Fast loading times reassure your audience that the page is useful.

  • 50% of people leave a site if it takes more than three seconds to load
  • 47% expect web pages to load in under two seconds
  • 52% say load time plays a role in how loyal they are to a brand

Loading is measured by largest contentful paint (LCP), which is how long it takes to display the largest image or text block.

To meet Core Web Vitals, 75% of your pages should load in 2.5 seconds or fewer.

💡Best practices

  • Enable lazy loading
  • Use videos instead of large GIFs
  • Remove unused code
GNI_Audience_engagement_Blank

Interactivity

screenshot-2023-02-23-at-54241-pm

While Loading measures how fast your site displays content, Interactivity measures how responsive your site is when your audience tries to select an article or take another action.

Interactivity is measured by first input delay (FID), which is how long it takes from when someone clicks a link or button to when your site begins processing their action.

To meet Core Web Vitals, 75% of your pages should take 0.1 seconds or fewer to start processing a click.

💡Best practices

  • Enable lazy loading, which splits code into smaller tasks
  • Load code needed for the page first
  • Reduce code that fetches data
screenshot-2023-02-23-at-54241-pm

Visual stability

blue-data-screen

Have you ever started reading an article, and before finishing a sentence, the text moves and you lose your place?

Most of the time it’s just annoying, but sometimes, it can cause real damage.

Visual stability is measured by cumulative layout shift (CLS), the highest number of content shifts that happen at once.

To meet Core Web Vitals, 75% of your pages should score 0.1 or less.

💡Best practices

  • Set the aspect ratios or dimensions for images and videos
  • Choose the most likely ad size based on previous ads

Avoid ads that display at the very top of a page

blue-data-screen
How would you rate this lesson?
Your feedback will help us to continuously improve our lessons!
ANSWER THIS QUESTION TO COMPLETE THE LESSON.
What does Core Web Vitals focus on?
Submit
checklist (8)
Quiz complete
Congratulations! You've just finished Keep visitors engaged with Core Web Vitals
Review the lesson and try again
in progress
Recommended for you
Save results and track your progress
By leaving this page you will lose all progress on your current lesson. Are you sure you want to continue and lose your progress?