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.
Upcoming SlideShare
What to Upload to SlideShare
What to Upload to SlideShare
Loading in …3
×
1 of 70

TechSEO Boost 2021 - Rendering Strategies: Measuring the Devil’s Details in Core Web Vitals

0

Share

Download to read offline

View the recording here: https://www.catalystdigital.com/techseoboost/#on-demand-recordings

Jamie Indigo, Technical SEO Consultant, DeepCrawl

Everyone's buzzing about Core Web Vitals, but we often overlook critical context-- these metrics are the results of how we render content. Let's deep dive into render mechanics, strategies, performance measurement and what's the best fit for your site. As with most things SEO: it's not about what you do; it's how you do it.

Related Books

Free with a 30 day trial from Scribd

See all

TechSEO Boost 2021 - Rendering Strategies: Measuring the Devil’s Details in Core Web Vitals

  1. 1. Your Name | @Twitterhandle | #TechSEOBoost Rendering Strategies: Measuring the Devil's Details in Core Web Vitals Jamie Indigo Technical SEO Consultant, DeepCrawl
  2. 2. Your Name | @Twitterhandle | #TechSEOBoost Rendering Strategies Measuring the Devil's Details in Core Web Vitals
  3. 3. Your Name | @Twitterhandle | #TechSEOBoost Image credit: Ian Myles Core Web Vitals are coming.
  4. 4. Your Name | @Twitterhandle | #TechSEOBoost ● Understand Core Web Vital metrics and measurement ● Where and how CWV occur ● Rendering strategies with their respective CWV pratfalls, and mitigation tactics Our quest
  5. 5. Your Name | @Twitterhandle | #TechSEOBoost Metrics and Measurements Core Web Vitals
  6. 6. Your Name | @Twitterhandle | #TechSEOBoost ⏳ Images via: The SEO's Guide to Google's Core Web Vitals
  7. 7. Your Name | @Twitterhandle | #TechSEOBoost Field Data is performance data collected from real page loads your users are experiencing in the wild. AKA Real User Monitoring (RUM) Crux data will be used in the Page Experience Ranking Signal. Crux = CWV source of truth Lab Data is performance data collected within a controlled environment with predefined device and network settings. AKA Emulated Data Use Lab Data for debugging performance issues and QAing fixes in lower environments. A quick note on Lab vs Field Data
  8. 8. Your Name | @Twitterhandle | #TechSEOBoost Represents: Perceived loading experience Measurement: the point in the page load timeline when the page's largest image or text block is visible within the viewport. Behavior: Pages using the same page templates typically share the same LCP node Largest Contentful Paint (LCP) LCP time (in milliseconds) Color-coding 0–2,500 Green (fast) 2,500-4,000 Orange (moderate) Over 4,000 Red (slow)
  9. 9. Your Name | @Twitterhandle | #TechSEOBoost What can be LCP? Text blocks Images Video posters
  10. 10. Your Name | @Twitterhandle | #TechSEOBoost 1. Open Chrome Dev Tools to the Performance panel 2. Tick 'Web Vitals' 3. Click the 'start profiling and reload page Define LCP using Chrome DevTools
  11. 11. Your Name | @Twitterhandle | #TechSEOBoost 1. In DevTools, navigate to the Timings section of the Performance panel 2. Hover over the LCP marker 3. The element(s) that correspond to LCP is detailed in the Related Node field Define LCP using Chrome DevTools
  12. 12. Your Name | @Twitterhandle | #TechSEOBoost Represents: Responsiveness to user input Measurement: the time from when a user first interacts with a page to the time when the browser is actually able to begin processing event handlers in response to that interaction. Behavior: FID is only available as field data. First Input Delay (FID)
  13. 13. Your Name | @Twitterhandle | #TechSEOBoost FID is a way of measuring main thread activity
  14. 14. Your Name | @Twitterhandle | #TechSEOBoost TBT Measures: Responsiveness to user input TBT Measurement: Total time in which the main thread is occupied by tasks taking more than 50ms to complete. Use Total Blocking Time (TBT) for lab tests
  15. 15. Your Name | @Twitterhandle | #TechSEOBoost Represents: Visual stability Measurement: a calculation based on the number of frames in which element(s) visually moves and the total distance in pixels the element(s) moved. Behavior: Often an element used across pages. Probably your cookie notice. Cumulative Layout Shift (CLS)
  16. 16. Your Name | @Twitterhandle | #TechSEOBoost CLS is marked in the experience row as “layout shift” Details appear in the summary section Identify CLS elements using Chrome DevTools
  17. 17. Your Name | @Twitterhandle | #TechSEOBoost Image credit: Joe Wue
  18. 18. Your Name | @Twitterhandle | #TechSEOBoost Mobile Screen Resolution Stats Worldwide 360 x 640
  19. 19. Your Name | @Twitterhandle | #TechSEOBoost Core Web Vitals measure how long it takes to complete the the script functions needed to paint the above the content.
  20. 20. Your Name | @Twitterhandle | #TechSEOBoost It's a simple formula User Screen Content
  21. 21. Your Name | @Twitterhandle | #TechSEOBoost the process of turning HTML into pixels Rendering:
  22. 22. Your Name | @Twitterhandle | #TechSEOBoost CWV Arena Pixel Pipeline
  23. 23. Your Name | @Twitterhandle | #TechSEOBoost The pixel pipeline JavaScript Style Layout Paint Composit e Handles work that will result in visual changes Examples: ● jQuery’s animate function ● Sorting a data set ● Adding DOM elements to the page
  24. 24. Your Name | @Twitterhandle | #TechSEOBoost DOM HTML HTML Parser DOM Tree JavaScript modifies or adds content to the DOM. @Jammer_volts Step 1: Parsing turns a chunk of HTML into DOM nodes
  25. 25. Your Name | @Twitterhandle | #TechSEOBoost Body h1 p img Before JavaScript Body h1 p img After JavaScript ol li li li p img
  26. 26. Your Name | @Twitterhandle | #TechSEOBoost The pixel pipeline Style calculations are the process of figuring out which CSS rules apply to which elements based on matching selectors. JavaScript Layout Paint Composit e Style
  27. 27. Your Name | @Twitterhandle | #TechSEOBoost DOM HTML Style Sheets HTML Parser CSS Parser DOM Tree Style Rules Attachment @Jammer_volts Step 2: Style Add style calculations to the DOM
  28. 28. Your Name | @Twitterhandle | #TechSEOBoost The pixel pipeline JavaScript Style Once the browser knows which rules apply to an element it can begin to calculate how much space it takes up and where relative to the size of the viewport. The Core Web Vital metric Cumulative Layout Shift measures this. Paint Composit e Layout
  29. 29. Your Name | @Twitterhandle | #TechSEOBoost DOM HTML Style Sheets HTML Parser CSS Parser DOM Tree Style Rules Render Tree Attachment Layout Step 3: Layout figure out where DOM elements end up relative to one another
  30. 30. Your Name | @Twitterhandle | #TechSEOBoost p p img h1 img ol img
  31. 31. Your Name | @Twitterhandle | #TechSEOBoost The pixel pipeline JavaScript Style Layout Painting is the process of filling in pixels. It involves drawing out text, colors, images, borders, and shadows, essentially every visual part of the elements. The drawing is typically done onto multiple surfaces, often called layers. Largest content paint occurs here Composit e Paint
  32. 32. Your Name | @Twitterhandle | #TechSEOBoost Painting DOM HTML Style Sheets HTML Parser CSS Parser DOM Tree Style Rules Render Tree Attachment Layout Step 4: Paint converts layers of styled DOM elements into pixels
  33. 33. Your Name | @Twitterhandle | #TechSEOBoost The pixel pipeline JavaScript Style Layout Paint Composit e Since the parts of the page were drawn into potentially multiple layers they need to be drawn to the screen in the correct order so that the page renders correctly. This is especially important for elements that overlap another, since a mistake could result in one element appearing over the top of another incorrectly.
  34. 34. Your Name | @Twitterhandle | #TechSEOBoost DOM HTML Style Sheets HTML Parser CSS Parser DOM Tree Style Rules Render Tree Attachment Layout Painting Composite Step 5: Composite assembles all layers into a final screen image
  35. 35. Your Name | @Twitterhandle | #TechSEOBoost What we think it’ll be like
  36. 36. Your Name | @Twitterhandle | #TechSEOBoost What it's actually like
  37. 37. Your Name | @Twitterhandle | #TechSEOBoost The end result is the same. How we do it matters.
  38. 38. Your Name | @Twitterhandle | #TechSEOBoost CWV Pratfalls and Mitigations Rendering Strategies
  39. 39. Your Name | @Twitterhandle | #TechSEOBoost ● Client Side ● Server Sider ● Static ● Dynamic ● Rehydration Rendering Strategies
  40. 40. Your Name | @Twitterhandle | #TechSEOBoost Client Side Rendering (CSR) <!doctype html> <head> <script type="text/javascript" src="/main.js?ver=1.1.0"> </script> </head> <body> <app-root></app-root> </body> </html>
  41. 41. Your Name | @Twitterhandle | #TechSEOBoost CSR Poor LCP: CSR Source: https://web.dev/lcp/
  42. 42. Your Name | @Twitterhandle | #TechSEOBoost <rel="buyproduct.js"> = 99.5% success rate Each script has a probability to fail. With JavaScrip t Without JavaScrip t
  43. 43. Your Name | @Twitterhandle | #TechSEOBoost script1.js script2.js script3.js script4.js {Product name} {Product sku} {Product price} {Product category} {Product availability} {Shipping times} {Breadcrumbs} {Product description} {Product images} {Product specs} <!doctype html> <head> <script type="text/javascript" src="/main.js?ver=1.1.0"> </script> </head> <body> <app-root></app-root> </body> </html>
  44. 44. Your Name | @Twitterhandle | #TechSEOBoost script1.js script2.js script3.js script4.js {Product name} {Product sku} {Product price} {Product category} {Product availability} {Shipping times} {Breadcrumbs} {Product description} {Product images} {Product specs} mainbundle.js
  45. 45. Your Name | @Twitterhandle | #TechSEOBoost script1.js script2.js script3.js script4.js {Product name} {Product sku} {Product price} {Product category} {Product availability} {Shipping times} {Breadcrumbs} {Product description} {Product images} {Product specs} mainbundle.js
  46. 46. Your Name | @Twitterhandle | #TechSEOBoost Chains are dependencies. Each segment of the chain is dependent on its initiator to execute. If a segment of the chain fails, all of its subsequent content fails. Mitigation: Avoid Critical Chains bundle.js script1.js script2.js script3.js script4.js {Product name} {Product sku} {Product price} {Product category} {Product availability} {Shipping times} {Breadcrumbs} {Product description} {Product images} {Product specs}
  47. 47. Your Name | @Twitterhandle | #TechSEOBoost CSR Poor LCP: Render-blocking JavaScript and CSS
  48. 48. Your Name | @Twitterhandle | #TechSEOBoost 2 types resources block rendering <link rel="stylesheet"> when ● Does not have a disabled attribute. When this attribute is present, the browser does not download the stylesheet. ● Does not have a media attribute that matches the user's device. <script> when ● Is in the <head> of the document. ● Does not have a defer attribute. ● Does not have an async attribute.
  49. 49. Your Name | @Twitterhandle | #TechSEOBoost Tell non-critical assets to wait using asynchronous or defer attributes <rel=”myscript.js” async> <rel=”myscript.js” defer> Lazy load images in Chrome with native attributes <img src=”the-traveler.jpg” loading=”lazy”> Mitigation: Defer non critical assets
  50. 50. Your Name | @Twitterhandle | #TechSEOBoost Inline small scripts into <head> using <style> and/or <script> tags for above the fold content ● Ideally inline CSS is immediately after critical metadata ● Load inline scripts before third party resources, style sheets and JS ● If the script is over 1 kB, avoid inlining it (Inline scripts are parsed and compiled on the main thread.) ● Remove inline functions from script bundles Mitigation: Inline Critical Assets
  51. 51. Your Name | @Twitterhandle | #TechSEOBoost CSR Poor LCP: Performance ● Google will limit CPU consumption ● Google will interrupt script ● Excessive CPU consumption negatively impacts indexing
  52. 52. Your Name | @Twitterhandle | #TechSEOBoost CSR: Poor FID Heavy JavaScript execution const heavy = true; While (heavy) { console.log("FID fail") }
  53. 53. Your Name | @Twitterhandle | #TechSEOBoost Mitigation: Only ship contributing scripts
  54. 54. Your Name | @Twitterhandle | #TechSEOBoost CSR Poor CLS: Image dimensions ● Images without dimensions ● Ads, embeds, and iframes without dimensions Mitigation: Declare dimensions img { width: 100%; /* or max-width: 100%; */ height: auto; }
  55. 55. Your Name | @Twitterhandle | #TechSEOBoost * CSR Poor CLS: Loading above existing content CLS Layout Score = impact fraction * distance fraction Mitigation: Prioritize Above the Fold content load
  56. 56. Your Name | @Twitterhandle | #TechSEOBoost CSR Poor CLS: document.write() Modern Browsers support speculative parsing off of the main thread. Read as: They parse ahead while scripts are being downloaded and executed. document.write() ruins all that hard work. Mitigation: Chances are this isn't the work of your devs. Talk to your point of content that for "magic" third-party tool.
  57. 57. Your Name | @Twitterhandle | #TechSEOBoost CSR Poor CLS: Style recalculations Changing the DOM will cause the browser to recalculate element styles (and possibly layouts). Mitigation: Lessen the scope and complexity of Style Calculations by: ● Reducing the complexity of your selectors. ● Reducing the number of elements being styled. ● Measure your Style Recalculation Cost ● Use BEM (Block, Element, Modifier) a class- centric methodology.
  58. 58. Your Name | @Twitterhandle | #TechSEOBoost CSR Poor CLS: Web Fonts causing FOIT/FOUT A font loading late causes a full flash and re-write. Mitigation: Preload fonts. Preload tells the browser that you would like to fetch it sooner than the browser would otherwise discover it because you are certain that it is important for the current page. <link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
  59. 59. Your Name | @Twitterhandle | #TechSEOBoost At the time of request <!doctype html> <head> <title>Hello, TechSEO Boost! </head> <body> <h1>Wait.This isn’t Boston :( </h1> <p>Wash your hands.</p> </body> </html> Server Side Rendering (SSR)
  60. 60. Your Name | @Twitterhandle | #TechSEOBoost ● Slow server response times ● Render-blocking JavaScript and CSS ● Resource load times ● Client-side rendering Are all the server calculations valuable? Do they contribute to page content? SSR: Poor LCP <!doctype html> <head> <title>Hello, TechSEO Boost! </head> <body> <h1>Wait.This isn’t Boston :( </h1> <p>Wash your hands.</p> </body> </html>
  61. 61. Your Name | @Twitterhandle | #TechSEOBoost SSR Poor LCP: Media Declarations The default media="all" (or no declaration) matches all viewport sizes. Mitigation: Dynamic media queries evaluate the viewport when the page is loaded. <link href="xsmall.css" rel="stylesheet" media="xsmall"> <link href="small.css" rel="stylesheet" media="small"> <link href="print.css" rel="stylesheet" media="print">
  62. 62. Your Name | @Twitterhandle | #TechSEOBoost During the build Static Rendering <!doctype html> <head> <title>Hello, TechSEO Boost! </head> <body> <h1>Wait.This isn’t Boston :( </h1> <p>Wash your hands.</p> </body> </html>
  63. 63. Your Name | @Twitterhandle | #TechSEOBoost Cons ● $$$ ● Tricky to get "right" ● Only works for static content – not for content that’s meant to change (think personalization and A/B testing) Pros ● Low TTFB ● Delivers parsed HTML Static Rendering: YMMV
  64. 64. Your Name | @Twitterhandle | #TechSEOBoost Dynamic Rendering
  65. 65. Your Name | @Twitterhandle | #TechSEOBoost 2x server costs, test cases, and QA ½ visibility into what is actually happening
  66. 66. Your Name | @Twitterhandle | #TechSEOBoost "It is not reasonable."
  67. 67. Your Name | @Twitterhandle | #TechSEOBoost Rehydration Above the fold HTML + Below the fold scripts
  68. 68. Your Name | @Twitterhandle | #TechSEOBoost Load what matters when it matters.
  69. 69. Your Name | @Twitterhandle | #TechSEOBoost Image credit: John Fowler
  70. 70. Your Name | @Twitterhandle | #TechSEOBoost | ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄| DON'T BE AFRAID TO LEARN IN PUBLIC |___________| (__/) || (•ㅅ•) || / づ

×