Website Performance

Website Performance Thomas Puppe auf den JS Days München 2024

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 Gute Visualisierung, wenn die Request-Liste in den DevTools nicht ausreicht. Oder um Stakeholder zu beeindrucken!

Request Map Erstelle eine Übersicht über alle Requests: https://requestmap.webperf.tools/ Credit: Pitch Sticker “Cyberpunk”

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 vermeiden durch situatives Laden von Code • Aufteilung nach Seitentypen (centerpage.css, article.css, search.css) • Vorhandensein von Elementen checken (serverseitig) • Dynamisches Laden (clientseitig)

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 Summary / Details

Summary / Details: HTML Reveal Element

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

Credits: Aishwarya Vijay Kumar auf Dribbble

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

Formularvalidierung nativ

Avoid Code: System Features nutzen System Fonts Summary / Details Dialog / Modal Feature Formular Validierung Sharing API

Sharing API

Avoid Code: System Features nutzen System Fonts Summary / Details Dialog / Modal Feature Formular Validierung Sharing API … you get the point!

Avoid Code: System Features nutzen

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!

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

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

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 46.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

Bildkomprimierung Checkt das Potential für Bildkomprimierung auf eurer Website: https://webspeedtest.cloudinary.com/ Credit: Pitch Sticker “Cyberpunk”

Reduce Caching Caching via ServiceWorker Komprimierung Bildformate Responsive Images

Responsive Images Credit: httparchive.org

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

Responsive Images Verwendung 1) Erzeugung https://responsivebreakpoints.com/

Responsive Images Verwendung 1) Erzeugung 2) Einbindung

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 Erkennung der Inhalte 13 0 Su bs et Range und automatischer 50 La tin Subsetting-CLI mit Unicode- 61 of f2 web/glyphhangerals 80 100 Fo rm at • https://www.zachleat.com/ w of f2 150 w of fF or m at • https://transfonter.org/ 200 tt fF or m at 198

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 Caching via ServiceWorker 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 nativ Natives Lazyloading im Browser:

loading=lazy Verbreitung: 30% 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 • Videos (youtube/vimeo-lite) • Social Media Widgets • Chats, Support-Messenger • Spiele, Interaktives • Dashboards in Apps • Formular-Logik

Optimize Lazy Loading Fassaden 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!

LCP CLS DOM content loaded INP window loaded TTFB Asset Download Count Size TTI

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 • Layout Shift mit den DevTools messen: vorher und nachher • Platz für “Hero-Image” oder andere Elemente via aspect-ratio frei halten • Bonus: Live-Experiment über die Local Overrides 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)

Optimize Lazy Loading Fassaden Layout Shift 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.

Optimize Lazy Loading Fassaden Layout Shift Rel=Preload Font Loading

Google Fonts

Selfhosted Fonts

Optimize Lazy Loading Fassaden Layout Shift Rel=Preload 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

… und während dem Laden der Webfonts? Credit: https://dontasktoask.com/

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 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 Layout Shift Rel=Preload Font Loading Font Display

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 DevTools Lighthouse Webpagetest

Measure Webpagetest webpagetest.org

Webpagetest Wessen Seite wollen wir checken? 🙋‍♀️ Credit: Pitch Sticker “Cyberpunk”

Measure Webpagetest webpagetest.org und perfproxy.com zum Erzeugen von mehr Experimenten

Measure DevTools Lighthouse Webpagetest 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 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 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 • Konkurrenz-Benchmarks und Web Vitals

Performance Culture • Buy-In von der Chefetage • Performance als Feature • Zahlen • in NFRs aufnehmen • Dashboards • BUG-Tickets schreiben • 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” und Lazy Loading • Dashboards • Kontakt suchen, oder Alternativen • bisschen Fatalismus • viel Fatalismus

Attitude Regression vermeiden Performance Culture Up-to-date bleiben

Up-to-date bleiben • web.dev/fast , web.dev/learn/performance • 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 ❤️ www.thomaspuppe.de https://webperf.social/@thomaspuppe

Website Performance

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

Slide 51

Slide 52

Slide 53

Slide 54

Slide 55

Slide 56

Slide 57

Slide 58

Slide 59

Slide 60

Slide 61

Slide 62

Slide 63

Slide 64

Slide 65

Slide 66

Slide 67

Slide 68

Slide 69

Slide 70

Slide 71

Slide 72

Slide 73

Slide 74

Slide 75