Der Server rennt, doch die Seite lahmt Pagespeed-Optimierung jenseits des Servers

Größe: px

Ab Seite anzeigen:

Download "Der Server rennt, doch die Seite lahmt Pagespeed-Optimierung jenseits des Servers"

Edith Kaufman
vor 6 Jahren
Abrufe

1 Der Server rennt, doch die Seite lahmt Pagespeed-Optimierung jenseits des Servers

2 Fahrplan Warum Pagespeed wichtig ist Fallbeispiel Pagespeed 2.0

3 Studien zur Ladezeit von Webseiten Akamai Studie 40% der User brechen den Ladevorgang ab, wenn eine Webseite mehr als 3 Sekunden Ladevorgang erfordert. 52% der eshop Nutzer geben an, dass die Ladezeit eines Shops ausschlaggebend ist für eine Wiederkehr und erneute Nutzung eines Shops. 23% der User brechen das Online Shopping ab, wenn Webseiten langsam laden. 64% der unzufriedenen Shop User wechseln zu einem anderen Shop oder Anbieter. Wenn eine Website pro Tag ,- Umsatz erzielt, dann bedeutet 1 Sekunde Delay einen Verlust von 2,5 Millionen im Jahr. 3

4 Studien zur Ladezeit von Webseiten Gomez Report In trafficstarken Zeiten wechseln mehr als 75% der User zu anderen Anbietern, als dass sie lange Ladezeiten oder Server Delays akzeptoieren. 88% der User sind nach schlechten Erfahrungen mit einer Website nicht gewillt diese Website nochmals zu besuchen. Mehr als 25% der User berichten im Freundeskreis von schlechten Erfahrungen mit einer Website. Jupiter Research Webseiten mit einer Ladezeit von mehr als 4 Sekunden verzeichnen eine Abbruchrate von 33%. Forrester Research and Gartner Group: In den USA verlieren ecommerce Websites zwischen 1,1. 1,3 Milliarden Dollar jährlich. Ursache: User verlassen die Website aufgrund hoher Ladezeiten. 4

5 Studien zur Ladezeit von Webseiten ABERDEEN Group Eine Sekunde Delay in der Ladezeit führt zu 11% weniger Pageviews. Eine Sekunde Delay in der Ladezeit führt zu 16% weniger Zufriedenheit der User. Eine Sekunde Delay in der Ladezeit führt zu 7% weniger Conversions. Soasta Um eine Sekunde schnellere Mobile Webseiten erzeilen eine Steigerung der Conversionrate um 27%. Bei einer Ladezeit von über 4,2 Sekunden fällt die Conversionrate auf unter 1%. Nielsen Netratings 47% der User erwarten eine Ladezeit von 2 Sekunden oder weniger. 40% der User verlassen eine Website, wenn diese nicht in 3 Sekunden lädt. 5

Studien zur Ladezeit von Webseiten Radware 51% der Shop User in USA gaben in einer Umfrage an, dass sie den Kauf nicht abschliessen, wenn eine Website zu langsam ist.

6 Studien zur Ladezeit von Webseiten Radware 51% der Shop User in USA gaben in einer Umfrage an, dass sie den Kauf nicht abschliessen, wenn eine Website zu langsam ist. Zwei Sekunden Delay bei einer ecommwerce Seite, die normalerweise in unter 5 Sekunden lädt führen zu einem Anstieg der Abbruchraten von 20%. User haben früher langsame Websites eher akzeptiert. Heute steigt die Bouncerate schneller an. 6

7 Warum Pagespeed wichtig ist Google Walmart Amazon Shopzilla Firefox Yahoo AutoAnything.com Facebook Google ermittelte, dass um 0,5 Sekunden langsamere Suchergebnisseite 20% weniger Traffic erzielen. Jede Sekunde, die eine Webseite schneller lädt, bedeuten eine Steigerung der Conversions um 2%. Amazon ermittelte, das seine um 100ms langsamere Ladezeit in eine Reduzierung der Bestellungen um 1% resultieren. Shopzilla konnte mit einer Reduzierung der Ladezeit um 5 Sekunden ihre Conversionrate zwischen 7-12% steigern. Ein Anstieg der Ladezeit um 2,2 Sekunden führte zu einer Minderung der Conversionrate um 2,7%. Eine Reduzierung der Ladezeit um 0,4 Sekunden erbrachten einen Traffic Anstieg von 9% Eine Halbierung der Ladezeit erhöhte die Sales um 13%. Eine schnelle Ladezeit führt dazu, dass User mehr Inhalte konsumieren und das sie ausgibieger Netzwerk ihr Netzwerk nutzen.

8 Warum Pagespeed wichtig ist Conversion Entwicklung: Europas größter Lampenshop (B2C) Start der Maßnahmen 29,5% Steigerung der Conversion

9 Was hat es gebracht?

10 Fallbeispiel Als Ladezeit wurde immer die Zeit bis Visual Complete above the fold gemessen und nicht die Zeit bis alle Elemente übertragen wurden (Nachladefunktion). Die Daten wurden mit webpagetest.org erhoben und mit Pingdom.com und gtmetrix.com gegengeprüft.

11 Ladezeit 1und1.de vs. DE Mitbewerber 12,0 11,2 10,0 9,5 8,0 6,0 4,0 4,8 4,9 3,5 4,6 4,9 2,0 0,0 15

12 Ladezeit 1und1.de vs. DE ecommerce Sites 12,0 10,9 10,8 10,0 8,0 6,0 9,5 6,1 5,9 8,3 9,2 5,3 6,6 5,6 7,6 8,6 5,8 7,4 4,0 2,0 0,0 15

