LADEZEITEN DEUTSCHERONLINESHOPS
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 Elemente143,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,2kb
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 × 301REDIRECT