Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

Business Success With Core Web Vitals | Izzi Smith Slide 1 Business Success With Core Web Vitals | Izzi Smith Slide 2 Business Success With Core Web Vitals | Izzi Smith Slide 3 Business Success With Core Web Vitals | Izzi Smith Slide 4 Business Success With Core Web Vitals | Izzi Smith Slide 5 Business Success With Core Web Vitals | Izzi Smith Slide 6 Business Success With Core Web Vitals | Izzi Smith Slide 7 Business Success With Core Web Vitals | Izzi Smith Slide 8 Business Success With Core Web Vitals | Izzi Smith Slide 9 Business Success With Core Web Vitals | Izzi Smith Slide 10 Business Success With Core Web Vitals | Izzi Smith Slide 11 Business Success With Core Web Vitals | Izzi Smith Slide 12 Business Success With Core Web Vitals | Izzi Smith Slide 13 Business Success With Core Web Vitals | Izzi Smith Slide 14 Business Success With Core Web Vitals | Izzi Smith Slide 15 Business Success With Core Web Vitals | Izzi Smith Slide 16 Business Success With Core Web Vitals | Izzi Smith Slide 17 Business Success With Core Web Vitals | Izzi Smith Slide 18 Business Success With Core Web Vitals | Izzi Smith Slide 19 Business Success With Core Web Vitals | Izzi Smith Slide 20 Business Success With Core Web Vitals | Izzi Smith Slide 21 Business Success With Core Web Vitals | Izzi Smith Slide 22 Business Success With Core Web Vitals | Izzi Smith Slide 23 Business Success With Core Web Vitals | Izzi Smith Slide 24 Business Success With Core Web Vitals | Izzi Smith Slide 25 Business Success With Core Web Vitals | Izzi Smith Slide 26 Business Success With Core Web Vitals | Izzi Smith Slide 27 Business Success With Core Web Vitals | Izzi Smith Slide 28 Business Success With Core Web Vitals | Izzi Smith Slide 29 Business Success With Core Web Vitals | Izzi Smith Slide 30 Business Success With Core Web Vitals | Izzi Smith Slide 31 Business Success With Core Web Vitals | Izzi Smith Slide 32 Business Success With Core Web Vitals | Izzi Smith Slide 33 Business Success With Core Web Vitals | Izzi Smith Slide 34 Business Success With Core Web Vitals | Izzi Smith Slide 35 Business Success With Core Web Vitals | Izzi Smith Slide 36 Business Success With Core Web Vitals | Izzi Smith Slide 37 Business Success With Core Web Vitals | Izzi Smith Slide 38 Business Success With Core Web Vitals | Izzi Smith Slide 39 Business Success With Core Web Vitals | Izzi Smith Slide 40 Business Success With Core Web Vitals | Izzi Smith Slide 41 Business Success With Core Web Vitals | Izzi Smith Slide 42 Business Success With Core Web Vitals | Izzi Smith Slide 43 Business Success With Core Web Vitals | Izzi Smith Slide 44 Business Success With Core Web Vitals | Izzi Smith Slide 45 Business Success With Core Web Vitals | Izzi Smith Slide 46 Business Success With Core Web Vitals | Izzi Smith Slide 47 Business Success With Core Web Vitals | Izzi Smith Slide 48 Business Success With Core Web Vitals | Izzi Smith Slide 49 Business Success With Core Web Vitals | Izzi Smith Slide 50 Business Success With Core Web Vitals | Izzi Smith Slide 51 Business Success With Core Web Vitals | Izzi Smith Slide 52 Business Success With Core Web Vitals | Izzi Smith Slide 53 Business Success With Core Web Vitals | Izzi Smith Slide 54 Business Success With Core Web Vitals | Izzi Smith Slide 55 Business Success With Core Web Vitals | Izzi Smith Slide 56 Business Success With Core Web Vitals | Izzi Smith Slide 57 Business Success With Core Web Vitals | Izzi Smith Slide 58 Business Success With Core Web Vitals | Izzi Smith Slide 59 Business Success With Core Web Vitals | Izzi Smith Slide 60 Business Success With Core Web Vitals | Izzi Smith Slide 61 Business Success With Core Web Vitals | Izzi Smith Slide 62 Business Success With Core Web Vitals | Izzi Smith Slide 63 Business Success With Core Web Vitals | Izzi Smith Slide 64 Business Success With Core Web Vitals | Izzi Smith Slide 65 Business Success With Core Web Vitals | Izzi Smith Slide 66 Business Success With Core Web Vitals | Izzi Smith Slide 67 Business Success With Core Web Vitals | Izzi Smith Slide 68 Business Success With Core Web Vitals | Izzi Smith Slide 69 Business Success With Core Web Vitals | Izzi Smith Slide 70 Business Success With Core Web Vitals | Izzi Smith Slide 71 Business Success With Core Web Vitals | Izzi Smith Slide 72 Business Success With Core Web Vitals | Izzi Smith Slide 73 Business Success With Core Web Vitals | Izzi Smith Slide 74 Business Success With Core Web Vitals | Izzi Smith Slide 75 Business Success With Core Web Vitals | Izzi Smith Slide 76 Business Success With Core Web Vitals | Izzi Smith Slide 77 Business Success With Core Web Vitals | Izzi Smith Slide 78 Business Success With Core Web Vitals | Izzi Smith Slide 79 Business Success With Core Web Vitals | Izzi Smith Slide 80 Business Success With Core Web Vitals | Izzi Smith Slide 81 Business Success With Core Web Vitals | Izzi Smith Slide 82 Business Success With Core Web Vitals | Izzi Smith Slide 83 Business Success With Core Web Vitals | Izzi Smith Slide 84 Business Success With Core Web Vitals | Izzi Smith Slide 85 Business Success With Core Web Vitals | Izzi Smith Slide 86 Business Success With Core Web Vitals | Izzi Smith Slide 87
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

