Website Performance bei Thomas Puppe Dev & Design Meetup Hamburg 09.11.2023

Hi, ich bin Thomas 👋 Senior Frontend Developer bei ZEIT Online #a11y, #leanweb, #webperf​

Credits: apple.com, Lee Campbell auf Unsplash, Shiwa ID auf Unsplash

www !== wealthy western web

Website Performance

Server-Side-Rendered Selective Resumable​ Hydration​

Server-Side-Rendered Selective Resumable​ Hydration​ HTML Website mit CSS JavaScript als Progressive Enhancement​

Progressive Enhancement bei ZEIT Online HTML vom Server CSS dazu JavaScript optional

Aspekte von Aus Usersicht Website schnell / schlank / ruckelt nicht​ Performance Browser / Technologien HTML / CSS / Bilder / JavaScript / Schriften / Video / Audio Priorisierung im Netzwerk und im Browser​ ​ Build / Server Bildformate / Komprimierung / CDN, Cloud / Caching / Netzwerk Wirkung Objektive Zahlen / Subjektive Wahrnehmung / Gemessene Realität von Google Kontrolle Messung / Testing / Monitoring / SEO Einfluss

Drei Säulen von Website Performance A R O

Drei Säulen von Website Performance A R O AVOID REDUCE OPTIMIZE

Drei Säulen von Website Performance A R O AVOID REDUCE OPTIMIZE Benutzen wir alles? Cachen, Ladeverhalten und Brauchen wir alles?​ Komprimieren, Priorisierung. ​Minimieren.

Drei Fünf Säulen von Website Performance A R O M A AVOID REDUCE OPTIMIZE MEASURE ATTITUDE Benutzen wir alles? Cachen, Ladeverhalten und Tooling und Performance Brauchen wir alles?​ Komprimieren, Priorisierung Monitoring​ Culture​ ​Minimieren.

Drei Fünf Säulen von Website Performance A R O M A AVOID REDUCE OPTIMIZE MEASURE ATTITUDE Benutzen wir alles? Cachen, Ladeverhalten und Tooling und Performance Brauchen wir alles?​ Komprimieren, Priorisierung Monitoring​ Culture​ ​Minimieren.

AVOID

Avoid Stuff: ungenutzte Sachen finden Browser DevTools

Browser Developer Tools Network Tab Filter: domain, larger-than, status-code, priority, … https://developer.chrome.com/docs/devtools/network/reference/​

Avoid Stuff: ungenutzte Sachen finden Browser DevTools Request Maps

Avoid Request Maps • requestmap.webperf.tools ​ • requestmap.pages.dev Gute Visualisierung, wenn die Request-Liste in den DevTools nicht ausreicht. Oder um Stakeholder zu beeindrucken!​

Avoid Request Maps • requestmap.webperf.tools ​ • requestmap.pages.dev Gute Visualisierung, wenn die Request-Liste in den DevTools nicht ausreicht. Oder um Stakeholder zu beeindrucken!​

Avoid Request Maps • requestmap.webperf.tools ​ • requestmap.pages.dev Gute Visualisierung, wenn die Request-Liste in den DevTools nicht ausreicht. Oder um Stakeholder zu beeindrucken!​

Avoid Stuff: ungenutzte Sachen finden Browser DevTools Request Maps Google Tag Manager ausmisten

Avoid Stuff: ungenutzte Sachen finden Browser DevTools Request Maps Google Tag Manager ausmisten Unused CSS/JS via DevTools

Unused CSS/JS

Unused CSS/JS

Unused CSS/JS

Unused CSS/JS

Unused CSS/JS vermeiden durch situatives Laden von Code • Aufteilung nach Seitentypen (centerpage.css, article.css) ​ • Vorhandensein von Elementen checken​

Avoid Code: System Features nutzen

Avoid Code: System Features nutzen Summary / Details

Summary / Details: HTML Reveal Element

Summary / Details: HTML Reveal Element

Avoid Code: System Features nutzen Summary / Details Dialog / Modal Feature

Avoid Code: System Features nutzen Summary / Details Dialog / Modal Feature Karusselle und Slider

Karusselle und Slider: auch selfmade!

Avoid Code: System Features nutzen Summary / Details Dialog / Modal Feature Karusselle und Slider … you get the Point.

