November 21, 2021

Web Performance mit Christian "Schepp" Schaefer

3 hours 30 minutes

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]

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]

Vorstellung Schepp: DOM Treemap, Setup, Podcasting – [00:29:48]

DOM Treemap

Polypane Browser

Time to First Byte (TTFB) – [01:02:54]

Server Antwortzeiten

Early Flushing

Server Timing Header

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]

Largest Contentful Paint

Preloading responsiver Bilder

Bildformate: AVIF, WebP oder JPEG

LCP-Bilder nicht mit loading=“lazy“ ausstatten

Priority Hints & Origin Trials

importance-Attribut

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

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

Renderzeiten verringern – [02:06:59]

DOM Treemap

content-visibility

CSS Containment

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

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]

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

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

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]

...more

View all episodes

By Moritz Glantz und Sarah Groß

November 21, 2021

Web Performance mit Christian "Schepp" Schaefer

3 hours 30 minutes

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

Feedback? Kommentar oder Mastodon.

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]

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]

Vorstellung Schepp: DOM Treemap, Setup, Podcasting – [00:29:48]

DOM Treemap

Polypane Browser

Time to First Byte (TTFB) – [01:02:54]

Server Antwortzeiten

Early Flushing

Server Timing Header

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]

Largest Contentful Paint

Preloading responsiver Bilder

Bildformate: AVIF, WebP oder JPEG

LCP-Bilder nicht mit loading=“lazy“ ausstatten

Priority Hints & Origin Trials

importance-Attribut

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

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

Renderzeiten verringern – [02:06:59]

DOM Treemap

content-visibility

CSS Containment

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

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]

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

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

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]

...more

More shows like Wo wir sind ist vorne.

View all

ARD Presseclub

27 Listeners

Bits und so

23 Listeners

Binärgewitter

2 Listeners

Freak Show

10 Listeners

Working Draft

0 Listeners

Stay Forever - Retrogames & Technik

33 Listeners

Logbuch:Netzpolitik

7 Listeners

Methodisch inkorrekt!

17 Listeners

Schleifenquadrat. Der Apple-Podcast von Mac Life.

2 Listeners

Lage der Nation - der Politik-Podcast aus Berlin

242 Listeners

programmier.bar – der Podcast für App- und Webentwicklung

0 Listeners

kurz informiert by heise online

2 Listeners

Piratensender Powerplay

3 Listeners

Engineering Kiosk

0 Listeners

KI-Update – ein heise-Podcast

6 Listeners

Share Web Performance mit Christian "Schepp" Schaefer

Sign up to save your podcasts

Web Performance mit Christian "Schepp" Schaefer

Web Performance mit Christian "Schepp" Schaefer

More shows like Wo wir sind ist vorne.

ARD Presseclub

Bits und so

Binärgewitter

Freak Show

Working Draft

Stay Forever - Retrogames & Technik

Logbuch:Netzpolitik

Methodisch inkorrekt!

Schleifenquadrat. Der Apple-Podcast von Mac Life.

Lage der Nation - der Politik-Podcast aus Berlin

programmier.bar – der Podcast für App- und Webentwicklung

kurz informiert by heise online

Piratensender Powerplay

Engineering Kiosk

KI-Update – ein heise-Podcast