7. Allgemeine Daten zum Pagespeed
• 57% brechen den Besuch einer Website ab, wenn diese nicht in 3s
geladen ist
• 65% der 18-24 jährigen erwarten eine Ladezeit von 2s und weniger
8. Was bedeutet das wirtschaftlich?
• Amazons Rechnung:
1s längere Ladezeit = $1,6Mrd. weniger Verkäufe/Jahr
• Googles Rechnung:
0,4s längere Ladezeit = 8Mil. weniger Searches/Tag
9. Delay User Reaction
0-100ms Instant
100-300ms Leicht spürbare Verzögerung
300-1000ms Fokus, spürbare Verzögerung
1s+ Gedankliches Abschweifen
10s+ Das wird wohl nix…
10. Was bedeutet das für uns?
• 1 Sekunde Zeit um die volle Aufmerksamkeit des Nutzers
beizubehalten
• Im besten Fall werden Teile der Seite bereits innerhalb von 100ms
ausgeliefert
• Die Conversion bei langsamen Webseiten geht deutlich in den
Keller
19. • Critical Rendering Path ist der Weg, den der Browser gehen muss,
bevor er den sichtbaren Bereich ausgeben kann
20. • Das CSS-File muss abgefragt werden,
bevor etwas angezeigt werden kann
• erst nach Laden der Vollständigen CSS-Datei
kann an das Rendern übergeben werden
Nochmal
21. • CSS & JS werden abgefragt sobald sie im HTML auftauchen
• Vor der vollständigen Abfrage der externen Files kann keine
Darstellung geschehen
• CSS & JS können sich auch noch untereinander blockieren
• alles auf Kosten des Nutzers
24. Maßnahmen
• CSS & JS in jeweils eine Datei zusammenfassen
• CSS & JS an das Ende des <body> versetzen
• Für den sichtbaren Bereich benötigtes CSS & JS inline im header
integrieren
27. • der sichtbare Bereich wird angezeigt bevor das externe CSS-File
überhaupt abgefragt wird
• keine zusätzlichen http-request bevor der sichtbare Bereich
dargestellt werden kann
• User können mit der Seite interagieren, lange bevor diese überhaupt
fertig geladen ist
28. –Zuhörer
„Du kannst da ja toll drüber reden und erzählen, aber wenn es
leicht zu erreichen wäre, würde das ja Jeder machen!“
38. 1,4s ist noch weit von unserem Ziel entfernt
• Wie viel müssen wir im Critical Rendering Path einsparen?
• 1,41s - 0,5s = 0,91s
• 1 - 0,5s / 1,41s = 64,5%
47. 5. Fazit
• Der Critical Rendering Path ist kein Hexenwerk und sollte besonders
im E-Commerce Bereich genutzt werden
• In unserem Beispiel haben wir eine Zeitersparnis von 78,3% erreicht
48.
49. Webp
• Kann sowohl JPG, PNG, als auch GIF abbilden
• Spart 30% bis 65% der Dateigröße ohne
Qualitätsverlust
• Beide Dateitypen werden auf dem Server
abgelegt und je nach Browser ausgegeben
50. Vielen Dank für Eure Aufmerksamkeit
• https://www.facebook.com/daniel.gerlach.35
• https://www.seo-hochschule.de