Web Performance Messung

Der Vortrag gibt einen Überblick über Metriken und Tools zur Performancemessung.
Vortrag bei neuland - Büro für Informatik
http://neuland-bfi.de/

1. WEB PERFORMANCE MESSUNG Michael Geers @naltatis 1. März 2017
2. WIESO MESSEN?
3. WAS MESSEN?
4. BESTANDTEILE DER SEITE
5. SEITENGRÖßE • Übertragene Daten • Dünne Leitungen (Land-DSL) • Volumenbasierte Verträge • Optimierungen • Dateien reduzieren • JS & CSS minifizieren • HTTP Kompression aktivieren Chrome DevTools
6. # REQUESTS • Anzahl der Assets • Parallele Request pro Domain limitiert • Optimierungen • Domain Sharding • Bundling & Spriting • HTTP/2
7. CACHEBARKEIT • Lokaler Browser Cache • Geladene Inhalte wiederverwenden • Optimierungen • Expires / max-age Header
 mit Asset-Hashing • Etag / Last-Modified
8. ZEIT-MARKEN
9. • Bearbeitungszeit des Servers • Browser wartet auf HTML Dokument • Optimierungen • Streaming Templates Time to First Byte / TTFB
10. Seite geladen? DOMContentLoaded • HTML Dokument ist verarbeiten
 inkl. blockierender Bestandteile
 (css, js) Load • Alle Bestandteile sind geladen (img, font, trackingpixel, …)
11. Custom Metrics - User Timing API window.performance .mark('sell_page_interactive') Browser-Support: Alle außer Safari
12. VISUELLE METRIKEN
13. • Erste Reaktion im Browser • „Critical Path“ • Optimierungen • Priorisierung der Assets • wichtiges CSS & Grafiken zuerst laden Time to First Paint https://github.com/sitespeedio/browsertime/blob/master/ browserscripts/timings/firstPaint.js
14. • Primärer Inhalt ist sichtbar • Above-the-Fold Text • Produktbild • „weichere Metrik“ Time to First Meaningful Paint https://docs.google.com/document/d/ 1BR94tJdZLsin5poeet0XoTW60M0SjvOJQttKT-JK8HI/view#heading=h.yi0gbyc627x1
15. • Sichtbarer Bereich vollständig gerendert • abhängig von Gerätegröße Time to Visually Complete
16. SpeedIndex https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
17. SpeedIndex https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index kleiner ist besser
18. WOMIT MESSEN?
19. Browser Tools • Während der Entwicklung • AdHoc Analyse • Event-Timeline
20. Firefox Developer Tools CACHEBARKEIT
21. Network Throttling Chrome DevTools | Netwerk-Tab Firefox | Responsive Design Mode Network Link Conditioner | Hardware IO Tools for Xcode
22. Facebook 2G Tuesday • Drosselung auf 2G für eine Stunde • Opt-In Dialog in der App http://www.businessinsider.com/facebook-2g-tuesdays-to-slow-employee-internet-speeds-down-2015-10?IR=T
23. Chrome DevTools | Timeline-Tab Low-End Device Mode
24. Chrome Browser Timeline Firefox Safari
25. METRIK TOOLS
26. Yahoo YSlow • Berechnet Score aus Best Practices • Fokus auf Netzwerk-Metriken • Schlägt Maßnahmen vor
27. Google PageSpeed Insights • Bewertet Rendering • Critical Path • SEO relevant • Cons • nicht (mehr) Open Source • Google API-Key erforderlich • Pre-RWD • Aggressive Mobile Regeln
28. WebPageTest • Berechnet SpeedIndex • Solide Ergebnisse • Zeichnet Video auf • Ergebnisse online • Cons • Web 1.0 Oberfläche • Messy Selfhosting
 (Windows) https://www.webpagetest.org/
30. sitespeed.io • Docker basiert (Selfhosting) • Visuelle Metriken • Modular • Accessibility Regeln • CI & Metric Integration • Cons • semi stabil https://www.sitespeed.io/
31. sitespeed.io https://www.sitespeed.io/ docker run --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io -b firefox
 http://www.test.de/
32. Google Lighthouse • Chrome Extension • Command Line Tool • Visuelle Metriken • First Meaningful Paint • Interaktions-Metriken • Estimated Input Latency • Progressive Enhancement https://developers.google.com/web/tools/lighthouse/
33. GETTING REAL
34. Real User Monitoring • Performance-Daten im Browser messen • reale Geräteverteilung • reale Browserverteilung • reale Netzwerkumgebung
35. Navigation Timing API
36. Resource Timing API
37. https://github.com/WPO-Foundation/RUM-SpeedIndex • Google Projekt • Auf Basis von Viewport & Resource Timing API • Experimentell RUM-SpeedIndex
38. boomerang.js • Open Source Projekt • gegründet von Yahoo!
 weiterentwickelt von SOASTA <script src="boomerang/boomerang.js" /> <script> BOOMR.init({ beacon_url: "/logging" }); </script> https://github.com/SOASTA/boomerang
39. browsertime • Bestandteil von sitespeed.io • nutzt Browser APIs https://github.com/sitespeedio/browsertime/tree/master/browserscripts/timings
40. https://whatdoesmysitecost.com/
41. Third Party Code http://requestmap.webperf.tools/
42. TIPPS
43. Continuous Integration & Visualisierung
44. Performance Budgets • Produktentwicklung miteinbeziehen • Metriken auswählen • Grenzwerte definieren • Gemeinsame Diskussionsbasis • Einbindung in Continuous Integration https://timkadlec.com/2013/01/setting-a-performance-budget/
45. Show don’t tell webpagetest comparison
47. Vielen Dank!