Web Performance Messung

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/

457365e2e75c27f3e1c3a3744f5c5e4b?s=128

Michael Geers

March 01, 2017
Tweet

Transcript

  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/
  29. None
  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

  46. None
  47. Vielen Dank!