Drei Fünf Säulen von Website Performance A R O M A AVOID REDUCE OPTIMIZE MEASURE ATTITUDE Benutzen wir alles? Cachen, Ladeverhalten und Tooling und Performance Brauchen wir alles?​ Komprimieren, Priorisierung Monitoring​ Culture​ ​Minimieren.

Reduce

Reduce Caching

Caching und CDN / Proxy Cache​ • deutliches Alarmsignal • wird dir von jedem Testing Tool um die Ohren gehauen • kurze Cache-Zeiten sollten gut begründet sein • immutable nutzen!

Caching und CDN / Proxy Cache​ • deutliches Alarmsignal • wird dir von jedem Testing Tool um die Ohren gehauen • kurze Cache-Zeiten sollten gut begründet sein • immutable nutzen!

Caching und CDN / Proxy Cache​ • deutliches Alarmsignal • wird dir von jedem Testing Tool um die Ohren gehauen • kurze Cache-Zeiten sollten gut begründet sein • immutable nutzen! ​ • TESTEN!​

Reduce Caching Caching via ServiceWorker

Browser Caching via Service Worker​ HTTP Cache CDN Server

Browser Service Worker HTTP Cache CDN TabletGothic.woff2 Franziska.woff2 Caching via Service Worker​ Der Service Worker ist wie ein programmierbarer Proxy Server, mit dem sich Requests und Responses per JavaScript ​modifizieren lassen. Er verfügt über einen eigenen Cache.​ Server

Browser Service Worker HTTP Cache CDN TabletGothic.woff2 Franziska.woff2 Caching via Service Worker​ Der Service Worker ist wie ein programmierbarer Proxy Server, mit dem sich Requests und Responses per JavaScript ​modifizieren lassen. Er verfügt über einen eigenen Cache. Dieser Cache ist theoretisch schneller​(praktisch nicht). Dieser Cache speichert deutlich länger bei gleicher TTL.​* Server

Browser Service Worker HTTP Cache CDN TabletGothic.woff2 Franziska.woff2 Caching via Service Worker​ Der Service Worker ist wie ein programmierbarer Proxy Server, mit dem sich Requests und Responses per JavaScript ​modifizieren lassen. Er verfügt über einen eigenen Cache. Dieser Cache ist theoretisch schneller​(praktisch nicht). Dieser Cache speichert deutlich länger bei gleicher TTL.​* Server

Reduce Caching Caching via ServiceWorker Komprimierung

Komprimierung: gzip, brotli • Gzip als default, drop-in-Lösung ​ • brotli komprimiert 15–30% besser, aber • geringerer Browser-Support (93%) • dynamische Komprimierung dauert länger • Tweaking der 9 gzip und 11 brotli Stufen​ 😬

Komprimierung: gzip, brotli • Gzip als default, drop-in-Lösung ​ • brotli komprimiert 15–30% besser, aber • geringerer Browser-Support (93%) • dynamische Komprimierung dauert länger • 😬 Tweaking der 9 gzip und 11 brotli Stufen 🤯

Reduce Caching Caching via ServiceWorker Komprimierung Bildformate

WebP / Avif : Vorteile Größe in kB 680 png jpg 69.7 webp 48 32 avif Größe in kB 16.6 png jpg 24.4 webp avif 5.8 1

WebP / Avif : Nutzung

ZEIT Online unterstützt noch kein AVIF.

WebP / Avif : Einsatz Squoosh https://www.smashingmagazine.com/2021/09/modern-image-formats-avif-webp/

WebP / Avif : Einsatz bei ZEITOnline https://img.zeit.de/2023/47/ren-benko-immobilien-signa-gruppe-verluste-bild/wide__1000x562__desktop

Reduce Bildkomprimierung: Testing-Tools​ lokal: Lighthouse im Browser online: webspeedtest.cloudinary.com

Reduce Caching Caching via ServiceWorker Komprimierung Bildformate Responsive Images

Responsive Images

Responsive Images Credit: httparchive.org

Responsive Images Credit: httparchive.org

Responsive Images Credit: httparchive.org

Responsive Images Credit: httparchive.org

Reduce Responsive Images Checker 1) DevTools 2) Lighthouse 3) Online Tools wie https://toolsaday.com/seo/ responsive-image-checker

Reduce Caching Caching via ServiceWorker Komprimierung Bildformate Responsive Images Schriften: woff2 Format

