Website Performance

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