This document summarizes a presentation on optimizing websites for Google's Core Web Vitals. The presentation discusses the three Core Web Vitals metrics: Largest Contentful Paint (LCP) measures interruptions due to waiting, First Input Delay (FID) measures responsiveness to user input, and Cumulative Layout Shift (CLS) measures errors from instability. It provides tips on optimizing for each metric, such as improving server response times and resource load times to optimize LCP, reducing JavaScript execution time to optimize FID, and defining image dimensions to prevent layout shifts for CLS. The presentation was given at the Cologne Web Performance Optimization Meetup.
Real-time Tracking and Monitoring with Cargo Cloud Solutions.pptx
Optimize Speed and Usability for Google's Core Web Vitals (34 characters
1. Cologne Web Performance Optimization Meetup #34
Core Web Vitals
Optimizing Speed and Usability
for Google's Core Web Vitals
Thanks to wao.io by Avenga for supporting the event!
Ingo Steinke
Creative Web Developer
2. Cologne Web Performance Optimization Meetup #34
Ingo Steinke
Creative Web Developer,
Web Performance Expert,
freelancer @ planted.green
co-hosting @cgnWebPerf
ingo-steinke.com
@fraktalisman
3. Cologne Web Performance Optimization Meetup #34
Core Web Vitals
Optimizing Speed and Usability
for Google's Core Web Vitals
Thanks to wao.io by Avenga for supporting the event!
Ingo Steinke
Creative Web Developer
4. Core Web Vitals: Web Performance and Usability
“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. 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.”
web.dev/vitals/#core-web-vitals
Cologne Web Performance Optimization Meetup #34
5. Core Web Vitals: Web Performance and Usability
What's new anyway?
Why the hype?
“Most performance advice is the same we already knew,
or should have known, unless we never cared about
usability and only ever optimized for Time-to-First-Byte?”
Cologne Web Performance Optimization Meetup #34
6. Core Web Vitals: Web Performance and Usability
LCP: Largest Contentful Paint, FID: First Input Delay, CLS: Cumulative Layout Shift
Cologne Web Performance Optimization Meetup #34
TBT
Total Blocking Time
7. Core Web Vitals: Web Performance and Usability
Measuring and Monitoring Web Vitals
● PageSpeed Insights
● Lighthouse
● WebPageTest
● GTMetrix
● Google Search Console
Cologne Web Performance Optimization Meetup #34
8. Core Web Vitals: Web Performance and Usability
Cologne Web Performance Optimization Meetup #34
PageSpeed Insights:
9. Core Web Vitals: Web Performance and Usability
Cologne Web Performance Optimization Meetup #34
Lighthouse:
10. Core Web Vitals: Web Performance and Usability
Measuring Core Web Vitals: WebPageTest
Cologne Web Performance Optimization Meetup #34
11. Core Web Vitals: Web Performance and Usability
Measuring Core Web Vitals: GTMetrix
Cologne Web Performance Optimization Meetup #34
12. Core Web Vitals: Web Performance and Usability
Monitoring Core Web Vitals: Google Search Console
Cologne Web Performance Optimization Meetup #34
13. Core Web Vitals: Web Performance and Usability
LCP: Largest Contentful Paint, FID: First Input Delay, CLS: Cumulative Layout Shift
Cologne Web Performance Optimization Meetup #34
TBT
Total Blocking Time
14. Core Web Vitals: Web Performance and Usability
LCP: Largest Contentful Paint
● What does it measure?
● Why does it matter?
● How to optimize?
Cologne Web Performance Optimization Meetup #34
15. Core Web Vitals: Web Performance and Usability
Largest Contentful Paint measures
interruptions due to waiting
Cologne Web Performance Optimization Meetup #34
From the user's point of view, loading a particular page doesn't represent a
natural break: they haven’t yet achieved their goal, which may make them less
tolerant of delays. The Largest Contentful Paint metric measures when a
page-to-page navigation appears complete to a user.
Aim to keep LCP under 2.5 seconds for 75% of page loads!
blog.chromium.org/2020/05/the-science-behind-web-vitals.html
16. Core Web Vitals: Web Performance and Usability
Largest Contentful Paint (LCP) vs.
First Contentful Paint (FCP)
Cologne Web Performance Optimization Meetup #34
“First Contentful Paint measures how long it takes for initial DOM content to
render, but it does not capture how long it took the largest (usually more
meaningful) content on the page to render.” (Houssein Djirdeh, Google)
web.dev/optimize-lcp/
17. Core Web Vitals: Web Performance and Usability
Common Causes for
Poor Largest Contentful Paint
● Slow server response times
● Slow resource load times
● Render-blocking JavaScript / CSS
● Client-side rendering
Cologne Web Performance Optimization Meetup #34
web.dev/optimize-lcp/
18. Core Web Vitals: Web Performance and Usability
Cologne Web Performance Optimization Meetup #34
Slow Server Response Times
➢ optimize server,
➢ cache assets,
➢ use a CDN,
➢ use resource hints:
preconnect, dns-prefetch
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault
"access plus 5 minutes"
ExpiresByType image/jpeg
"access plus 1 month"
<link rel="dns-prefetch" href="https://fonts.gstatic.com/" >
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
smashingmagazine.com/2019/04/optimization-performance-resource-hints/
19. Core Web Vitals: Web Performance and Usability
Cologne Web Performance Optimization Meetup #34
<img loading=”lazy”
srcset=”a.jpg b.jpg 2x”
Slow Resource Load Times
➢ optimize, compress, minify
➢ cache
➢ preload, lazy load
➢ responsive images, adaptive serving
navigator.connection.effectiveType // e.g. '4g'
navigator.connection.saveData // data-saver setting
navigator.hardwareConcurrency // CPU core count
navigator.deviceMemory // Device Memory
20. Core Web Vitals: Web Performance and Usability
Cologne Web Performance Optimization Meetup #34
Render-Blocking Assets
➢ split, inline, minify, defer
.hero-image { background-size: cover; } /* inline critical css */
</style>
<link rel=stylesheet media=screen href="styles.css">
<link rel=stylesheet media=print onload="this.media='screen'" href="later.css">
Use the Coverage tab in Chrome DevTools to find “unused CSS” on your web page.
Remove any unused CSS, or better move it to another stylesheet if used on another
page of your site. Load styles, that are not needed for initial rendering, asynchronously.
Tools: loadCSS, Critical, CriticalCSS, Penthouse, Critters (webpack plugin).
21. Core Web Vitals: Web Performance and Usability
Cologne Web Performance Optimization Meetup #34
Client-Side Rendering
⚠️ use pre-rendering /
server-side rendering (SSR) ?
“A server-rendered page may look like it can be interacted with,
but it can't respond to any user input until it is “hydrated” (all the
client-side JavaScript has executed). This can make Time to
Interactive (TTI) worse.” (Houssein Djirdeh, Google)
22. Core Web Vitals: Web Performance and Usability
Cologne Web Performance Optimization Meetup #34
FID: First Input Delay
● What does it measure?
● Why does it matter?
● How to optimize?
23. Core Web Vitals: Web Performance and Usability
Cologne Web Performance Optimization Meetup #34
First Input Delay (FID) vs.
Time To Interactive (TTI) to
measure low responsiveness
“Time to Interactive measures the time it takes for a page to be fully
interactive, when event handlers are registered for most page elements, and
user interaction is processed within 50ms. First Input Delay is different in that
it’s able to track user input that happens before the page is fully interactive. As
a purely real user metric, it cannot be simulated in a lab test. It requires user
interaction in order to be measured.” (Ziemek Bućko)
onely.com/blog/what-is-first-input-delay/
24. Core Web Vitals: Web Performance and Usability
Cologne Web Performance Optimization Meetup #34
web.dev/fid/
Input Delay Optimization
➢ optimize JavaScript code
➢ reduce execution time
➢ minimize main thread work
➢ reduce request count and transfer size
➢ (don't) use asynchronous event handling
"would improve the metric but likely make the experience
worse" (Philip Walton)
25. Core Web Vitals: Web Performance and Usability
Cologne Web Performance Optimization Meetup #34
TBT: Total Blocking Time
● What does it measure?
● Why does it matter?
● How to optimize?
TBT
Total Blocking Time
?
26. Core Web Vitals: Web Performance and Usability
Cologne Web Performance Optimization Meetup #34
Total Blocking Time (TBT)
as a replacement for FID
TBT
Total Blocking Time
?
“Total Blocking Time is a Lighthouse Performance metric introduced in 2020
that quantifies your page's load responsiveness to user input. In the simplest
terms, TBT measures the total amount of time your webpage was blocked,
preventing the user from interacting with your page. It is one of the Web Vitals
and is a replacement for the field-only First Input Delay metric.”
gtmetrix.com/total-blocking-time.html
27. Core Web Vitals: Web Performance and Usability
Cologne Web Performance Optimization Meetup #34
CLS: Cumulative Layout Shift
● What does it measure?
● Why does it matter?
● How to optimize?
28. Core Web Vitals: Web Performance and Usability
Cologne Web Performance Optimization Meetup #34
youtube.com/watch?v=AQqFZ5t8uNc
Cumulative Layout Shift:
“a giant chicken that kicks your content away”
(Addy Osmani)
29. Core Web Vitals: Web Performance and Usability
Cumulative Layout Shift measures
errors from instability
Cologne Web Performance Optimization Meetup #34
“If an element suddenly moves, your eyes have to find its new position.
Users may end up clicking a link or an ad or a "Buy Now" button unintentionally!
Layout shift significantly disrupts the user's intended journey. Cumulative Layout
Shift measures how frequent and severe unexpected layout shifts are on a page.
Recommended aim for a CLS: less than 0.1 for 75% of page loads.”
https://blog.chromium.org/2020/05/the-science-behind-web-vitals.html
30. Core Web Vitals: Web Performance and Usability
How to prevent Layout Shift
➢ define image dimensions
➢ reserve fixed height containers for
portals / ads / third-party content
➢ use a hero header
➢ use web fonts properly or not at all
to prevent flash of invisible /unstyled text (FOIT/FOUT)
Cologne Web Performance Optimization Meetup #34
zachleat.com/web/css-tricks-web-fonts/
<img
width=”200”
height=”200”
src=”example.com”
alt=”not shifty”
/>
31. Core Web Vitals: Web Performance and Usability
Conclusion
What's new anyway?
What’s new if you already optimize your page speed? Not much, unless you haven’t
cared about usability and user experience as well? Care about your users, optimize
time to interactive, and prevent layout shift!
My personal prediction: we as developers and designers should also start to care
about sustainability and reduce our website’s carbon footprint! Hopefully, this might
become another important ranking factor in the future.
Cologne Web Performance Optimization Meetup #34
32. Core Web Vitals: Web Performance and Usability
Discussion
Cologne Web Performance Optimization Meetup #34
● 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/
33. Core Web Vitals: Web Performance and Usability
Links
This presentation is mostly based on other people's work, mainly by Google's Addy Osmani
and Houssein Djirdeh, but I also owe to the German WordPress community and many more:
Cologne Web Performance Optimization Meetup #34
➔ wpdus.de/meetup-52/ (German)
➔ https://addyosmani.com/
➔ twitter.com/hdjirdeh
➔ web.dev/optimize-lcp/
➔ web.dev/optimize-cls/
➔ web.dev/http-cache/
➔ smashingmagazine.com/2019/04/optimization-performance-resource-hints/
➔ blog.chromium.org/2020/05/the-science-behind-web-vitals.html
➔ developers.google.com/web/fundamentals/performance/get-started/httpcaching-6
➔ dev.to/ingosteinke/optimizing-speed-and-usability-for-google-s-core-web-vitals-1286
➔ zachleat.com/web/css-tricks-web-fonts/
➔ github.com/filamentgroup/loadCSS
➔ github.com/addyosmani/critical
➔ criticalcss.com
➔ github.com/pocketjoso/penthouse
➔ github.com/GoogleChromeLabs/critters
34. Cologne Web Performance Optimization Meetup #35
Save the date:
Wednesday, 5 May 2021 at 19:00 CET
Online Meetup
Thanks to Avenga Germany and wao.io for Support