Die Seitenladezeiten einer Website sind nicht nur für Usability und Traffic entscheidend, sondern spielen auch für die SEO Optimierung eine große Rolle. Google gab im Blog 2012 bekannt, dass der PageSpeed einer Website direkt in das Ranking mit einfließe.
Sicherlich macht der Pagespeed nur einen geringen Teil des Rankings aus, doch er kann einer Website bei totalen Abweichungen schaden. Daher macht es Sinn, die Seitenladezeit zu optimieren. Wie man das mit kleinen Verbesserungen schnell erreichen kann, zeige Ich in diesem Artikel. 5 Tipps für schnellere Seitenladezeiten!
Warum der Pagespeed einer Website wichtig ist
Die Seitenladezeiten einer Website sind für Besucher sehr wichtig. Leute, die auf der Suche nach einem bestimmten Produkt oder Artikel sind, der genau ihren Vorstellungen entspricht, entscheiden sich in kürzester Zeit, ob Sie ihre Website lesen oder Sie sich eine Alternative suchen sollten. Wird der Besucher dann auch noch durch lange Wartezeiten an seiner Recherche gehindert, sinkt seine Kaufbereitschaft und sein Interesse.
Man könnte die Aussagen als belanglose Thesen abstempeln, doch eine Studie von Amazon bewies, dass die Conversion Rate pro 0.1 Sekunden zusätzlicher Antwortzeit um 1% sinke (Conversion = Bestimmtes Ziel einer Website, das erreicht werden soll. Bei Onlineshops ist der Verkauf eine Conversion). Demnach macht eine Sekunde Unterschied einen Verlust von 10% aus.
Vorteile von schnelleren Webseiten:
- Mehr organische Zugriffe über Suchmaschinen durch die PageSpeed Berücksichtigung
- Höhere Conversion Rate
Testen Sie die Geschwindigkeit ihrer Website:Auf webpagetest.org erhalten Sie detallierte Informationen und Statistiken (ohne Anmeldung)!
1. Http-Anfragen reduzieren
Jede Anfrage über ein Http-Request kostet Zeit. Der Grund, warum Ich dies an erster Stelle benenne, liegt in der Natur der Sache.
Http Verbindungen unterstützen keinen Datenstrom. Für jedes geladene Bild /Stylesheet wird eine neue Verbindung aufgebaut und im Anschluss wieder getrennt. Für Besucher von Smartphones und Tablets, die über mobiles Internet surfen, ist das sehr aufwändig und zeitraubend.
Optimierung: Überlegen Sie, welche Ressourcen wirklich benötigt werden. Versuchen Sie, externe Inhalte möglichst direkt zu integrieren. Javascript Code muss nicht zwangsweise extern eingebunden werden. Stattdessen empfiehlt es sich, den Quellcode direct über <script> und </script> einzubinden.
2. Verschiedene Bildergrößen bereitstellen (Skalieren)
Bei Websites, die mit vielen Bildern arbeiten, machen diese einen großen Anteil der Datenmenge aus. Ein weiterer Grund, Bilder zu skalieren und in möglichst vielen verschiedenen Größen bereitzustellen. Wer eine Seite mit dem Smartphone aufruft und ein großes Bild herunterladen muss, das im Nachhinein sowieso verkleinert wird, bekommt das Bild nicht in besserer Qualität zu sehen als ein für kleine Bildschirme optimiertes Bild.
Optimierung: Stellen Sie im Optimalfall drei Größen für Bilder bereit, die häufig zum Einsatz kommen. Je nach Displaygröße laden Sie dann das entsprechende Bild. Wie sie verschiedene Größen einer Datei bereitstellen und diese (ohne Javascript!) abhängig vom Gerät anzeigen, habe Ich im Artikel Schnellere Ladezeiten durch Conditional Loading gezeigt. Ein nützlicher Service zur Bildverkleinerung ist tinipng.com, der PNG Bilder möglichst verlustfrei komprimiert.
3. Dateien bereithalten: Browser-Cache benutzen
Es macht keinen Sinn, alle Elemente einer Seite bei jedem Aufruf neu zu laden. Abhilfe dagegen schafft das nicht unbekannte Browser Caching. Über den Header der Website teilen Sie dem Browser mit, wie lange er die Elemente lokal speichern soll.
Optimierung: Über die Header Daten können Sie einen “Expires” Wert angeben. Wie der Name schon suggeriert, legt man mit diesem Wert das Ablaufdatum fest. So wird ein Bild nicht bei jedem Aufruf neu geladen, sondern beispielsweise alle 2 Wochen. Google empfiehlt: Bilder mindestens 1 Woche im Browser Cache speichern!
4. Javascript im Footer laden
Optimierung: Laden Sie Javascript Quellcode erst am Ende der Seite. Dies hat den entscheidenden Vorteil, dass erst der Inhalt dargestellt und erst im Anschluss das Script geladen wird. Der Besucher kann ihren Inhalt also bereits lesen, während der Browser das Script noch herunterlädt. Auch Besuchertools (z.B. Google Analytics) können im Footer geladen werden.
5. CSS & Javascript komprimieren
Eine weitere Stütze zur Pagespeed Optimierung kann die Komprimierung von CSS- und Javascript Ressourcen sein. In CSS Stylesheets befinden sich oft Kommentare und viele Leerzeichen sowie Zeilenumbrüche, die der Benutzer nicht braucht.
Optimierung: Ich empfehle: Speichern Sie eine lesbare und eine komprimierte Version ab. Arbeiten Sie immer an der lesbaren Version und erzeugen Sie daraus wieder eine komprimierte Datei. Laden Sie schließlich nur die komprimierte Datei auf den Webserver. Für diese Aufgabe gibt es die nützlichen Tools csscompressor.com und javascriptcompressor.com. Der Name sollte die Funktionalität bereits erklären 🙂
Fazit
Die Pagespeed Optimierung kann für Websites, die sich bisher nicht damit beschäftigt haben, relativ einfach mit üblichen Werkzeugen durchgeführt werden. Im Anbetracht des Aufwands lohnt sich die Optimierung defitnitiv. Wer die Seitenladezeit seiner Website testen möchte, kann das über Pagespeed Insight von Google tun. Auf CoderDesigner gibt es ebenfalls einen interessanten Artikel über Google Pagespeed.
Quellen:
http://www.torbenleuschner.de/blog/730/pagespeed-so-machst-du-deine-website-schneller/
http://unbounce.com/conversion-rate-optimization/a-fast-web-site-increases-conversions/
http://javascriptcompressor.com/
http://csscompressor.com/
Bild: Bernd Kasper / pixelio.de