Schriften: Woff 2 Format 200 198 • Vergesst andere Formate! 150 • 100 • Kompatibilität mit alten 80 61 50 0 ttf Format woff Format ✅ Browser-Support woff2 Format Browsern wollen wir nicht.

Reduce Caching Caching via ServiceWorker Komprimierung Bildformate Responsive Images Schriften: woff2 Format Schriften: Subsetting

Reduce Schriften: Subsetting • https://wakamaifondue.com für Schriften-Eigenschaften​​

Reduce Schriften: Subsetting • https://wakamaifondue.com für Schriften-Eigenschaften​ ​ • https://everythingfonts.com/ subsetter als Subsetting-GUI 150 80 100 61 50 13 Su bs et La tin of f2 w of f2 Fo rm at 0 w of fF or m at • https://transfonter.org/​ 200 tt fF or m at ​ 198

Avoid Code System Fonts nutzen Vielleicht kannst du auf Webfonts verzichten. Die System-Schriften auf den Betriebssystemen sind vielfältig. • https://modernfontstacks.com/ • https://gist.github.com/ don1138/5761014 ​ • https://meowni.ca/ font-style-matcher/​

Reduce Caching Komprimierung Bildformate Responsive Images Schriften: woff2 Format Schriften: Subsetting

Fünf Säulen von Website Performance A R O M A AVOID REDUCE OPTIMIZE MEASURE ATTITUDE Benutzen wir alles? Cachen, Ladeverhalten und Tooling und Performance Brauchen wir alles?​ Komprimieren, Priorisierung Monitoring​ Culture​ ​Minimieren.

Optimize Lazy Loading

Lazy Loading

Lazy Loading via JavaScript​

Lazy Loading via JavaScript​

Lazy Loading via JavaScript​

Lazy Loading nativ Natives Lazyloading im Browser:

Lazy Loading nativ Natives Lazyloading im Browser:

Lazy Loading Mit loading=lazy übergibt man die Kontrolle an den Browser. Und der macht vielleicht Dinge, die man nicht möchte. nativ Zum Beispiel wird mehr vorgeladen, wenn die Internetverbindung langsam ist! kein Throttling: 2 Bilder fast 3G: 7 Bilder slow 3G: 16 Bilder

Lazy Loading bei ZEIT Online: handmade • force HighResolution • • Infografiken avoid HighResolution • DataSaver • langsames Netzwerk • Pixelperfect auf den Container zugeschnitten • zuverlässiges Rescaling

Lazy Loading bei ZEIT Online • force HighResolution • • Infografiken avoid HighResolution • DataSaver • langsames Netzwerk • Pixelperfect auf den Container zugeschnitten • zuverlässiges Rescaling

Optimize Lazy Loading Fassaden

Fassaden

Fassaden

Fassaden

Fassaden

Fassaden • Videos (youtube/vimeo-lite) • Social Media Widgets • Chats, Support-Messenger • Spiele, Interaktives • Dashboards in Apps • Formular-Logik

Fassaden • Videos (youtube/vimeo-lite) • Social Media Widgets • Chats, Support-Messenger • Spiele, Interaktives • Dashboards in Apps • Formular-Logik

Optimize Lazy Loading Fassaden Rel=Preload

Hero-Image preloaden Manchmal werden wichtige Bilder erst spät geladen – weil andere Sachen vorher im HTML stehen, weil die Bilder erst im CSS erwähnt werden, oder weil sie per JavaScript geladen werden.

Preload​ Mit Preload-Links können wir im Head einer HTML-Seite dem Browser schon Hinweise geben auf Ressourcen, die während dem Rendern gebraucht werden. Unterstützt: Bilder, Videos, CSS, JS. Schriften!

Hero-Image mit rel=preload

rel=preload​Browsersupport und Verbreitung

Optimize Lazy Loading Fassaden Rel=Preload Layout Shift

Cumulative Layout Shift Der Cumulative Layout Shift (CLS) ist eine Maßeinheit für unerwartetes Verschieben des Layouts einer Website. CLS ist einer der Core Web Vitals von Google und fließt mit in das Google-Ranking ein!

Platz freihalten gegen Layout-Shift​ aspect-ratio definiert für Box-Elemente automatisch die Höhe anhand der Breite. Der Wert ist eine Dezimalzahl, die man aber auch durch einen Bruch angeben kann.

