Successfully reported this slideshow.

Business Success with Core Web Vitals

8

Share

Loading in …3
×
1 of 158
1 of 158

Business Success with Core Web Vitals

8

Share

Download to read offline

In May 2021, Core Web Vitals will become part of the Page Experience ranking signal, meaning failing to improve negative user experiences could result in ranking losses. Not only that, but these metrics enable you to better measure and quantify UX so you need to pay attention to them to avoid frustrated website visitors!

This talk covers many areas around:
- What Core Web Vitals are and how you can improve them
- How to effectively measure them with your toolset
- Becoming an advocate within your company to get technical improvements shipped
- Case studies from existing domains that could do with some CWV TLC!

Happy Optimizing!

In May 2021, Core Web Vitals will become part of the Page Experience ranking signal, meaning failing to improve negative user experiences could result in ranking losses. Not only that, but these metrics enable you to better measure and quantify UX so you need to pay attention to them to avoid frustrated website visitors!

This talk covers many areas around:
- What Core Web Vitals are and how you can improve them
- How to effectively measure them with your toolset
- Becoming an advocate within your company to get technical improvements shipped
- Case studies from existing domains that could do with some CWV TLC!

Happy Optimizing!

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Business Success with Core Web Vitals

  1. 1. #SMX BUSINESS SUCCESS WITH CORE WEB VITALS
  2. 2. #SMX ABOUT ME ➔ Technical SEO Analyst @ Ryte ◆ Sparring partner ◆ Marketeer ➔ Previously worked in-house & consulting side ➔ Loves giving community talks ➔ Loves cheesy jokes ➔ @izzionfire
  3. 3. #SMX AGENDA 1. Core Web Vitals in a nutshell 2. Page Experience as a ranking factor 3. How to correctly measure the CWV scores 4. Optimizing Core Web Vitals 5. Becoming a Page Experience advocate! 6. Quick case studies 7. Q&A
  4. 4. #SMX Core Web Vitals (CWV) in a nutshell
  5. 5. #SMXCopyright © 2020, Ryte GmbH, All rights reserved For now, we have:
  6. 6. #SMX Largest Contentful Paint (LCP)
  7. 7. #SMXCopyright © 2020, Ryte GmbH, All rights reserved The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport. Largest Contentful Paint Largest Element
  8. 8. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Largest Contentful Paint > First Contentful Paint ¯_(ツ)_/¯
  9. 9. #SMXCopyright © 2020, Ryte GmbH, All rights reserved 1. Pages load in stages, the largest element is subject to change 2. The browser dispatches a PerformanceEntry of type largest-contentful-paint that will identify the element as soon as the browser has painted the first frame. 3. It will dispatch another PerformanceEntry as soon as this changes! Largest Elements for a page can change as it loads Here is my H1 Here is my H1 Here is my H1 Here is my H1 Here is my H1 I am a paragraph! I am a paragraph! I am a fun paragraph! I am a cool paragraph! paragraph! I am a section of text about cool things like paragraphs! I am a paragraph! I am a paragraph! I am a fun paragraph! I am a cool paragraph! paragraph! I am a section of text about cool things like paragraphs! I am a paragraph! I am a paragraph! I am a fun paragraph! I am a cool paragraph! paragraph! I am a section of text about cool things like paragraphs! I am a paragraph! I am a paragraph! I am a fun paragraph! I am a cool paragraph! paragraph! I am a section of text about cool things like paragraphs! PerformanceEntry PerformanceEntry PerformanceEntry
  10. 10. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Find the culprit in DevTools -> Performance
  11. 11. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Largest Elements don’t have to be images, or rendered last
  12. 12. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Elements considered for LCP (for now) <img> or <image> elements inside an <svg> element The poster image of <video> elements Block-level elements containing text (a typical webpage text element)
  13. 13. #SMX First Input Delay (FID)
  14. 14. #SMXCopyright © 2020, Ryte GmbH, All rights reserved First Input Delay (FID) helps estimate and measure when a user can first interact with a page’s core elements. If the main thread is busy loading other elements, this can impact FID. First Input Delay (interactivity) 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. Polite Cats read more
  15. 15. #SMXCopyright © 2020, Ryte GmbH, All rights reserved What impacts First Input Delay?
  16. 16. #SMXCopyright © 2020, Ryte GmbH, All rights reserved What impacts First Input Delay? First Input Delay
  17. 17. #SMXCopyright © 2020, Ryte GmbH, All rights reserved A great FID guide from Onely!
  18. 18. #SMX Cumulative Layout Shift (CLS)
  19. 19. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Cumulative Layout Shift (visual stability) Cumulative Layout Shift (CLS) helps quantify unexpected layout shifts and therefore we can determine how visually stable a page is!
  20. 20. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Cumulative Layout Shift (visual stability) Cumulative Layout Shift (CLS) helps quantify unexpected layout shifts and therefore we can determine how visually stable a page is! 1
  21. 21. #SMX
  22. 22. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Unexpected movement of page elements can take place when resources are loaded asynchronously of DOM elements get injected above existing content. This results in frustrations and bad user experiences. The common culprits that affect CLS Polite Cat sticker The most politest cat sticker you’ve ever seen. free shipping read more $2 Polite Cat sticker The most politest cat sticker you’ve ever seen. $2 read more buy now Polite Cat sticker Polite Cat sticker The most politest cat sticker you’ve ever seen. Polite Cat sticker The most politest cat sticker you’ve ever seen. $2
  23. 23. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Thanks @defaced! https://defaced.dev/tools/layout-shift-gif-generator/
  24. 24. #SMX CWV as a Ranking Factor
  25. 25. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Introducing: the Page Experience Update
  26. 26. #SMXCopyright © 2020, Ryte GmbH, All rights reserved CWV will contribute to a Page Experience metric
  27. 27. #SMX
  28. 28. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Of course, Page Experience is not everything!
  29. 29. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Don’t just forget other important signals
  30. 30. #SMX
  31. 31. #SMXCopyright © 2020, Ryte GmbH, All rights reserved But Page Experience scorings can give you a firm edge No Excuses in 2021
  32. 32. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Recent news: Page Experience Update is coming in May 2021
  33. 33. #SMXCopyright © 2020, Ryte GmbH, All rights reserved News: Google will test visual indicators on the SERPs!
  34. 34. #SMXCopyright © 2020, Ryte GmbH, All rights reserved How could this look and behave? Who knows!
  35. 35. #SMXCopyright © 2020, Ryte GmbH, All rights reserved A SERP test from 2015 showed slow pages
  36. 36. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Something like this? 🤔 Secure Safe Fast Mobile Friendly Secure Safe Slow Not Mobile Friendly
  37. 37. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Something like this? 🤔 Secure Slow performanceSafe browsing Not mobile friendly Secure Fast performanceSafe browsing Mobile friendly
  38. 38. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Something like this? 🤔 45 90
  39. 39. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Indicator being tested found on 4th December
  40. 40. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Are you ready for the Page Experience Update?
  41. 41. #SMX Effective measurement of CWV
  42. 42. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Google Lighthouse
  43. 43. #SMXCopyright © 2020, Ryte GmbH, All rights reserved
  44. 44. #SMXCopyright © 2020, Ryte GmbH, All rights reserved What makes up the Lighthouse Performance score?
  45. 45. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Lighthouse weights are frequently updated -5% -12% -18% NEW NEW NEW
  46. 46. #SMXCopyright © 2020, Ryte GmbH, All rights reserved
  47. 47. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Page Speed Insights
  48. 48. #SMX 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 device. 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
  49. 49. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Check the Onely Map for Chrome usage stats
  50. 50. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Ryte Website Success: New Web Vitals Report
  51. 51. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Related to FID: Total Blocking Time TBT measures the total amount of time that a page is blocked from responding to user input, such as mouse clicks, screen taps, or keyboard presses.
  52. 52. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Related to FID: Total Blocking Time
  53. 53. #SMX What are the main causes of poor CWV scores?
  54. 54. #SMXCopyright © 2020, Ryte GmbH, All rights reserved The main causes of poor CWV scores: ● Slow server response times ● Render-blocking JavaScript & CSS ● Slow resource load times ● Client-side rendering ● Long tasks on the main thread ● Long JS execution time ● Render-blocking JS ● Images without dimensions ● Dynamically injected content ● Actions waiting for a network response ● Ads & iframes without dimensions
  55. 55. #SMXCopyright © 2020, Ryte GmbH, All rights reserved We’ll need developers, but let’s cover that later!
  56. 56. #SMX How to improve Largest Contentful Paint
  57. 57. #SMX Combat problems that contribute to slow server responses
  58. 58. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Optimize your server to improve response times client server
  59. 59. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Optimize your server to improve response times 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. Polite Cats read more client server request response 500kb cat.js 300kb sticker.css 200kb login.js
  60. 60. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Optimize your server to improve response times 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. Polite Cats read more client server request response
  61. 61. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Cache static assets that don’t update frequently 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. Polite Cats read more client server request response sticker.css cat.js login.js
  62. 62. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Leverage Cache-Control
  63. 63. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Some useful example directives.
  64. 64. #SMXCopyright © 2020, Ryte GmbH, All rights reserved 30 days
  65. 65. #SMXCopyright © 2020, Ryte GmbH, All rights reserved
  66. 66. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Preconnect to establish 3rd party connections early Inform the browser that the page intends to establish a connection ASAP
  67. 67. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Use a CDN (Content Delivery Network)
  68. 68. #SMX Deal with render-blocking assets and scripts
  69. 69. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Render-blocking CSS and JavaScript
  70. 70. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Optimizing Critical CSS 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. Polite Cats read more Who is polite cat? Height: 183cm Birthday: 18.08.1993 Favourite food: Takoyaki Favourite colour: Green quick facts Above-the-fold CSS is extracted first in order to ensure a faster page load. Below-the-fold CSS is deferred.
  71. 71. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Simple ways of generating critical CSS (sitelocity)
  72. 72. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Simple ways of generating Critical CSS (WP)
  73. 73. #SMX Speed up resource load times
  74. 74. #SMXCopyright © 2020, Ryte GmbH, All rights reserved 1. Run a crawl to test if compression is already in place 2. Choose a compression algorithm (Brotli / GZIP) 3. Compress assets ahead of time during the build process to prevent delays and minimize server overhead Compress resources to improve slow resource load times! Compress Text Files
  75. 75. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Compress Image Files 1. Compress images with existing services or plugins (Smush, TinyPNG) 2. Convert images into next gen formats like WebP or JPEG 2000 3. Consider using an image CDN to speed up delivery Compress resources to improve slow resource load times!
  76. 76. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Preload important resources (like fonts) Preload critical assets like fonts, above-the-fold images, and critical CSS & JS
  77. 77. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Tip: Preload the content of linked pages on hover
  78. 78. #SMX How to improve First Input Delay
  79. 79. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Serve what the user needs when they need it! First Input Delay
  80. 80. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Chrome DevTools > Performance Discover any unnecessary long tasks
  81. 81. #SMXCopyright © 2020, Ryte GmbH, All rights reserved View “Bottom Up” to see a detailed breakdown
  82. 82. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Find, assess, and clean up unused JS & CSS
  83. 83. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Head to “Coverage” under “more tools” or run command
  84. 84. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Reload the page and see which scripts are not used for first load
  85. 85. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Be careful! It’s always hard to see the full story.
  86. 86. #SMXCopyright © 2020, Ryte GmbH, All rights reserved ● Downloads in the background at a low priority ● Will not interrupt page rendering to be executed ● Executes in a sequence before the DOMContentLoaded event ● Use for JS resources that aren’t too critical to the initial rendering, and can be run later in the process ● Downloads in the background at a low priority ● Can interrupt page rendering to be executed ● Executes ASAP and in no particular order ● Best for high priority resources that should run as early as possible in the loading process Always use defer or async for scripts that are not necessary for the critical path defer async
  87. 87. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Code-Splitting bundles into necessary chunks Code splitting is a technique where, rather than loading your scripts as one big file, you break it up into smaller parts and only load what's needed on that page. For projects with large amounts of JavaScript, this can have a big improvement on performance.
  88. 88. #SMX How to improve Cumulative Layout Shift
  89. 89. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Web.dev live talk from Addy Osmani
  90. 90. #SMXCopyright © 2020, Ryte GmbH, All rights reserved DevTools > Performance > Experience
  91. 91. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Include width and height size attributes on image and video elements
  92. 92. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Include width and height size attributes on image and video elements - FIXED
  93. 93. #SMXCopyright © 2020, Ryte GmbH, All rights reserved ● 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. Handy tips for providing image dimensions 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
  94. 94. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Srcset helps define the best image for the viewport
  95. 95. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Reserve sufficient space for Ads, Embeds & Dynamic Content
  96. 96. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Reserve sufficient space for Ads, Embeds & Dynamic Content Statically style slot DOM elements with the same sizes passed to your tag library. This can help ensure the library doesn't introduce annoying layout shifts when it loads. 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
  97. 97. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Web Font Flickers aka. FOUT / FOIT (Flash of Unstyled / Invisible Text)
  98. 98. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Web Font Flickers (FOUT / FOIT)
  99. 99. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Ideally, preload key web fonts to try avoid the issue Preload critical assets like fonts, above-the-fold images, and critical CSS & JS
  100. 100. #SMX What can we as SEOs do?
  101. 101. #SMX Become a Page Experience advocate in your team!
  102. 102. #SMX Let’s have a coffee and chat about our CWV optimization
  103. 103. #SMXCopyright © 2020, Ryte GmbH, All rights reserved You know you’ve achieved SEO greatness when: I provide technical recommendations that are prioritized and clear My client / boss understands the importance of SEO My developers know who I am and are happy working with me My opinions are trusted by all stakeholders My opinions are valued by my client / boss.
  104. 104. #SMX My technical recommendations are not prioritized or clear My client / boss does not understand the importance of SEO My developers don’t know who I am! (My devs don’t like me.) My SEO opinions aren’t trusted by colleagues and stakeholders Improve your Project Management ● Understand the processes of your developers and command chain (Agile, Scrum) ● Learn more about existing projects and roadmaps ● Research into your existing tech stack ● Look into how you can better prioritize SEO issues (using JIRA / Trello) ● Get to know your POs and developers ● Host SEO education workshops or lightning talks Address the Expectation Management ● Provide clear explanation of SEO belongings, challenges, and benefits (confluence, quick meetings) ● Host SEO education workshops that report hard KPI improvements ● Before signing a client: understand and document their existing expectations & challenges ● What existing CMS / tech stack is the client using? Understand if you need a miracle with your time. My work is not valued within my department / company
  105. 105. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Evaluating the highest priorities of CWV Optimization Low Effort High Impact Low Impact High Effort �� ⭐
  106. 106. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Red colours scare stakeholders!
  107. 107. #SMXCopyright © 2020, Ryte GmbH, All rights reserved But before, you panic them, get your story straight.
  108. 108. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Prioritizing Core Web Vital optimizations with Ryte
  109. 109. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Focus on areas with a higher conversion possibility
  110. 110. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Try to find common structural / site-wide issues
  111. 111. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Narrow down the culprits that can be optimized
  112. 112. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Run a couple of URLs in Page Speed Insights
  113. 113. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Conduct an audit and dig into some key opportunities
  114. 114. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Derive some potential solutions based on your investigation, but dig into own solutions too
  115. 115. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Discuss your findings with devs to know their opinions on the matter If we just ordered and delivered the critical CSS we’d make everyone’s lives a bit easier. I made a suggestion here... Good spot! We have this blocker in place right now but I’m sure we can come up with a solution
  116. 116. #SMXCopyright © 2020, Ryte GmbH, All rights reserved See what processes the SEO can optimize too
  117. 117. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Prepare your strategy and action-plan, with prioritized fixes
  118. 118. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Keep everyone up-to-date on the business impact revenue
  119. 119. #SMX Quick case studies
  120. 120. #SMXCopyright © 2020, Ryte GmbH, All rights reserved
  121. 121. #SMXCopyright © 2020, Ryte GmbH, All rights reserved First thing’s first, let’s bulk analyze the website
  122. 122. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Local /shop/ pages are performing badly
  123. 123. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Not too much there.
  124. 124. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Digging into a specific URL, there are tons of render-blocking resources!
  125. 125. #SMXCopyright © 2020, Ryte GmbH, All rights reserved In the Performance tab, we can uncover the LCP at 4.7s
  126. 126. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Of course, this large hero image is the culprit!
  127. 127. #SMXCopyright © 2020, Ryte GmbH, All rights reserved This photo has a transfer size of 5.3MB 😭
  128. 128. #SMXCopyright © 2020, Ryte GmbH, All rights reserved The image should be effectively resized and
  129. 129. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Image CDN transformations could assist here
  130. 130. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Mixed Content for HTTP Images
  131. 131. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Same image issue again!
  132. 132. #SMXCopyright © 2020, Ryte GmbH, All rights reserved No need to have giant image resources here.
  133. 133. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Main Thread has not been optimized
  134. 134. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Google Maps scripts should be deferred
  135. 135. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Lets take a look at /product/ pages!
  136. 136. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Better, but still not great!
  137. 137. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Again, there are the same render-blocking resources
  138. 138. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Lazy-loading should be implemented
  139. 139. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Another product pages gives us the same issue
  140. 140. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Fixing this would impact a lot of pages ⚡
  141. 141. #SMXCopyright © 2020, Ryte GmbH, All rights reserved
  142. 142. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Let’s focus on /products/ again!
  143. 143. #SMXCopyright © 2020, Ryte GmbH, All rights reserved
  144. 144. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Already we can see the main culprit!
  145. 145. #SMXCopyright © 2020, Ryte GmbH, All rights reserved
  146. 146. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Do they need so many gifs?!
  147. 147. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Tip: Use WebM videos with “gif-like” settings
  148. 148. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Tip: Use WebM videos with “gif-like” settings
  149. 149. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Worth it!
  150. 150. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Is it necessary?!
  151. 151. #SMXCopyright © 2020, Ryte GmbH, All rights reserved
  152. 152. #SMXCopyright © 2020, Ryte GmbH, All rights reserved
  153. 153. #SMXCopyright © 2020, Ryte GmbH, All rights reserved
  154. 154. #SMXCopyright © 2020, Ryte GmbH, All rights reserved ● Removed parallax effect from homepage ● Created new, lightweight logo ● Properly sized images with height and width ● Set-up correct aspect ratio for images ● Compressed images (using Smush) & converted GIFs to WebM ● Configured asset caching using W3 Total Cache ● Updated used plugins, and removed all unnecessary plugins ● Updated to newest version of PHP ● Created critical CSS file for each page ● Merged and minified necessary JS and CSS ● Made sure lazy loading was working fine ● Set key fonts to be preloaded ● Made sure images utilized srcset ● I developed a new love of page experience optimization! My quick fixes of last weekend
  155. 155. #SMXCopyright © 2020, Ryte GmbH, All rights reserved My poor CLS has gotten a lot better :)
  156. 156. #SMXCopyright © 2020, Ryte GmbH, All rights reserved Further reading: ● https://web.dev/optimize-lcp/ ● https://web.dev/optimize-fid/ ● https://web.dev/optimize-cls/ ● https://www.onely.com/blog/what-is-first-input-delay/ ● https://www.youtube.com/watch?v=AQqFZ5t8uNc&feature=emb_title ● https://developers.google.com/web/fundamentals/performance/speed-tools ● https://css-tricks.com/aspect-ratio-boxes/ ● https://defaced.dev/tools/layout-shift-gif-generator/ ● https://en.ryte.com/product-insights/web-vitals
  157. 157. #SMXCopyright © 2020, Ryte GmbH, All rights reserved ❏ Do your best to get up-to-scratch on Core Web Vitals technicalities ❏ Assess your website’s pages in bulk first to find commonalities and affected subfolders ❏ Get involved in conversations with your website POs and developers! ❏ Provide educated hypotheses as to what is impacting the Vital, and how you can work together with development teams to improve that ❏ See whether you need to improve Project Management skills or address the Expectation Management. ❏ If you can, test and play around with some principles on your own websites My key learnings for you all
  158. 158. #SMX Thanks! Happy optimizing

×