A presentation at JavaScript Days Berlin in in Berlin, Germany by Thomas Puppe
Website Performance Thomas Puppe auf den JS Days Berlin 2023
Hi, ich bin Thomas 👋 Senior Frontend Developer bei ZEIT Online #a11y, #leanweb, #webperf​
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 ist ein Wettbewerbsvorteil! https://www.allegisgroup.com/en-gb/insights/blog/2019/december/5-ways-to-gain-a-competitive-advantage-in-your-chosen-field
https://wpostats.com/
Website Performance
TTFB Download Size Asset Count
TTFB Download Size Asset Count window loaded DOM content loaded
TTFB Download Size Asset Count LCP window loaded DOM content loaded CLS INP TTI
LCP CLS DOM content loaded INP window loaded TTFB Asset Download Count Size TTI
Aspekte von Aus Usersicht Website schnell / schlank / ruckelt nicht Performance Browser / Technologien HTML / CSS / Bilder / JavaScript / Schriften / Video / Audio Build / Server Bildformate / Komprimierung / CDN, Cloud / Caching / Netzwerk Wirkung Objektive Zahlen / Subjektive Wahrnehmung 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.
hands-on Workshop-Anteil lama.thomaspuppe.de 🦙 github.com/thomaspuppe/performance-workshop Dein Projekt 🥰 yoursuperawesomepremiumwebsite.com Credits: mage.space, Ales Nesetril auf Unsplash
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
Avoid Code: System Features nutzen
Avoid Code: System Features nutzen System Fonts
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/​
Avoid Code: System Features nutzen System Fonts Dialog / Modal Feature
Credits: Aishwarya Vijay Kumar auf Dribbble
Avoid Code: System Features nutzen System Fonts Dialog / Modal Feature Formular Validierung
Formularvalidierung nativ
Formularvalidierung nativ
Formularvalidierung nativ
Formularvalidierung nativ
Formularvalidierung nativ
Avoid Code: System Features nutzen System Fonts Dialog / Modal Feature Formular Validierung Sharing API
Sharing API
Avoid Code: System Features nutzen System Fonts Dialog / Modal Feature Formular Validierung Sharing API Module/Nomodule fĂĽr JS
Module / Nomodule fĂĽr verschiedene JS Versionen
Avoid Code: System Features nutzen System Fonts Dialog / Modal Feature Formular Validierung Sharing API Module/Nomodule für JS … 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!
Reduce Caching 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 Komprimierung Bildformate
WebP / Avif : Vorteile Größe in kB 680 png jpg 69.7 webp 48 32 avif Größe in kB 46.6 png jpg 24.4 webp avif 5.8 1
WebP / Avif : UnterstĂĽtzung
WebP / Avif : Nutzung
WebP / Avif : Wettbewerbsvorteil!
WebP / Avif : Einsatz Squoosh https://www.smashingmagazine.com/2021/09/modern-image-formats-avif-webp/
Reduce Bildkomprimierung: Testing-Tools​ Lighthouse im Browser oder Web. webspeedtest.cloudinary.com
Bildkomprimierung: …
Bildkomprimierung: SVG! • SVGOptimize • SVGOMG
Reduce Caching Komprimierung Bildformate Responsive Images
Responsive Images Credit: httparchive.org
Responsive Images Credit: httparchive.org
Responsive Images Credit: httparchive.org
Responsive Images Credit: httparchive.org
Responsive Images checken​
Responsive Images checken​
Reduce Responsive Images Checker https://toolsaday.com/seo/ responsive-image-checker
Responsive Images Verwendung 1) Erzeugung https://responsivebreakpoints.com/
Responsive Images Verwendung 1) Erzeugung 2) Einbindung
Bildformate und Responsive Images Bildformat checken: webspeedtest.cloudinary.com Responsive Images checken: toolsaday.com/seo/responsive-image-checker Credit: Pitch Sticker “Cyberpunk”
Reduce Caching Komprimierung Bildformate Responsive Images Schriften: woff2 Format
Schriften: Woff 2 Format 200 198 150 100 61 50 0 ttf Format woff2 Format • Vergesst andere Formate! • Hervorragender Browser-Support • Kompatibilität mit alten Browsern wollen wir nicht.
Reduce Caching 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 ​ • https://www.zachleat.com/ web/glyphhanger​als Subsetting-CLI mit UnicodeRange und automatischer Erkennung der Inhalte ​ • https://transfonter.org/​ 200 198 150 100 61 50 0 13 ttf Format woff2 Format woff2 Latin Subset
Webfonts Woff2 und Subsetting • Benutzt du woff2? Und/oder andere Formate? Vergleiche die Größe. https://transfonter.org​​ • Was kann dein Font-File? https://wakamaifondue.com • Erstelle ein passendes Subset. https://everythingfonts.com/subsetter​ Credit: Pitch Sticker “Cyberpunk”
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.
Pause Credit: Pitch Sticker “Cyberpunk”
Optimize Lazy Loading
Lazy Loading
Lazy Loading via JavaScript​
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 nativ Natives Lazyloading im Browser:
loading=lazy Verbreitung: 25% der Seiten im Netz nutzen das loading=lazy Attribut an Bildern. Credit: https://httparchive.org/reports/state-of-images#imgLazy
Lazy Loading nativ kein Throttling: 2 Bilder fast 3G: 7 Bilder slow 3G: 16 Bilder
Lazy Loading nativ Mit loading=lazy übergibt man die Kontrolle an den Browser. Und der macht vielleicht Dinge, die man nicht möchte. Zum Beispiel wird mehr vorgeladen, wenn die Internetverbindung langsam ist! kein Throttling: 2 Bilder fast 3G: 7 Bilder slow 3G: 16 Bilder
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
Optimize Lazy Loading Fassaden Font Loading
Google Fonts
Google Fonts
Selfhosted Fonts
Optimize Lazy Loading Fassaden Font Loading Font Display
… und während dem Laden der Webfonts?
… und während dem Laden der Webfonts? Credit: Zach Leatherman: The Mitt Romney webfont problem
Credits: https://www.fasterize.com/en/blog/web-performance-optimising-loading/
font-display Die font-display CSS-Property an @font-face Definitionen gibt dem Browser die Ladestrategie für Webfonts vor.​
font-display Die font-display CSS-Property an @font-face Definitionen gibt dem Browser die Ladestrategie für Webfonts vor.​
font-display font-display: block; font-display: swap; font-display: fallback; font-display: optional; block swap fallback optional Platz wird freigehalten, System-Font wird Platz wird kurz freigehalten, Wie Fallback, aber der bis die Webfont angezeigt, bis die dann wird Systemfont Browser darf die Webfont geladen ist. Webfont geladen ist. gezeigt, dann die Webfont auch weglassen bei (wenn binnen 3s geladen). langsamen Verbindungen.​ Beim nächsten Seitenaufruf Beim nächsten Seitenaufruf ist die Schrift dann da. ist die Schrift dann da. FOIT FOUT (flash of invisible text) (flash of unstyled text) auto ist der Browser-Default, und das ist in der Regel swap/fallback. Swap wird auch von Google Fonts mitgegeben.
Optimize Lazy Loading Fassaden Font Loading Font Display Rel=Preload
Hero-Image
Die Spalten im Netzwerk-Tab der Developer Tools lassen sich anpassen. So kann man zum Beispiel den Initiator von Requests anzeigen.
Critical Rendering Path im Browser Credit: https://www.youtube.com/watch?v=ufCVTowBxoY
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 werden nicht nur Bilder, sondern auch Videos, JS Dateien, CSS Dateien.
Hero-Image mit rel=preload
Developer Tools:​ Resource Priority Im Netzwerk-Tab kann man mit der rechten Maustaste die dargestellten Spalten umstellen. Eine davon ist die Priority. Sie zeigt an, ob der Browser dieselbe Vorstellung von Resource Priority hat wie ihr.-
rel=preload Browser Support
rel=preload und Media Queries, Retina
Während Preload Ressourcen auf der aktuellen Seite priorisiert, können mit Prefetch Inhalte vorgeladen werden, die auf späteren Seiten benötigt werden. Prefetch Das funktioniert für HTML-Seiten Bilder, Videos, Styles, JS. Es verbraucht Traffic, sollte also bewusst und gezielt eingesetzt werden. User können es in den Browser-Settings unterbinden. “Quicklink” und “Guess” sind JavaScript Bibliotheken, die das Prefetchen automatisieren.
Webfonts Loading und Display • Wann werden die Webfonts geladen?​​ • Wie werden die Webfonts geladen? • Wie ist der Unterschied mit rel=preload und font-display:optional? Credit: Pitch Sticker “Cyberpunk”
Exkurs Local Overrides in den Chrome DevTools • → Settings • → Enable Local Overrides • (Permissions)​ • Inspect Tab • → CSS Source • → ändern und speichern • (HTML und JS ebenso)
Webfonts Loading und Display • Wann werden die Webfonts geladen?​​ • Wie werden die Webfonts geladen? • Wie ist der Unterschied mit rel=preload und font-display:optional? Credit: Pitch Sticker “Cyberpunk”
Optimize Lazy Loading Fassaden Font Loading Font Display Rel=Preload Layout Shift
Layout-Shift​
Cumulative Der Cumulative Layout Shift (CLS) ist eine MaĂźeinheit fĂĽr unerwartetes Verschieben des Layouts einer Website. Layout Shift CLS ist einer der Core Web Vitals von Google und flieĂźt mit in das Google-Ranking ein! Credit: https://web.dev/cls/
Cumulative Layout Shift Credit: https://wpostats.com/
Cumulative Layout Shift Credit: https://wpostats.com/
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​
Platz freihalten gegen Wer kennt den Padding-Trick? .image-container { position: relative; Layout-Shift​ padding-bottom: 56.25%; /* 16:9 Format, 9/16*100 */ } .image-container img { position: absolute; } Der Container des Bildes bekommt einen Padding-Bottom entsprechend des Bildverhältnisses. Das funktioniert, weil sich ein prozentuales Padding an der Breite des Containers orientiert. In den entsprechend dimensionierten Container passt das Bild (absolut positioniert, um nicht unter dem Padding zu landen) genau rein.
Platz freihalten Und wer kennt aspect-ratio? 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.
Platz freihalten Und wer kennt aspect-ratio? gegen Layout-Shift​ aspect-ratio definiert für Box-Elemente automatisch die Höhe anhand der Breite.
Platz freihalten Und wer kennt aspect-ratio? gegen .img { Layout-Shift​ } aspect-ratio: 16/9; aspect-ratio definiert für Box-Elemente automatisch die Höhe anhand der Breite.
Layout Shift
• Layout Shift mit den DevTools messen: vorher und nachher​ • Platz für “Hero-Image” oder andere Elemente via aspect-ratio frei halten
Credit: Pitch Sticker “Cyberpunk”
Optimize Lazy Loading Fassaden Font Loading Font Display 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.
Pause Credit: Pitch Sticker “Cyberpunk”
Measure
Measure DevTools
Measure DevTools • Throttling • Local Source Overrides • Web Vitals Score • Layout Shift • Unused CSS/JS ​ • JavaScript: Memory, Frame Rate,​CPU Flame Graphs
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
• DevTools ​ • CLI npm install -g lighthouse​ ​ • npx lightouse
Measure DevTools Lighthouse Page Speed Insights
Measure Pagespeed Insights pagespeed.web.dev
Measure DevTools Lighthouse Page Speed Insights Webpagetest
Measure Webpagetest webpagetest.org
Measure Webpagetest webpagetest.org und perfproxy.com zum Erzeugen von mehr Experimenten​
Measure DevTools Lighthouse Page Speed Insights Webpagetest Speedcurve
Measure Speedcurve speedcurve.com
Measure DevTools Lighthouse Page Speed Insights Webpagetest Speedcurve CrUX
Measure CrUX developer.chrome.com/ docs/crux/dashboard/
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.
Attitude
Attitude Regression vermeiden
Regression vermeiden • Permanentes Monitoring • Performance Budgets • synthetisch • npm Pakete • ggf RUM • CSS Output • monatliche CrUX Reports • Alerts von Speedcurve, Webpagetest, …
Attitude Regression vermeiden Performance Culture
Performance Culture • Buy-In von der Chefetage • Zahlen • Dashboards • Benchmarking !
Performance Culture • Buy-In von der Chefetage • Zahlen • Dashboards • Benchmarking !
Performance Culture • Buy-In von der Chefetage • Performance als Feature • Zahlen • in NFRs aufnehmen • Dashboards • BUG-Tickets schreiben • Benchmarking !
Attitude Regression vermeiden Performance Culture Up-to-date bleiben
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
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
for free. You
can too.