Web Performance mit Christian "Schepp" Schaefer
Wir haben dich gut unterhalten? 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]
Retro – [00:05:35]
- Constantin: Code Copy&Paste mit verstecktem Schadcode
- Moritz: Free Accessibility Audits für NGOs? – [00:10:34]
- Schepp: CSS @property Rule – [00:12:31]
- Constantin: Subgrid-Fortschritt in Chrome dank Microsoft – [00:18:33]
Property der Woche: input-security – [00:19:45]
Entscheide Dich – [00:23:34]
Tagesthema: Web Performance – [00:29:25]
- Vorstellung Schepp: DOM Treemap, Setup, Podcasting – [00:29:48]
- Time to First Byte (TTFB) – [01:02:54]
- 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“
- Largest Contentful Paint (LCP) – [01:40:14]
- Time to Interactive (TTI), Total Blocking Time (TBT) & First Input Delay (FID) – [01:49:54]
- Cumulative Layout Shift (CLS) – [01:56:37]
- Renderzeiten verringern – [02:06:59]
- Flüssige Animationen – [02:12:04]
- 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
- HTTP/1.1/2/3 & Caching – [02:30:17]
- Responsiv auf die Datenrate reagieren – [2:45:58]
- Tools & Services – [02:51:23]
GeilTeil – [03:16:29]
- Schepp:
- Moritz: Vorträge von der Beyond Tellerrand kostenlos ansehen – [03:25:00]
Das Ende – [03:26:51]