eggsunimedia
Frontend PerformanceWebsite Performance messbar machen, Probleme identifizieren und User Experience verbessern
eggsunimedia
Joel Köbner
• Seit 2016 bei eggs unimedia
• Erfahrungen mit AEM 6.1 bis 6.4
• Seit Mai 2017 im Bereich Performance & Maintenance
eggsunimedia
Frontend PerformanceWebsite Performance messbar machen, Probleme identifizieren und User Experience verbessern
eggsunimedia
Ist Ihre Website schnell genug?
eggsunimedia
Woher soll ich das wissen?
eggsunimedia
agenda
eggsunimedia
• verstehen
• messen
• vergleichen
• verbessern
• verwerten
eggsunimedia
• verstehenWas heißt gute / schlechte Performance?
• messenWelche Zahlen (KPIs) erfassen wir? Mit welchen Tools?
• vergleichenWas sind "übliche" bzw. "gute" Werte?
• verbessernWas sind die Ursachen? Welche Maßnahmen gibt es?
• verwertenWelche Effekte kann man erhoffen?
eggsunimedia
verstehen
eggsunimedia
• Page Rendering
• Seitenaufbau
• Website Speed
• Page Interaction
• Responsivität
• Website Performance
eggsunimedia
Page Rendering / Seitenaufbau• URL eingeben oder Link klicken
• Verbindung herstellen
• Dokument herunterladen
• Hintergrund und restliches CSS rendern
• HTML Elemente (meist zuerst Navigation) rendern
• Bilder, Funktionen, Videos und Weiteres laden und rendern
eggsunimedia
Seitenaufbau(Moto G4, 3G, Dulles, VA, 17.06.2019)
0s 9.5s 10.0s 11.0s 21.5s 25.5s 30.5s
eggsunimedia
Page Interaction• Flüssige Animationen bei Slideshows• Verzögerung beim Öffnen der Navigation• Verzögerung bei Ablegen eines Artikels in den Warenkorb• Flüssiges Scrollen• Darstellung von Bildern beim Scrollen• Geschwindigkeit komplexer Webanwendungen• ...
eggsunimedia
messen
eggsunimedia
Seitenaufbau(Moto G4, 3G, Dulles, VA, 17.06.2019)
0s 9.5s 10.0s 11.0s 21.5s 25.5s 30.5s
eggsunimedia
SeitenaufbauKPIs
Time to First Byte
First Contentful Paint
Last Painted Hero
First Paint Speed Index Document Complete
Visually Complete
eggsunimedia
Page Rendering KPIs• Time to First Byte
Zeit zwischen Absenden der Anfrage und erstem Teil der Antwort
• First PaintZeit bis zu erstem Pixel Rendering
• Visually CompleteZeit bis gesamter Viewport gerendert ist
• Speed IndexFunktion über prozentualen Renderfortschritt im Viewport (Visually Complete)
eggsunimedia
• Online-Tools• Kostenlose Test Tools: Webpagetest.org, Google
pagespeed, GTmetrix, Pingdom, …• Monitoring Suites: Dynatrace, Calibre, …
• Lokale Tools• Google Lighthouse, Developer Tools
• Synthetische Tests vs. Real User Monitoring
eggsunimedia
eggsunimedia
eggsunimedia
eggsunimedia
Demo webpagetest
eggsunimedia
vergleichen
eggsunimedia
eggsunimedia
eggsunimedia
Beispielwerte Performance
eggsunimedia
Industry United States United Kingdom Germany Japan
Automotive 9.5 sec 12.3 sec 11.0 sec 10.3 sec
Business & Industrial Markets 8.7 sec 8.3 sec 8.2 sec 8.1 sec
Classifieds & Local 7.9 sec 8.3 sec 7.0 sec 8.3 sec
Finance 8.3 sec 8.0 sec 8.6 sec 7.6 sec
Media & Entertainment 9 sec 8.8 sec 7.6 sec 8.4 sec
Retail 9.8 sec 10.3 sec 10.3 sec 8.3 sec
Technology 11.3 sec 10.6 sec 8.8 sec 10sec
Travel 10.1 sec 10.9 sec 7.1 sec 8.2 sec
Speed Index
Empfohlener Wert für 2018: unter 3s
Emuliertes Nexus 5 mit 3G Verbindung (1.6Mbps DL, 300ms RTT)Source: MachMetrics, https://www.machmetrics.com/speed-blog/average-page-load-times-websites-2018/
eggsunimedia
Industry United States United Kingdom Germany Japan
Automotive 2 sec 2.3 sec 2.2 sec 1.8 sec
Business & Industrial Markets 2.7 sec 2.0 sec 2.2 sec 1.9 sec
Classifieds & Local 2.2 sec 2.2 sec 2.2 sec 1.8 sec
Finance 2.4 sec 2.1 sec 2.7 sec 1.5 sec
Media & Entertainment 1.8 sec 2.5 sec 2.2 sec 1.8 sec
Retail 1.9 sec 1.9 sec 2.3 sec 1.7 sec
Technology 2.1 sec 2.1 sec 2.8 sec 1.6 sec
Travel 2.2 sec 2.4 sec 2.7 sec 1.6 sec
Time to First Byte
Empfohlener Wert für 2018: unter 1,3s
Emuliertes Nexus 5 mit 3G Verbindung (1.6Mbps DL, 300ms RTT)Source: MachMetrics, https://www.machmetrics.com/speed-blog/average-page-load-times-websites-2018/
eggsunimedia
• Referenzpunkte suchen• Konkurrenzunternehmen
• Realistische Messungen erheben• Laufend mit Stichproben vergleichen
• "Gefühlte Performance"
eggsunimedia
verbessern
eggsunimedia
Wie entstehen Performance Probleme?
eggsunimedia
• Historisch gewachsene Enterprise Projekte• Priorisierung von Konzeption und Backend ggü.
Frontend• Performance als Allgemeingut
eggsunimedia
Was tun?
eggsunimedia
• Backend• Optimierung von Caching und CDN-Nutzung
• HTML• Nicht als Datenhaltungsschicht verwenden• Reduzieren von DOM-Knoten und gzippen
• Bilder und Videos• Moderne Kompressionsalgorithmen und Renditions• Lazy Loading
eggsunimedia
• JavaScript• JavaScript als "Progressive Enhancement"• Am Ende der Seite laden
• CSS• Moderne Funktionen wie Animationen oder Grid
nutzen• Schriftarten
• Nutzen von Webfonts prüfen• Komprimieren und Lokalisieren
eggsunimedia
verwerten
eggsunimedia
Performance KPIs vs. Marketing KPIs
eggsunimedia
“100ms of latency costs 1% sales”-amazon
eggsunimedia
“53% of mobile visits leave a page that takes longer than 3 seconds to load”-Akamai Technologies
“More than 70% of internet traffic is generated on mobile devices”-Google
eggsunimedia
“If the webpage will load quickly, the link might appear higher in your feed.”
eggsunimedia
“Starting in July 2018, page speed will be a ranking factor for mobile searches”-Google
eggsunimedia
• SEO• Google PageRank• Facebook Ranking
• Conversion• Optimierung von Einstieg und Produktseiten
• UX• NPS (Net Promoter Score)
• Bandwidth• Infrastrukturkosten
eggsunimedia
dankeschön