Optimize Layout Shift • Chrome DevTools: • → Console Drawer • → Rendering • → Layout Shift • → Core Web Vitals ​ • Chrome Plugins ​ • https://defaced.dev/tools/ layout-shift-gif-generator/​ ​ • npm install -g layout-shift-gif​ ​ • JS Performance Observer API → Tracking​

Layout Shift durch Werbung​ Lösung ist auch hier das Freihalten von Platz. Aber wie viel? • mobil: Maximum + sticky ​ • Desktop: aktuell nichts, aber es gibt Ideen: • Minimum oder mittlerer Wert verringern den CLS zumindest.

Optimize Lazy Loading Fassaden Rel=Preload Layout Shift

Fünf Säulen von Website Performance A R O M A AVOID REDUCE OPTIMIZE MEASURE ATTITUDE Benutzen wir alles? Cachen, Ladeverhalten und Tooling und Performance Brauchen wir alles?​ Komprimieren, Priorisierung Monitoring​ Culture​ ​Minimieren.

Measure

Measure DevTools

Measure DevTools • Throttling • Local Source Overrides • Web Vitals Score • Layout Shift • Unused CSS/JS ​ • JavaScript: Memory, Frame Rate,​CPU Flame Graphs devtoolstips.org

Measure DevTools Lighthouse

Measure Lighthouse • Web Vital Scores • konkrete Todos zur Verbesserung • DevTools ​ • CLI npm install -g lighthouse​ ​ • npx lightouse

Measure Pagespeed Insights • Lighthouse, aber online​ pagespeed.web.dev

Measure Pagespeed Insights • Lighthouse, aber online​ pagespeed.web.dev

Measure DevTools Lighthouse Page Speed Insights Speedcurve

Measure Speedcurve • kontinuierliches Monitoring speedcurve.com

Measure Speedcurve • kontinuierliches Monitoring • Real User Monitoring speedcurve.com

Measure Speedcurve • kontinuierliches Monitoring • Real User Monitoring • Empfehlungen speedcurve.com

Measure Speedcurve • kontinuierliches Monitoring • Real User Monitoring • Empfehlungen • Benchmarks speedcurve.com

Measure Speedcurve • kontinuierliches Monitoring • Benchmark mit Konkurrenz​ speedcurve.com

Fünf Säulen von Website Performance A R O M A AVOID REDUCE OPTIMIZE MEASURE ATTITUDE Benutzen wir alles? Cachen, Ladeverhalten und Tooling und Performance Brauchen wir alles?​ Komprimieren, Priorisierung Monitoring​ Culture​ ​Minimieren.

“Performance Culture” bei ZEIT Online • Buy-in: Chefetage und SEO! • Performance als Non-Functional Requirement wie A11y • Performance-Probleme sind BUGs! • Persönliche Motivation der EntwicklerInnen • Konkurrenz-Benchmarks und Web Vitals

Third Party

Party

Challenge: Third-Party Inhouse Third-Party Externe Third-Party • Dashboards • Werbung • Scrollytelling • Tracking • Eigenwerbung für zB. Veranstaltungen • Dienste, Social Media

Challenge: Third-Party Inhouse Third-Party Externe Third-Party • Dashboards • Werbung • Scrollytelling • Tracking • Eigenwerbung für zB. Veranstaltungen • Dienste, Social Media Was tun ? • Code Reviews • Dashboards • bisschen Fatalismus

Challenge: Third-Party Inhouse Third-Party Externe Third-Party • Dashboards • Werbung • Scrollytelling • Tracking • Eigenwerbung für zB. Veranstaltungen • Dienste, Social Media Was tun ? Was tun? • Code Reviews • “Fassaden” • Dashboards • Kontakt suchen, oder Alternativen • bisschen Fatalismus • viel Fatalismus

Up-to-date bleiben • web.dev/fast • github.com/davidsonfellipe/awesome-wpo • www.smashingmagazine.com/category/performance/ • perfplanet.com ​ • calibreapp.com/blog • speedcurve.com/blog • debugbear.com/blog ​ • simonhearne.com/posts • csswizardry.com/archive • timkadlec.com/remembers thomaspuppe.de/talks/devdesign-hh-performance Slides und Links

Dankeschön ❤️

Dankeschön ❤️ Thomas is hiring @ ZEIT Online: dev.zeit.de

Dankeschön ❤️ Thomas is hiring @ ZEIT Online: dev.zeit.de www.thomaspuppe.de ​https://webperf.social/@thomaspuppe