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!
Stauder „Bierchen“ (aus Essen): „hopfig, fruchtig, ehrlich!“Constantin: Code Copy&Paste mit verstecktem Schadcodedev.to: RIP Copy and Paste from Stackoverflow! (+Trojan Source Solution)Studie Uni Cambridge: trojansource.codesGitHub-Repo nickboucher/trojan-sourceGremlins tracker for Visual Studio CodeMoritz: 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 TodayAnimierte zoom-Eigenschaft (in Chrome) als Slide-open/close-TechnikAnimieren 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 TicketProperty der Woche: input-security – [00:19:45]
DraftCSS Tricks: The Options for Password Revealing InputsEntscheide Dich – [00:23:34]
Tagesthema: Web Performance – [00:29:25]
Vorstellung Schepp: DOM Treemap, Setup, Podcasting – [00:29:48]DOM TreemapPolypane BrowserTime to First Byte (TTFB) – [01:02:54]Server AntwortzeitenEarly FlushingServer Timing HeaderFirst Contentful Paint (FCP) – [01:06:16]First Contentful PaintHarry Roberts – Get Your “head” Straight und ct.cssFilament Group Lazy CSS TrickCSS dank Tailwind klein halten Schriften bei Font-Squirrel „subsetten“Progressive Font Enrichment / DemoPreloading von Fonts, sowie kritischem CSS & JSKompression mit BrotliExperimenting with HTML minifierBilder mit decoding=“async“Largest Contentful Paint (LCP) – [01:40:14]Largest Contentful PaintPreloading responsiver BilderBildformate: AVIF, WebP oder JPEGLCP-Bilder nicht mit loading=“lazy“ ausstattenPriority Hints & Origin Trialsimportance-AttributTime to Interactive (TTI), Total Blocking Time (TBT) & First Input Delay (FID) – [01:49:54]Time to InteractiveTotal Blocking TimeFirst Input DelayJavaScript ersetzen durch native Browser-FunktionenJavaScript parallel als ES6 und ES5 per „Differential Loading“ ausliefernLazy Komponenten Initialisierung via Intersection ObserverrequestIdleCallback()IsInputPending APICumulative Layout Shift (CLS) – [01:56:37]Cumulative Layout ShiftSVG Platzhalter Technik für BilderCSS aspect-ratio-EigenschaftWerbung per position: sticky in ggf. größerem Container platzierenRenderzeiten verringern – [02:06:59]DOM Treemapcontent-visibilityCSS ContainmentFlüssige Animationen – [02:12:04]Ariya Hidayat – Fluid User Interface with Hardware AccelerationColt McAnlis – Web Page Design with the GPU in mindLayers and how to force themVorarbeiten – [02:18:55]Prefetch resources to speed up future navigationsPrerenderquicklink.js – Preloading basierend auf Maus-Position und Sichtbarkeit im Viewportguess.js Speculative Prefetching/PreloadingDivya Sasidharan – Predictive Prefetchinginstant.pageturbolinksquicklink vs. instant.page vs. flying pagespjaxHTTP/1.1/2/3 & Caching – [02:30:17]HTTP Geschichte von Version 0.9 bis zur Version 2HTTP/3: the past, the present, and the futureHarry Roberts – Cache Control for CiviliansWP Super CacheResponsiv auf die Datenrate reagieren – [2:45:58]prefers-reduced-data CSS media featureNetwork Information APINetwork Information in „Client Hints“-HTTP-HeadernBei niedrigem Durchsatz Werbung abschaltenNetwork Information API v2: Rebooting the Network Information APITools & Services – [02:51:23]prefers-reduced-date: MDN / caniuseWebpagetestHow to read a WebPageTest Waterfall View chartSpeedcurveCalibreTreoCrUX – Chrome UX ReportUsing the Chrome UX Report on BigQuerySchepp:NVIDIA GeForce NowXBOX Game Pass (Ultimate)Moritz: Vorträge von der Beyond Tellerrand kostenlos ansehen – [03:25:00]beyond tellerrand – DÜSSELDORF 2021