Web Performance mit Christian "Schepp" Schaefer

Wo wir sind ist vorne.

Wir haben dich gut unterhalten? Unterstütze uns mit einer Spende ♥

Feedback? Kommentar oder Twitter.

Schnell, schneller, performant! Zusammen mit Performance-Papst Christian "Schepp" Schaefer liefern wir einen der gewaltigsten Gesamtabrisse über Performance im Web: Von Time to First Byte (TTFB) und First Contentful Paint (FCP) über den Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), Renderzeiten, flüssigen Animationen, Prefetching, HTTP-Headern und Caching bis hin zu Performance-Testing-Tools wurde wirklich nichts ausgelassen was man zu guter Web-Performance wissen muss. Nebenher besprechen wir CSS "input-security". Unsere bislang kompletteste Themensendung. Zack zack!

Begrüßung – [00:00:54]

• Stauder „Bierchen“ (aus Essen): „hopfig, fruchtig, ehrlich!“

Retro – [00:05:35]

• Constantin: Code Copy&Paste mit verstecktem Schadcode
  • dev.to: RIP Copy and Paste from Stackoverflow! (+Trojan Source Solution)
  • Studie Uni Cambridge: trojansource.codes
  • GitHub-Repo nickboucher/trojan-source
  • Gremlins tracker for Visual Studio Code
• Moritz: Free Accessibility Audits für NGOs? – [00:10:34]
  • Tweet
• Schepp: CSS @property Rule – [00:12:31]
  • Ana Tudor – Using Absolute Value, Sign, Rounding and Modulo in CSS Today
  • Animierte zoom-Eigenschaft (in Chrome) als Slide-open/close-Technik
  • Animieren von verschiedenen anderen Dingen dank @property + (Navigation per Cursor hoch/runter)
• Constantin: Subgrid-Fortschritt in Chrome dank Microsoft – [00:18:33]
  • Chromium Bugtracker Subgrid Support Ticket

Property der Woche: input-security – [00:19:45]

• Draft
• CSS Tricks: The Options for Password Revealing Inputs

Entscheide Dich – [00:23:34]

Tagesthema: Web Performance – [00:29:25]

1. Vorstellung Schepp: DOM Treemap, Setup, Podcasting – [00:29:48]
   • DOM Treemap
   • Polypane Browser
2. Time to First Byte (TTFB) – [01:02:54]
   • Server Antwortzeiten
   • Early Flushing
   • Server Timing Header
3. First Contentful Paint (FCP) – [01:06:16]
   • First Contentful Paint
   • Harry Roberts – Get Your “head” Straight und ct.css
   • Filament Group Lazy CSS Trick
   • CSS dank Tailwind klein halten
   • Schriften bei Font-Squirrel „subsetten“
   • Progressive Font Enrichment / Demo
   • Preloading von Fonts, sowie kritischem CSS & JS
   • Kompression mit Brotli
   • Experimenting with HTML minifier
   • Bilder mit decoding=“async“
4. Largest Contentful Paint (LCP) – [01:40:14]
   • Largest Contentful Paint
   • Preloading responsiver Bilder
   • Bildformate: AVIF, WebP oder JPEG
   • LCP-Bilder nicht mit loading=“lazy“ ausstatten
   • Priority Hints & Origin Trials
   • importance-Attribut
5. Time to Interactive (TTI), Total Blocking Time (TBT) & First Input Delay (FID) – [01:49:54]
   • Time to Interactive
   • Total Blocking Time
   • First Input Delay
   • JavaScript ersetzen durch native Browser-Funktionen
   • JavaScript parallel als ES6 und ES5 per „Differential Loading“ ausliefern
   • Lazy Komponenten Initialisierung via Intersection Observer
   • requestIdleCallback()
   • IsInputPending API
6. Cumulative Layout Shift (CLS) – [01:56:37]
   • Cumulative Layout Shift
   • SVG Platzhalter Technik für Bilder
   • CSS aspect-ratio-Eigenschaft
   • Werbung per position: sticky in ggf. größerem Container platzieren
7. Renderzeiten verringern – [02:06:59]
   • DOM Treemap
   • content-visibility
   • CSS Containment
8. Flüssige Animationen – [02:12:04]
   • Ariya Hidayat – Fluid User Interface with Hardware Acceleration
   • Colt McAnlis – Web Page Design with the GPU in mind
   • Layers and how to force them
9. Vorarbeiten – [02:18:55]
   • Prefetch resources to speed up future navigations
   • Prerender
   • quicklink.js – Preloading basierend auf Maus-Position und Sichtbarkeit im Viewport
   • guess.js Speculative Prefetching/Preloading
   • Divya Sasidharan – Predictive Prefetching
   • instant.page
   • turbolinks
   • quicklink vs. instant.page vs. flying pages
   • pjax
10. HTTP/1.1/2/3 & Caching – [02:30:17]
    • HTTP Geschichte von Version 0.9 bis zur Version 2
    • HTTP/3: the past, the present, and the future
    • Harry Roberts – Cache Control for Civilians
    • WP Super Cache
11. Responsiv auf die Datenrate reagieren – [2:45:58]
    • prefers-reduced-data CSS media feature
    • Network Information API
    • Network Information in „Client Hints“-HTTP-Headern
    • Bei niedrigem Durchsatz Werbung abschalten
    • Network Information API v2: Rebooting the Network Information API
12. Tools & Services – [02:51:23]
    • prefers-reduced-date: MDN / caniuse
    • Webpagetest
    • How to read a WebPageTest Waterfall View chart
    • Speedcurve
    • Calibre
    • Treo
    • CrUX – Chrome UX Report
    • Using the Chrome UX Report on BigQuery

GeilTeil – [03:16:29]

• Schepp:
  • NVIDIA GeForce Now
  • XBOX Game Pass (Ultimate)
• Moritz: Vorträge von der Beyond Tellerrand kostenlos ansehen – [03:25:00]
  • beyond tellerrand – DÜSSELDORF 2021

Das Ende – [03:26:51]

Kapitel

1. Intro (00:00:06)

2. Begrüßung (00:00:54)

3. Retro Constantin: Code Copy&Paste mit verstecktem Schadcode (00:05:35)

4. Moritz: Free Accessibility Audits für NGOs? (00:10:34)

5. Schepp: CSS @property Rule (00:12:31)

6. Constantin: Subgrid-Fortschritt in Chrome dank Microsoft (00:18:33)

7. Property der Woche: input-security (00:19:45)

8. Entscheide Dich! (00:23:34)

9. Tagesthema: Web Performance (00:29:25)

10. 1. Vorstellung Schepp: DOM Treemap, Setup, Podcasting (00:29:48)

11. 2. Time to First Byte (TTFB) (01:02:54)

12. 3. First Contentful Paint (FCP) (01:06:16)

13. 4. Largest Contentful Paint (LCP) (01:40:14)

14. 5. Time to Interactive, Total Blocking Time, First Input Delay (01:49:54)

15. 6. Cumulative Layout Shift (CLS) (01:56:37)

16. 7. Renderzeiten verringern (02:06:59)

17. 8. Flüssige Animationen (02:12:04)

18. 9. Vorarbeiten (02:18:55)

19. 10. HTTP/1.1/2/3 & Caching (02:30:17)

20. 11. Responsiv auf die Datenrate reagieren (02:45:58)

21. 12. Tools & Services (02:51:23)

22. GeilTeil Schepp: Nvidia GeForce Now (03:16:29)

23. Moritz: Vorträge von der Beyond Tellerrand kostenlos ansehen (03:25:00)

24. Das Ende (03:26:51)