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.”

-Facebook

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