Web Performance mit Christian "Schepp" Schaefer

Diese Sendung soll nie aufhören? Unterstütze uns mit einer Spende ♥

Feedback? Kommentar oder Mastodon.

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]