Optimizing For Core Web Vitals

In this hands-on talk, we cover tips & tricks for optimizing your user-experience to meet the Core Web Vitals. We use tools like Lighthouse & DevTools, show you code snippets for fixes, and highlight how you too can get fast and stay fast.

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, Core Web Vitals can help you quantify the experience of your site and identify opportunities to improve.

Video: https://www.youtube.com/watch?v=AQqFZ5t8uNc
Related article: https://web.dev/optimize-cls/

Transcript

1. Optimizing for Core Web Vitals @addyosmani Engineering Manager, Chrome Tips & Tricks
2. Case Study
3. Page experience
7. News Home | News | Sport | Travel | Culture | More News Today’s the day for you. May 14 is National Dance Like a Chicken Day! While we could make this up right now, we’re not. So break out your best Chicken Dance. This day entertains from start to finish with people flapping their arms and strutting chicken-like. Everyone has probably danced the Chicken Dance at least once in their lifetime — especially if you’ve attended a wedding
8. News Home | News | Sport | Travel | Culture | More News Today’s the day for you. May 14 is National Dance Like a Chicken Day! While we could make this up right now, we’re not. So break out your best Chicken Dance. This day entertains from start to finish with people flapping their arms and strutting chicken-like. Everyone has probably danced the Chicken Dance at least once in their lifetime — especially if you’ve attended a wedding
9. Images Without Dimensions Ads, Embeds, iFrames Without Dimensions Dynamically Injected Content Web Fonts Causing FOIT/FOUT W H What causes poor CLS?
11. Homepage Product Listing Page Product Details Page
13. Always include width and height size attributes on your images and video elements.
14. Mini-Demo: Images without dimensions
15. <!-- Old best practice --> <img src="shoe.jpg" width="640" height="360" alt="Shoe">
16. <!-- Old best practice --> <img src="shoe.jpg" width="640" height="360" alt="Shoe"> <!-- Then came responsive design practice --> <img src="shoe.jpg" alt="Shoe"> <style> img { width: 100%; /* or max-width: 100%; */ height: auto; } </style>
17. Image Aspect Ratio = ratio of width to height Want a 16:9 ratio? If dress.jpg has 360px height… width = 360 * (16 / 9) = 640px 360px ? px
18. <!-- The UA stylesheets of browsers will add a default aspect ratio based on the element's existing width and height attributes --> <style> img { aspect-ratio: attr(width) / attr(height); } </style>
19. <!-- Modern best practice --> <!-- e.g set a 640:360 i.e a 16:9 - aspect ratio --> <img src="shoe.jpg" width="640" height="360" alt="Shoe">
20. <img width="1000" height="1000" src="shoe-1000.jpg" srcset="shoe-1000.jpg 1000w, shoe-2000.jpg 2000w, shoe-3000.jpg 3000w" alt="Shoe"/>
21. Mini-Demo: Images with dimensions
22. Mini-Demo: Lighthouse 6.0 impact
23. What elements contribute to CLS?
24. What elements contribute to CLS?
25. Chloe’s approach to image loading
26. Chloe’s approach to image loading Fixed size parent container Color similar to final image Responsive image Also has dimensions specified
27. Reserve enough space for dynamic content, like ads or promos.
28. Avoid inserting new content above existing content, unless in response to a user interaction.
29. Mini-demo: Ads/Promos without dimensions
30. <style> .container { display: block; width: 720px; height: 90px; background: #ccc; overflow:hidden; } </style> <div class="container"> <iframe src="..."> </div> Container Content in Container Content in Container - different size
31. Mini-demo: Ads/Promos with dimensions
32. Mini-Demo: Lighthouse 6.0 impact
33. Product Listing Page
35. Product Listing Page: unexpected promo banner layout shifts CLS
36. CLS Product Listing Page: unexpected promo banner layout shifts Before
37. Reserve space of promotional banner CLS Banner was inline and API call originally came from a client-side service using JavaScript Moved this API call to the server and reserved space With a simple height setting.
38. CLS Product Listing Page: unexpected promo banner layout shifts After
39. CLS Filters UI: Poor CLS due to re-hydration Before
40. CLS Filters UI: Poor CLS due to re-hydration Before
41. CLS Filters UI: Improved CLS after re-hydration fix After Before/After
44. To improve CLS, Chloe acted on many elements: 1. Reserving the space of the Promo Content in terms of ratio. 2. Adopt Skeleton Pattern to render some colored rectangles prior to Product images loading. 3. Reserve the space for the Promo Banner async request before receiving the message. 4. Reserved the space for the Filters dynamic component. CLS
45. LOL MORE METRICS
47. Slow Server Response Times Render-blocking JavaScript and CSS Slow Resource Load Times Client-side Rendering What causes poor LCP?
48. Homepage LCP Before 1. LCP: 10s 2. LCP Related Node Start Request time: 5.3s 3. LCP Related Node Size: 591KB. 4. LCP Related Node Content Download time: 4437ms. LCP
49. Elements that affect LCP 1. <img> elements 2. <image> elements inside an <svg> element 3. <video> elements (if specified, the poster image is used to measure LCP) 4. An element with a background image loaded via the url() function (as opposed to a CSS gradient) 5. Block-level elements containing text nodes or other inline-level text elements
50. For many sites, images are the largest element in view when the page has finished loading. Optimize them.
51. LCP What element was identified as LCP?
52. LCP What element was identified as LCP?
53. Homepage: Overly high Retina images (e.g 1920w) LCP
54. Homepage: Removed overly large srcset sizes LCP -51% less KB downloaded
55. Image Optimizations (PLP) Total ATF Image downloaded size 248KB. Each image at JPEG quality 85%, size 400px
56. Image Optimizations 1. Adopt an image CDN. 2. Adopted WebP by default. 3. Resized images to 282px intrinsic size - while in the viewport images have size of 152px max (right balance on Retina devices). 4. They tuned in the Lazy loader to better avoid requesting offscreen images. Total ATF Image downloaded size 14.5KB Each product page now weighs 57% less
57. Homepage LCP After (Redesign) 1. LCP: 4s 2. LCP Related Node Start Request Time: 1360s 3. LCP Related Node Size: 238KB 4. LCP Related Node Content Download time: 1679 ms LCP
58. Defer any non-critical JavaScript and CSS to speed up loading of the main content of your web page.
59. LCP Product Listings Page
60. Render-blocking CSS LCP
61. Critical CSS LCP Product Listings Page
62. .topBannerWrapper & { height: topbanner(minHeight); z-index: 1; opacity: 1; @include backgroundLoading(); critical: this; &.laif-topbanner { .imgWrapper, .overlay { opacity: 0; transition: opacity 300ms ease-in; critical: this; } &.laif-loaded { .imgWrapper, .overlay { opacity: 1; } &::before { content: unset; LCP
63. for (var i = 0; i < CssFiles.media.length; i++) { var link = document.createElement("link"); link.href = CssFiles.media[i]; link.type = "text/css"; link.rel = "stylesheet"; link.media = "print"; link.onload = link.media = "all"; document.getElementsByTagName("head") [0].appendChild(link); } LCP
64. Impact of Critical CSS Optimizations Inlined critical CSS Deferred load of non-critical CSS LCP
65. A faster server response time directly improves every single page-load metric, including LCP.
66. How can I tell if I have slow server response times?
67. Server Push LCP
68. Link: </css/styles.css>; rel=preload; as=style, </js/ scripts.js>; rel=preload; as=script, </img/logo.png>; rel=preload; as=image LCP
69. Server Push Impact LCP
71. Long Tasks Long JavaScript Execution Time Large JavaScript Bundles Render-blocking JavaScript What causes poor FID?
72. Overall Core Web Vitals Improvements - Lab Before CLS + LCP Improvements After CLS fix on Promo Banner and Filters widgets CLS 0.4 -> 0 Critical CSS, Image resizing etc. LCP 2.9s -> 1.5s
73. Largest Contentful Paint CrUX First Input Delay CrUX Cumulative Layout Shift CrUX Overall Core Web Vitals Improvements - Field
74. CrUX Dashboard & CrUX API LCP const KEY = apiKey; async function (requestBody) { const endpointUrl = 'https://chromeuxreport.googleapis.com/v1/ records:queryRecord'; const resp = await fetch(`${endpointUrl}?key=${KEY}`, { method: 'POST', body: JSON.stringify(requestBody), }); const json = await resp.json(); if (!resp.ok) { throw new Error(json.error.message); } return json;
75. web.dev/vitals Optimize your Web Vitals
76. Template slides The following slide is to be used for marketing and promotional purposes only.
77. Heading here Three columns When the cheese comes out everybody's happy st. agur blue cheese dolcelatte. Cheeseburger cheesy grin babybel caerphilly blue castello mozzarella pepper jack babybel. Stilton melted cheese cut the cheese stilton cheesy feet cheese strings say cheese halloumi. Heading here When the cheese comes out everybody's happy st. agur blue cheese dolcelatte. Cheeseburger cheesy grin babybel caerphilly blue castello mozzarella pepper jack babybel. Stilton melted cheese cut the cheese stilton cheesy feet cheese strings say cheese halloumi. Heading here When the cheese comes out everybody's happy st. agur blue cheese dolcelatte. Cheeseburger cheesy grin babybel caerphilly blue castello mozzarella pepper jack babybel. Stilton melted cheese cut the cheese stilton cheesy feet cheese strings say cheese halloumi.
78. Heading here Three columns — callout When the cheese comes out everybody's happy st. agur blue cheese dolcelatte. Cheeseburger cheesy grin babybel caerphilly blue castello mozzarella pepper jack babybel. Stilton melted cheese cut the cheese stilton cheesy feet cheese strings say cheese halloumi. Heading here When the cheese comes out everybody's happy st. agur blue cheese dolcelatte. Cheeseburger cheesy grin babybel caerphilly blue castello mozzarella pepper jack babybel. Stilton melted cheese cut the cheese stilton cheesy feet cheese strings say cheese halloumi. Heading here When the cheese comes out everybody's happy st. agur blue cheese dolcelatte. Cheeseburger cheesy grin babybel caerphilly blue castello mozzarella pepper jack babybel. Stilton melted cheese cut the cheese stilton cheesy feet cheese strings say cheese halloumi.
79. Heading here Four columns When the cheese comes out everybody's happy st. agur blue cheese dolcelatte. Cheeseburger cheesy grin babybel caerphilly blue castello mozzarella pepper jack babybel. Stilton melted cheese cut the cheese stilton cheesy feet cheese strings say cheese halloumi. Heading here When the cheese comes out everybody's happy st. agur blue cheese dolcelatte. Cheeseburger cheesy grin babybel caerphilly blue castello mozzarella pepper jack babybel. Stilton melted cheese cut the cheese stilton cheesy feet cheese strings say cheese halloumi. Heading here When the cheese comes out everybody's happy st. agur blue cheese dolcelatte. Cheeseburger cheesy grin babybel caerphilly blue castello mozzarella pepper jack babybel. Stilton melted cheese cut the cheese stilton cheesy feet cheese strings say cheese halloumi. Heading here When the cheese comes out everybody's happy st. agur blue cheese dolcelatte. Cheeseburger cheesy grin babybel caerphilly blue castello mozzarella pepper jack babybel. Stilton melted cheese cut the cheese stilton cheesy feet cheese strings say cheese halloumi.
80. protected void onTryUpdate(int reason) throws RetryException { // Do some awesome stuff int foo = 15; publishArtwork(new Artwork.Builder() .title(photo.name) .imageUri(Uri.parse(photo.image_url)) .viewIntent(new Intent(Intent.ACTION_VIEW, Uri.parse(“http://500px.com/photo/" + photo.id))) .build()); scheduleUpdate(System.currentTimeMillis() + ROTATE_TIME_MILLIS); }
81. When the cheese comes out everybody's happy st. agur blue cheese dolcelatte. Cheeseburger cheesy grin babybel caerphilly blue castello mozzarella pepper jack babybel. Stilton melted cheese cut the cheese stilton cheesy feet cheese strings say cheese halloumi. Mobile Close Up
82. When the cheese comes out everybody's happy st. agur blue cheese dolcelatte. Cheeseburger cheesy grin babybel caerphilly blue castello mozzarella pepper jack babybel. Stilton melted cheese cut the cheese stilton cheesy feet cheese strings say cheese halloumi. Mobile Close Up 2
83. When the cheese comes out everybody's happy st. agur blue cheese dolcelatte. A. Cheeseburger cheesy grin babybel caerphilly blue castello mozzarella pepper jack babybel. 
 B. Stilton melted cheese cut the cheese stilton cheesy feet cheese strings say cheese halloumi. Mobile Close Up Callouts A B
84. When the cheese comes out everybody's happy st. agur blue cheese dolcelatte. Cheeseburger cheesy grin babybel caerphilly blue castello mozzarella pepper jack babybel. Stilton melted cheese cut the cheese stilton cheesy feet cheese strings say cheese halloumi. Laptop Large
85. When the cheese comes out everybody's happy st. agur blue cheese dolcelatte. Cheeseburger cheesy grin babybel caerphilly blue castello mozzarella pepper jack babybel. Stilton melted cheese cut the cheese stilton cheesy feet cheese strings say cheese halloumi. Laptop Small
86. When the cheese comes out everybody's happy st. agur blue cheese dolcelatte. Cheeseburger cheesy grin babybel caerphilly blue castello mozzarella pepper jack babybel. Stilton melted cheese cut the cheese stilton cheesy feet cheese strings say cheese halloumi. Monitor
87. protected void onTryUpdate(int reason) throws RetryException { // Do some awesome stuff int foo = 15; publishArtwork(new Artwork.Builder() .title(photo.name) .imageUri(Uri.parse(photo.image_url)) .viewIntent(new Intent(Intent.ACTION_VIEW, Uri.parse(“http://500px.com/photo/" + photo.id))) .build()); scheduleUpdate(System.currentTimeMillis() + ROTATE_TIME_MILLIS); }
88. Photo & Text 
 When the cheese comes out everybody's happy st. agur blue cheese dolcelatte. Cheeseburger cheesy grin babybel caerphilly blue castello mozzarella pepper jack babybel. Stilton melted cheese cut the cheese stilton cheesy feet cheese strings say cheese halloumi.
89. Heading here Heading here Heading here Timeline Heading here Inactive [replace where needed]
90. When the cheese comes out everybody's happy st. agur blue cheese dolcelatte. Cheeseburger cheesy grin babybel caerphilly blue castello mozzarella pepper jack babybel. Stilton melted cheese cut the cheese stilton cheesy feet cheese strings say cheese halloumi. Bar Chart A B C D E 0 10 20 30 40
91. Table Large Text Text Text Text Text Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here
92. Table Small Text Text Text Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here Text Here When the cheese comes out everybody's happy st. agur blue cheese dolcelatte. Cheeseburger cheesy grin babybel caerphilly blue castello mozzarella pepper jack babybel. Stilton melted cheese cut the cheese stilton cheesy feet cheese strings say cheese halloumi.
93. Firstname Lastname Title / Position 
 
 @socialhandle Firstname Lastname Title / Position 
 
 @socialhandle Firstname Lastname Title / Position 
 
 @socialhandle
94. Firstname Lastname Title / Position 
 
 @socialhandle Firstname Lastname Title / Position 
 
 @socialhandle Firstname Lastname Title / Position 
 
 @socialhandle Firstname Lastname Title / Position 
 
 @socialhandle
96. Slide Title 1. Here’s the thing 
 2. And because of that, this 
 3. At the same time, there’s this thing 
 4. That pretty much sums it up
97. Heading here Heading here Two columns When the cheese comes out everybody's happy st. agur blue cheese dolcelatte. Cheeseburger cheesy grin babybel caerphilly blue castello mozzarella pepper jack babybel. Stilton melted cheese cut the cheese stilton cheesy feet cheese strings say cheese halloumi. When the cheese comes out everybody's happy cut the cheese babybel taleggio bavarian bergkase st. agur blue cheese cheese on toast caerphilly. Cheddar. When the cheese comes out everybody's happy st. agur blue cheese dolcelatte. Cheeseburger cheesy grin babybel caerphilly blue castello mozzarella pepper jack babybel. Stilton melted cheese cut the cheese stilton cheesy feet cheese strings say cheese halloumi. When the cheese comes out everybody's happy cut the cheese babybel taleggio bavarian bergkase st. agur blue cheese cheese on toast caerphilly. Cheddar.
98. When the cheese comes out everybody's happy st. agur blue cheese dolcelatte. Cheeseburger cheesy grin babybel caerphilly blue castello mozzarella pepper jack babybel. Stilton melted cheese cut the cheese stilton cheesy feet cheese strings say cheese halloumi. When the cheese comes out everybody's happy cut the cheese babybel taleggio bavarian bergkase st. agur blue cheese cheese on toast caerphilly. Cheddar. • When the cheese comes out everybody's happy • Who moved my cheese stinking bishop queso st. agur blue cheese cheesy grin caerphilly brie edam. • Cauliflower cheese pepper jack emmental the big cheese the big cheese the big cheese mozzarella babybel. Bavarian bergkase cheesy grin caerphilly pecorino edam monterey jack cottage cheese halloumi. Bocconcini croque monsieur pecorino. Half paragraph / half bullets
99. When the cheese comes out everybody's happy st. agur blue cheese dolcelatte. Cheeseburger cheesy grin babybel caerphilly blue castello mozzarella pepper jack babybel. Stilton melted cheese cut the cheese stilton cheesy feet cheese strings say cheese halloumi. When the cheese comes out everybody's happy cut the cheese babybel taleggio bavarian bergkase st. agur blue cheese cheese on toast caerphilly. Cheddar. Half paragraph / half quote “Mascarpone halloumi brie taleggio edam halloumi cheese and biscuits gooey cheese.”
100. When the cheese comes out everybody's happy st. agur blue cheese dolcelatte. Cheeseburger cheesy grin babybel caerphilly blue castello mozzarella pepper jack babybel. Stilton melted cheese cut the cheese stilton cheesy feet cheese strings say cheese halloumi. Mobile Close Up 2