LADEZEITEN DEUTSCHER ONLINESHOPS Ist ein Onlineshop langsam, so reduziert jede Sekunde mehr Ladezeit die Conversion Rate um -7%. Zusätzlich werden langsame Seiten von den Suchmaschinen mit negativem Rankingfaktor bestraft und führen zu weniger Traffic. Schnelle Ladezeiten sind somit doppelt wichtig, Onsite und Offsite! Wir haben 100 deutsche Onlineshops für Sie analysiert, verglichen und die wichtigsten Optimierungspotenziale in dieser Infografik zusammengefasst. Durchschnittsangaben STATUS QUO - WIE SIEHT ES AKTUELL AUS? 01. UMFANG REDUZIEREN 1.701 DOM Elemente 143,7 KB 21 JavaScript 59 Bilder 6 CSS 1 Den HTML-Code aufräumen Maßnahmen Maßnahmen Die Anzahl DOM-Elemente sollte reduziert werden, indem das Dokument ein sauberes Markup und keine unnötigen Elemente aufweist. 2 Dateien zusammenfassen Die Anzahl der zu ladenden Dateien sollte durch das Kombinieren von mehreren CSS- und JavaScript-Dateien reduziert werden. Eine CSS- und jeweils eine JavaScript-Datei im Header und Footer sind ideal. 3 Unnötiges Entfernen Generell sollten alle Elemente und Angaben, welche nicht (mehr) benötigt werden, entfernt werden. Dazu zählen z.B. nicht verwendete oder redundante Style-Eigenschaften und JavaScript. Maßnahmen Maßnahmen 3 Die richtigen Dateiformate Inhaltsgrafiken sollten im geeigneten Dateiformat angelegt werden, z. B. Pixelbilder als JPEG (mit Komprimierung) und Grafiken als PNG (8 Bit). 2 GZIP Komprimierung In der Serverkonfiguration sollte die GZIP-Komprimierung für textbasierte Inhalte aktiviert werden. Auch Grafiken lassen sich mit belustbehafteten Komprimierungsmethoden zusätzlich verkleinern (z. B. JPEG). 1 Textbasierte Inhalte minimieren Das HTML, JavaScript und CSS sollte z. B. mit einem YUICompressor minimiert werden. JavaScript sollte allerdings nicht zusätzlich komprimiert werden. </> html {js} {js} {js} {js} {js} {js} {js} {js} {js} {js} {js} {js} {js} {js} {js} {js} {js} {js} {js} {js} {js} Unnötiges Datenaufkommen 62 × DNS Abfragen 2.237,2 kb 02. INHALTE MINIMIEREN Ohne Minimierung / Komprimierung 324,3 kb 761,3 kb 1.007,9 kb 143,7 kb 71% 35% 03. AUSLIEFERUNG css {...} {js} ... css {...} {js} 61% 14% 64% 88% 25% css {...} css {...} css {...} css {...} css {...} css {...} </> html {js} css {...} 1% 4% 56% 38% 1% 0% 2,9 s A B C D E F 0 68 100 39 96 Pagespeed Score Yslow Performance Index 25% 36% 7% CDN Asset Domain Beides {js} {js} {js} css {...} {js} css {...} Caching Cookie Informationen Etags GZIP Komprimierung Nein Unnötig Ja Nein {js} Ja Nein Ja Nötig Nein Ja Etag Etags AJAX 1 Inhalte verteilen Maßnahmen Alle Assets sollten Cookieless verteilt werden. Bilder sollten zumindest auf Asset-Domain(s) liegen, besser im einem Content Delivery Netzwerk (CDN). 2 CSS & JavaScript extern lagern Es sollte so wenig CSS und JavaScript Code Inline vorhanden sein wie möglich. Externe Dateien lassen sich besser cachen. Möglichst das CSS im </head> und JS vor dem schließenden </body>-Tag. 3 Caching ermöglichen Die Assets sollten lange im Browsercache liegen können, z. B. durch entsprechende Expire Header. Zusätzliches serverseitiges Caching (z. B. APC, OpCache, MemCache) verkürzt die Reaktionszeit (z. B. bei Datenbank- oder Objekt-Caching). 4 AJAX einsetzen Inhalte, die nicht sofort zur Verfügung stehen müssen, sollten asynchron per AJAX geladen werden. Das gilt für alle Arten von Assets (JS, Bilder etc.). 5 DNS Lookups & Redirects vermeiden Jeder DNS-Lookup kostet Zeit, jeder Redirect (301, 302) gleich doppelt. Es gilt, diese so gut es geht zu vermeiden. {js} </> html css {...} Im Durchschnitt laden die deutschen Onlineshops in 2,9s. Bei einigen dauert das Laden über 20s. Im Vergleich werden im Schnitt 68 / 100 Punkte im Google Pagespeed Score und die Note C im Yslow Performance Index erzielt. Die Top 100 Onlineshops in Deutschland bewegen sich somit eher im oberen Mittelfeld. Kaum ein Shop sticht besonders heraus! Folgende 3 Tipps helfen bei der Verbesserung der Ladezeit und sorgen damit zusätzlich für einen Wettbewerbsvorteil! > ANALYSIERTE ONLINESHOPS ZUR LADEZEIT 2015 © 2015 konversionsKRAFT.de Manuel Brückmann / Illustration Patrick Castronovo / Datenerhebung Thomas Kraus Inline CSS Inline JS </> html <head> <head> <body> {js} css {...} 34 × 94 × CSS im Body JS im Head {js} css {...} 13 × 30 × Webserver DNS Server Webserver 26 × 301 REDIRECT