Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Optimizing For Core Web Vitals

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/

96270e4c3e5e9806cf7245475c00b275?s=128

Addy Osmani

July 08, 2020
Tweet

More Decks by Addy Osmani

Other Decks in Technology

Transcript

  1. Optimizing for Core Web Vitals @addyosmani Engineering Manager, Chrome Tips

    & Tricks
  2. Case Study

  3. Page experience

  4. None
  5. None
  6. None
  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?
  10. None
  11. Homepage Product Listing Page Product Details Page

  12. None
  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

  34. None
  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

  42. None
  43. None
  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

  46. None
  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

  70. None
  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
  95. None
  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