Performance

Nicht(!) klausurrelevant

Performance

Performance ist oft relativ (Works on my machine!):

• Eine Website kann schnell für deinen einen User (in einem schnellen Netzwerk, mit einem schnellen Gerät) aber langsam für einen anderen sein
• Zwei Seiten können gleich schnell fertig geladen sein, aber eine kann sich schneller anfühlen (z.B. durch progressives aufbauen)
• Eine Seite könnte aussehen als sei sie schnell geladen, aber dann langsam reagieren bei Interaktionen.

Performance

Warum ist Performance wichtig?

Zum Beispiel weil zufriedene Kunden mehr kaufen:
Vodafone: A 31% improvement in LCP
increased sales by 8%
How focusing on web performance improved Tokopedia's click-through rate by 35%

Kennzahlen

Welche Kennzahlen heranziehen um die Performance von Websiten zu messen, zu vergleichen?

• Time to first byte (TTFB)
  ...measures the time between the request for a resource and when the first byte of a response begins to arrive (web.dev/ttfb/)
• DOMContentLoaded
  Window: DOMContentLoaded event

Kennzahlen (User-Centric)

• First Contentful Paint (FCP)
  [Good: 1.8s, Poor: 3.0s]
  ...measures the time from when the page starts loading to when any part of the page's content is rendered on the screen (web.dev/fcp/)
• Largest Contentful Paint (LCP)
  [Good: 2.5s, Poor: 4.0s]
  ...reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading (web.dev/lcp/)

Kennzahlen (User-Centric)

• Time to Interactive (TTI)
  ...measures the time from when the page starts loading to when its main sub-resources have loaded and it is capable of reliably responding to user input quickly (web.dev/tti/)
• Cumulative Layout Shift (CLS)
  [Good: 0.1s, Poor: 0.25s]
  ...measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page (web.dev/cls/)