Business Success With Core Web Vitals | Izzi Smith

Download to read offline

These are Izzi's slides from Digital Gaggle in May 2021.

Talk Description:

Potential ranking boost aside, improving your Core Web Vitals means providing stronger and more stable experiences for website visitors so it’s definitely worth our attention in 2021. However, these metrics can be difficult to grasp and even harder to improve. Not to worry! Izzi will be demystifying the Core Web Vital metrics and speed tooling, giving advice on how to improve them, and top tips on getting stakeholder buy-in, all with some juicy case studies from successful (and not so successful) domains.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Business Success With Core Web Vitals | Izzi Smith

  1. 1. BUSINESS SUCCESS WITH CORE WEB VITALS
  2. 2. Hey, I’m Izzi Smith! Technical SEO Lead @ Ryte Previously worked in-house & consulting side Loves giving community talks Loves cheesy jokes @izzionfire
  3. 3. HELLO HAVE YOU HEARD ABOUT CORE WEB VITALS
  4. 4. Core Web Vitals!
  5. 5. Core Web What?
  6. 6. Core Web Vitals each represent a distinct facet of the User Experience
  7. 7. Largest Contentful Paint (LCP) The LCP metric reports the render time of the largest image or text block visible within the viewport. LCP
  8. 8. Largest Element
  9. 9. First Input Delay (FID) helps estimate and measure when a user can first interact with a page’s core elements. First Input Delay (FID)
  10. 10. User Interaction 100 ms 200 ms 300 ms 400 ms 500 ms Response First Input Delay
  11. 11. Cumulative Layout Shift (CLS) CLS helps quantify unexpected layout shifts and helps determine how visually stable a page is. free shipping
  12. 12. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire
  13. 13. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire
  14. 14. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire
  15. 15. The Page Experience Update!
  16. 16. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire
  17. 17. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire good!
  18. 18. The Page Experience Update!
  19. 19. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire
  20. 20. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire 1. Evaluation Assess the current damage across all major page templates using appropriate speed tooling. 2. Prioritization Figure out the most critical issues depending on conversion/user engagement risk and impact. 3. Recommendation Reach out to developers/ POs and provide your advice and evidence without forcing solutions. 5. Implementation Measure the impact on your user engagement to prove benefits. Use these in future iterations. 4. Expectation Try to best communicate the impact of your suggestions, but grasp existing priorities and workload. 05 01 02 03 04 The Process of Website Iterations
  21. 21. Effective measurement of Core Web Vitals
  22. 22. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire Chrome Lighthouse
  23. 23. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire Chrome Lighthouse
  24. 24. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire Chrome Lighthouse
  25. 25. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire What makes up the Performance Score?
  26. 26. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire PageSpeed Insights
  27. 27. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire PageSpeed Insights
  28. 28. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire Real User Monitoring (RUM) data captured from actual users experiencing your pages with their unique network and device. Strengths: ● Captures the real-world experience ● Easier to correlate with business KPIs Weaknesses: ● Restricted set of metrics ● Limited capabilities for debugging ● Requires you to have existing significant visits to the site Used by: CrUX Report Page Speed Insights Data collected within a controlled environment with predefined network settings and devices. Strengths: ● Reproducible results are more helpful for debugging ● Easier to identify and isolate issues Weaknesses: ● Might not capture “real-world” problems that users face ● Might not be completely representative Used by: Lighthouse Page Speed Insights Lab data Field data Chrome Dev Tools Ryte Google Search Console
  29. 29. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire Ryte Web Vitals Report
  30. 30. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire Ryte Web Vitals Report Filter and narrow down the results by directory (or any criteria)
  31. 31. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire Ryte Web Vitals Report Locate the most affected directories to prioritize
  32. 32. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire Ryte Web Vitals Report Uncover any culprits like heavy assets to optimize
  33. 33. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire ☑ Evaluation Assess the current damage across all major page templates using appropriate speed tooling. ☑ Prioritization Figure out the most critical issues depending on conversion/user engagement risk and impact. 3. Recommendation Reach out to developers/ POs and provide your advice and evidence without forcing solutions. 5. Implementation Measure the impact on your user engagement to prove benefits. Use these in future iterations. 4. Expectation Try to best communicate the impact of your suggestions, but grasp existing priorities and workload. 05 01 02 03 04 The Process of Website Iterations
  34. 34. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire web.dev/learn-web-vitals/ Swot up on CWV recommendations
  35. 35. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire Swot up on CWV recommendations ryte.com/product/webinars
  36. 36. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire Have a test domain like a private blog
  37. 37. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire Have a test domain like a private blog
  38. 38. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire Start the conversation with Web teams Fancy a natter?
  39. 39. Real world cases
  40. 40. High LCP = Slow page!
  41. 41. Find the LCP culprit: Chrome DevTools -> Lighthouse
  42. 42. Find the LCP culprit: Chrome DevTools -> Performance Tab -> Timings
  43. 43. Different page, same problem
  44. 44. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire Some best practices for image performance optimization This image format is 26% smaller in size compared to PNGs, and becoming a new web standard. Convert to WebP format Prioritize the loading of important hero images by using <link rel=preload> Preload hero images This provides an array of image URLs so that browsers can choose the correct version per device. Use srcset for responsiveness Delivers the content from a closeby server, and can transform depending on the required device. Use an Image CDN The page can therefore be built with the appropriate space reserved for the image. Provide image dimensions Many compression services allow you to minimize the file size while maintaining an image’s quality. Always compress
  45. 45. above the fold has all the need-to-know information
  46. 46. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire Some best practices for image performance optimization This image format is 26% smaller in size compared to PNGs, and becoming a new web standard. Convert to WebP format Prioritize the loading of important hero images by using <link rel=preload> Preload hero images This provides an array of image URLs so that browsers can choose the correct version per device. Use srcset for responsiveness Delivers the content from a closeby server, and can transform depending on the required device. Use an Image CDN The page can therefore be built with the appropriate space reserved for the image. Provide image dimensions Many compression services allow you to minimize the file size while maintaining an image’s quality. Always compress Use the loading attribute to defer the loading of offscreen images that can be reached by scrolling. Lazy load offscreen imgs Do you need those 57 large stock photos for this financial advice article? I didn’t think so. Evaluate the purpose New New
  47. 47. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire
  48. 48. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire
  49. 49. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire CLS is normally <1
  50. 50. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire Dev Tools -> Performance -> enable Web Vitals
  51. 51. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire View layout shifts on the timeline
  52. 52. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire Main navigation and unstyled text Body copy is painted COVID Banner appears Image appears Cookie banner appears Loading animation Visualize the trace to locate problem elements
  53. 53. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire Reserve sufficient space for any incoming banners Polite Cat sticker The most politest cat sticker you’ve ever seen. read more $2 Polite Cat sticker The most politest cat sticker you’ve ever seen. read more $2 Polite Cat sticker $2 Polite Cat sticker Free shipping today
  54. 54. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire Preload key fonts to avoid flickers of unstyled text
  55. 55. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire Provide image height and width dimensions ● Always include the width and height size attributes on your images and video elements. ● Reserve the required space with aspect ratio boxes so that the browser can allocate the correct amount of space while the image loads. ● Utilize srcset for responsive images to allow the browser to select between the correct image dimension, depending on viewports. Polite Cat #1 Politest cats from all over the world. Who are they? Let’s find out. Here is the most polite cat of 2020. He’s a very polite lil guy. He is smol. Politest cats from all over the world. Who are they? Let’s find out. Here is the most polite cat of 2020. He’s a very polite lil guy. He is smol. Polite Cats read more buy stickers <img src="politecat.jpg" width="360" height="640" alt="A very polite cat"> 9:16 360 640
  56. 56. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire Find unused JS / CSS to remove or reduce
  57. 57. YOU GOT THIS!
  58. 58. Copyright © 2021, Ryte GmbH, All rights reserved @izzionfire Quick wins to improve CWV scores today Shared hosting plans can reduce response times, consider optimizing your hosting plan when relevant. Check your hosting Educate your SEO team and UX-minded colleagues on best practices for better pages. Educate others Provide Critical CSS and preload elements that are required for initial painting or above-the-fold area. Consider critical paths Provide dimensions, compress, preload hero images, lazy load, see previous slides! Optimize visual assets Ensure unnecessary plugins or elements are not wasting resources. And keep used ones up-to-date! Remove unused plugins A CDN caches content and serves assets from closeby locations, creating a faster loading time. Serve content with a CDN
  59. 59. THANK YOU. izzi@ryte.com en.ryte.com

These are Izzi's slides from Digital Gaggle in May 2021. Talk Description: Potential ranking boost aside, improving your Core Web Vitals means providing stronger and more stable experiences for website visitors so it’s definitely worth our attention in 2021. However, these metrics can be difficult to grasp and even harder to improve. Not to worry! Izzi will be demystifying the Core Web Vital metrics and speed tooling, giving advice on how to improve them, and top tips on getting stakeholder buy-in, all with some juicy case studies from successful (and not so successful) domains.

Views

Total views

157

On Slideshare

0

From embeds

0

Number of embeds

120

Actions

Downloads

1

Shares

0

Comments

0

Likes

0

×