DEV Community

Cover image for Optimizing Speed and Usability for Google's Core Web Vitals in 2021

Optimizing Speed and Usability for Google's Core Web Vitals in 2021

Ingo Steinke, web developer on March 02, 2021

In this article, I will try to summarize relevant resources about measuring, monitoring, and optimizing web page speed, usability, and search engin...
Read full post
Collapse
 
ingosteinke profile image
Ingo Steinke, web developer •

There have been some updates to Web Vitals, according to Vitals updates, and Interaction to Next Paint:

  • Interaction to Next Paint (INP) as a possible replacement for First Input Delay (FID),
  • deprecation of Time to Interactive (TTI) in 2023
  • increase in weight for Cumulative Layout Shift (CLS): 15 -> 25

Expected outcome of the weight changes according to Google's assumptions based on an HTTP archive study (quoted from Speedcurve's blog post):

We expect this to improve most pages' performance scores, since most pages tend to score better on CLS than TTI.

Interaction to Next Paint (INP)

Quoting web.dev, Interaction to Next Paint (INP) has been introduced in 2022 as

an experimental metric that uses data from the Event Timing API API. It assesses responsiveness. When an interaction causes a page to become unresponsive, that is a poor user experience. INP observes the latency of all interactions a user has made with the page, and reports a single value which all (or nearly all) interactions were below.

Collapse
 
grahamthedev profile image
GrahamTheDev •

Looks like you released the article instead of saving as draft. What you have written so far looks good though 😋!

Collapse
 
ingosteinke profile image
Ingo Steinke, web developer •

Thanks! I will release the final version tomorrow, after today's online web performance meetup. You are invited to join our discussion, if you like: meetup.com/cologne-germany-high-pe...

Collapse
 
grahamthedev profile image
GrahamTheDev •

Thanks for the invite, is the presentation and discussion after in English?

I am from UK and the last time I spoke German was when I was 16 (yes we are ignorant in the UK and expect everyone to speak English 🤣🤣).

Thread Thread
 
ingosteinke profile image
Ingo Steinke, web developer •

Talk and discussion will be in English tonight!

Thread Thread
 
grahamthedev profile image
GrahamTheDev •

Super, I will do my best to join you all. Look forward to it!

Thread Thread
 
grahamthedev profile image
GrahamTheDev •

Thank you for the invite last night, your presentation was very good!

I look forward to the next one!

Collapse
 
grahamthedev profile image
GrahamTheDev •

Sent a request to join, hopefully see you soon!

Collapse
 
ingosteinke profile image
Ingo Steinke, web developer • • Edited

Thanks everybody for sharing your insights at our meetup! These were some of your suggestions and additions:

Total Blocking Time

  • TBT is the total time of any tasks that take over 50ms. So if you had 3 tasks that take 35ms, 55ms and 80ms the TBT would be 35ms (55-50 and 80 - 50)

CLS vs. web fonts

  • use variable fonts
  • preload regular font, other (bold, italic) to discover later if needed
  • HTTP Response Header makes browser request it (no server push): link: <https://example.com/regular.woff2>; rel="preload"; as="font"; type="font/woff2"; crossorigin

image dimensions vs. art direction and older browsers

  • width height must only put the proper ratio
  • use aspect ratio/intrinsic ratio for the image dimension problem
  • aspect ratio attribute, control by media queries,
  • intrinsic ratio trick with padding-bottom for old devices
  • css-tricks.com/aspect-ratio-boxes/

image formats

Collapse
 
ingosteinke profile image
Ingo Steinke, web developer •

Update about measurement tools: while preparing for the meetup, I noticed that WebPageTest had, at that time, the most old-fashioned user interface, so I decided to make screenshots of GTMetrix for my presentation. Shortly afterwards, WebPageTest got a relaunch and has now one of the most elegant interfaces, clearly beating Google and probably also all of the others, but here are two screenshots and the link to WebPageTest.org, so everyone can decide for themselves.

Screenshot of WebPageTest's home page after the 2021 relaunch

Screenshot of WebPageTest's Web Vitals details for ingo-steinke.com

Collapse
 
ingosteinke profile image
Ingo Steinke, web developer • • Edited

Update in May 2021: Browser Plugin and DevTools Overlay for Chrome

To activate the overlay, enter developer tools and open the command menu (using Control/Command + Shift + P ) and type “show render” to see the render options drawer, where you can check “core web vitals” to make the overlay appear immediately.

screenshot

This is basically the same as Addy Osmani's Web Vitals extension, which has been a free extension for the Chrome web browser, previewing what is now built-in to chrome dev tools as the new Core Web Vitals overlay.

Source: developer.chrome.com/blog/new-in-d...