13 Ladezeit 1und1.de vs. US Mitbewerber Ladezeit: Visual Complete (above the fold Inhalte) in Sekunden 10,0 9,0 8,0 9,5 1&1 vs. US Mitbewerber 7,0 6,0 5,0 4,0 3,5 3,5 6,0 4,7 4,8 3,0 2,0 1,0 0,0 15

14 Monitoring 1und1.de vs. Mitbewerber Ladezeit: Visual Complete (above the fold Inhalte) in Sekunden 15

15 Monitoring 1und1.de vs. Mitbewerber 15

16 Ansätze zur Pagespeed-Optimierung 1. Technik

Technik: Bei HTTP 1.1 1. Nutzung von Subdomains Moderne Browser können von bis zu 8 Hosts parallel laden. 2.

17 Technik: Bei HTTP Nutzung von Subdomains Moderne Browser können von bis zu 8 Hosts parallel laden. 2. Preconnect <link rel="preconnect" href="//de.domain.com"> Hiermit wird auch der Handshake durchgeführt 3. CSS Sprites Reduzierung der Requests Ziel: - TTFB unter 200 Millisekunden -

18 Ansätze zur Pagespeed-Optimierung 2. Übertragungsleistung

19 Datenvolumen bei HTTP Lazy Loading above the fold Reduzierung der Daten für die erste Ansicht. 2. Images inline als Base64 nutzen. Bei Logos, Icons,... <h1>grafiken mit Data-URI</h1> <img width="16" height="16" alt="tick" src="data:image/gif;base64,r0lgoddheaaqamwa APj7+FmhUYjNfGuxYY DJdYTIeanOpT+DOTuANXi/bGOrWj6CONzv2sPjv2C mv1unu4zpgisg6djnj3imth8mtbs00anp1czsgy0y qlen47rgxw8amasw 7XWsmmvX2iuXiwAAAAAEAAQAAAFVyAgjmRpnihq GCkpDQPbGkNUOFk6DZqgHCNGg2T4QAQBoIiRSAw BE4VA4FACKgkB5NGReAS FZEmxsQ0whPDi9BiACYQAInXhwOUtgCUQoORFCGt /g4qaiqa7"> 3. Image Converter Hier je nach Bilder testen welches Tool geeignet ist. Kraken.io ImageOptim oder SVGOMG für SVGs

20 Ansätze zur Pagespeed-Optimierung 3. Rendertime

21 Bottlenecks: JavaScript und Rendering

22 Bottlenecks: JavaScript und Rendering

23 Pagespeed 2.0 Rendertime Grundlage Neben der Geschwindigkeit der vom Server an den Client des Users übertragenen Inhalte, ist deren Darstellung im Browser maßgeblich für die Ladezeit. Dabei haben folgende Aspekte der HTML / JS / CSS Codierung den höchsten Impact auf die Rendertime: Anzahl der DOM Elemente Verschachtelungstiefe der DOM Struktur Anzahl der Zugriffe via JS und CSS auf den DOM / Neustart des Rendering im Browser

24 DOM-Komplexität DOM-Struktur im Model

25 Pagespeed 2.0 Rendertime Grundlage Beispiel: Verschachtelung des DOM auf dsl/ Tiefe: 12 Level

26 Pagespeed 2.0 Rendertime Grundlage Beispiel: Verschachtelung des DOM auf Tiefe: 17 Level

27 Pagespeed 2.0 Code Qualität

28 Pagespeed 2.0 Code Qualität Vergleich der SEO Seiten für DSL von O2 und Vodafone unter dem Aspekt Qualität der Programmierung (HTML, CSS, JS): URLs: vs. Page weight Page weight Requests Requests

29 Pagespeed 2.0 Code Qualität Vergleich der SEO Seiten für DSL von O2 und Vodafone unter dem Aspekt Qualität der Programmierung (HTML, CSS, JS): URLs: vs. DOM complexity DOM complexity DOM manipulations DOM manipulations

30 Pagespeed 2.0 Code Qualität Vergleich der SEO Seiten für DSL von O2 und Vodafone unter dem Aspekt Qualität der Programmierung (HTML, CSS, JS): URLs: vs. Bad JavaScript Bad JavaScript jquery jquery Web fonts Web fonts

Pagespeed 2.0 Code Qualität Vergleich der SEO Seiten für DSL von O2 und Vodafone unter dem Aspekt Qualität der Programmierung (HTML, CSS, JS): URLs: https://www.o2online.

31 Pagespeed 2.0 Code Qualität Vergleich der SEO Seiten für DSL von O2 und Vodafone unter dem Aspekt Qualität der Programmierung (HTML, CSS, JS): URLs: vs. CSS complexity CSS complexity Maximal sollte man mit einer Komplexität von 4 Selektoren arbeiten. Tipp:

32 Pagespeed 2.0 Code Qualität Vergleich der SEO Seiten für DSL von O2 und Vodafone unter dem Aspekt Qualität der Programmierung (HTML, CSS, JS): URLs: vs. CSS complexity CSS complexity

33 Pagespeed 2.0 Code Qualität

34 Learnings Anzahl der DOM Elemente gering halten DOM-Verschachtelung auf max. 10 Ebenen begrenzen DOM-Zugriffe pro Seitenaufruf minimieren Seitenspezifische CSS-Dateien erstellen

35 Googles Meinung

36 Sylbecke Str Detmold Fon: Fax:

Ähnliche Dokumente

Der Server glüht, doch die Seite lahmt. Pagespeed-Optimierung jenseits des Servers

Der Server glüht, doch die Seite lahmt Pagespeed-Optimierung jenseits des Servers Sebastian Donners isa-media GmbH Fahrplan Warum Pagespeed wichtig ist Fallbeispiel Ansätze zur Pagespeed-Optimierung Pagespeed