#DevTools  #PageSpeed  #Dev 

Intro to various optimization metrics

Why does speed matter?

  • Performance plays a major role in the success of any online venture.
  • High-performing sites engage and retain users better than low-performing ones.
  • Performance has directly impacted the company's bottom line.

What is speed?

  • User-centric performance metrics
    • A site might be fast for one user (on a fast network with a powerful device) but slow for another user (on a slow network with a low-end device).
    • One may seem to load faster if it loads content progressively rather than waiting until the end to display anything
    • A site might appear to load quickly but then respond slowly (or not at all) to user interaction

User Experience mesurement

  • Visual Metrics
    • First Contentful Paint
    • Speed index
  • Interactivity Metric
    • Time to interactive

Important metrics to measure

  • First contentful paint (FCP)
    • Measures the time from when the page starts loading to when any part of the page’s content is rendered on the screen
  • Largest contentful paint (LCP):
    • measures the time from when the page starts loading to when the largest text block or image element is rendered on the screen. (lab, field)
  • First input delay (FID):
    • Measures the time from when a user first interacts with your site (i.e. when they click a link, tap a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to respond to that interaction. (field)
  • Time to Interactive (TTI):
    • measures the time from when the page starts loading to when it’s visually rendered, its initial scripts (if any) have loaded, and it’s capable of reliably responding to user input quickly. (lab)
  • Total blocking time (TBT):
    • measures the total amount of time between FCP and TTI where the main thread was blocked for long enough to prevent input responsiveness. (lab)
  • Cumulative layout shift (CLS):
    • measures the cumulative score of all unexpected layout shifts that occur between when the page starts loading and when its lifecycle state changes to hidden. (lab, field)

First contentful paint (FCP)

  • What is a good FCP score?
    • Good < 1.8 sec, 1.8 sec < Need improvement < 3.0 sec, Poor > 3.0 sec
  • How to improve FCP?
    • Eliminate render-blocking resources
    • Minify CSS
    • Remove unused CSS ….

Coverage

  • Press Control+Shift+P or Command+Shift+P (Mac).
  • Or, click Customize And Control DevTools Customize And Controls DevTools and then select Run Command.
  • Styles in CSS files and code in JavaScript files are marked in two colors:
    • Green (critical): Styles that are required for first paint; code that’s critical to the page’s core functionality.
    • Red (non-critical): Styles that apply to content not immediately visible; code not being used in page’s core functionality.

Web Vitals

  • Optimizing for quality of user experience is key to the long-term success of any site on the web.
  • Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.
  • The current set for 2020 focuses on three aspects of the user experience—
    • Loading (Largest contentful paint-LCP)
    • Interactivity (First input delay-FID) and
    • Visual stability (Cumulative layout shift-CLS)
  • Terms used in Web Vitals

HTTP/1.0 vs HTTP/1.1 vs HTTP/2 vs HTTP/3

Use latest http version for better speed

Ref