A presentation at NConf 2023 in in Rostock, Germany by Thomas Puppe
Website Performance Thomas Puppe auf der NConf Rostock 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 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 Priorisierung im Netzwerk und im Browser​ ​ 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.
thomaspuppe.de/talks/nconf-2023 Slides und Links
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 Summary / Details
Summary / Details: HTML Reveal Element
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
Formularvalidierung nativ
Formularvalidierung nativ
Formularvalidierung nativ
Formularvalidierung nativ
Avoid Code: System Features nutzen System Fonts Summary / Details Dialog / Modal Feature Formular Validierung 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 Dialog / Modal Feature Formular Validierung System Fonts … 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 16.6 png jpg 24.4 webp avif 5.8 1
WebP / Avif : Nutzung
WebP / Avif : Einsatz Squoosh https://www.smashingmagazine.com/2021/09/modern-image-formats-avif-webp/
Reduce Bildkomprimierung: Testing-Tools​ lokal: Lighthouse im Browser online: webspeedtest.cloudinary.com
Bildformate rostock.de
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​: DevTools​
Responsive Images checken: Lighthouse​
Reduce Responsive Images Checker https://toolsaday.com/seo/ responsive-image-checker
Reduce Caching Komprimierung Bildformate Responsive Images Schriften: woff2 Format
Schriften: Woff 2 Format 200 198 • Vergesst andere Formate! 150 • • Kompatibilität mit alten 100 61 50 0 ✅ Browser-Support ttf Format woff2 Format 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://transfonter.org/​ 200 198 150 100 61 50 0 13 ttf Format woff2 Format woff2 Latin Subset
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 via JavaScript​
Lazy Loading nativ Natives Lazyloading im Browser:
Lazy Loading nativ Natives Lazyloading im Browser:
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 Rel=Preload
Hero-Image
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
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!
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 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 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 DevTools Lighthouse Page Speed Insights Webpagetest
Measure Webpagetest • genauere Analysen und Empfehlungen • instant-Experimente webpagetest.org
Measure DevTools Lighthouse Page Speed Insights Webpagetest Speedcurve
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.
Table Captain 13:15 – 14:00 Uhr • How to Start, actually? • Performance Culture: Wie baue ich Performance in unsere Prozesse ein? • Wie bleibe ich schnell? • Best-Practice von ZEIT Online.
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/nconf-2023 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
for free. You
can too.