Website Ladezeit & PageSpeed verbessern: So geht´s!

Website PagespeedDie 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

Website Pagespeed verbessern – Schnellere Ladezeiten durch Conditional Loading mit Media Queries

Responsive WebdesignSeitenladezeiten sind ein durchaus entscheidender Faktor in puncto Usability. Der vor allem durch Smartphones hervorgerufene Unterschiede zwischen Displaygrößen stellen Webentwickler und Webdesigner vor neue Aufgaben. Aus einer statista.de Statistik geht hervor, dass bereits 2013 rund 95% der Internetnutzer mit einer Bandbreite von 2 MBit / s oder mehr im Internet surften. Von diesen Werten können Smartphone Nutzer beim mobilen Internet ohne einen LTE Tarif nur träumen.

Was ist Conditional Loading?

Conditional Loading – übersetzt „bedingtes Laden“ – ist der Mechanismus, Website Inhalte je nach Gerät in optimierter Form darzustellen. In der Praxis kann dies beispielsweise bedeuten, dass alle Geräte, deren Bildschirmbreite 500 oder weniger Pixel beträgt, ein 500 Pixel breites Hintergrundbild erhalten. Geräte, deren Breite 500 Pixel überschreitet, erhalten ein größeres Bild (z.B. mit 700 Pixel Breite). Es gibt verschiedene Arten des Conditional Loadings.

Alle guten Dinge sind Drei

Man kann über eine Klasse wie MobileDetect überprüfen, ob der Besucher eine Website von einem Smartphone, Tablet oder Desktop PC aufruft. Die Methode finde ich allerdings nicht optimal, da Design & Programmlogik vermischt werden müssten. Man müsste sich im Script um die Darstellung kümmern. Javascript lässt sich ebenfalls für Conditional Loading verwenden, indem man die Breite und Höhe der Geräte über die Standard Javascript Funktionen abfragt. Mein Favorit bleibt jedoch das Conditional Loading über CSS. Seit CSS 3.0 ist es möglich, mithilfe einiger Längenattribute eigene Stylesheets für bestimmte Gerätegrößen zu definieren.

 

Media Queries – Das individuelle Stylesheet

Media Queries sind relativ simpel. Sie werden innerhalb eines Stylesheets definiert und überschreiben die CSS-Eigenschaften speziell für ein gewisses Gerätemedium oder eine Gerätegröße.

Die Queries funktionieren wie eine if-Abfrage und sind wie folgt aufgebaut: media <Medientyp> and (weitere Attribute, z.B. Gerätebreite)

Eine Beispiel Query, die alle Geräte mit einer Breite von 500 Pixeln auswählt, sähe wie folgt aus:

@media all and (min-device-width: 500px) {
spezielle CSS Eigenschaften für Geräte mit einer Breite von <500px
}

Als Medientypen kann man zahlreiche Werte definieren, darunter beispielsweise print zum Druck der Website oder handheld für Geräte die üblicherweise in der Hand gehalten werden. Eine Übersicht über die Medientypen lässt sich dem Dokument von SelfHtml zu Mediaqueries entnehmen. Ich verwende für Responsive Webdesign dennoch meist all als Medientyp, weil die entsprechenden Stylesheets dann auch auf Desktop PCs geladen werden, was ich ebenfalls sinnvoll finde.

Stylesheets auf die Gerätegröße zurechtschneiden (Unterschied zwischen Geräte- und Fensterbreite)

Widmen wir uns nun den Größenangaben der Geräte. Es gibt einen wesentlichen Unterschied bei den Attributen, den man bei der Implementierung beachten sollte: Man kann für die Media Queries die Gerätegröße oder die aktuelle Größe des Browserfensters als Bedingung festsetzen. Der Unterschied ist für Besucher von Desktop PCs besonders entscheidend. Wenn man die Gerätebreite für das nachfolgende Stylesheet auf 500 Pixel festsetzt, dann wird es nur für entsprechend kleine Geräte verwendet. Setzt man jedoch nur die Breite als Bedingung fest, laden auch Browser, deren Browserfenster die Breite unterscheidet, diese Eigenschaften.

Media Query für Gerätebreite

@media all and (max-device-width:749px){
Stylesheet
}

Media Query für Breite des Browserfensters

@media all and (max-width:749px){
Stylesheet
}

 

Bilder von Gerätegröße abhängig herunterladen

Ziel ist es, durch das Conditional Loading Datenmengen einzusparen, die unnötig übertragen werden. In der heutigen Zeit mag dies auf den ersten Augenblick vielleicht “sinnlos” zu wirken, doch für Smartphone Besucher können macht die Datenmenge einen großen Teil der Usability aus. Das W3 Konsortium empfiehlt sogar ein Maximum von 20KB für mobile Websites. Aus diesem Grund laden wir die verkleinerten Bilder für Mobilgeräte über CSS.

Ein Browser arbeitet immer mit dem letzten CSS-Wert, den er versteht. Aus diesem Grund nimmt man beim Stylesheet eine Abstufung vor. Die Bedingungen werden von oben nach unten immer kleiner. Erst definieren wir in unserem Beispiel das Stylesheet für alle Geräte, dann für 750 Pixel Breite und zu guter Letzt für 500 Pixel Breite. Ich empfehle, für statische Bilder am besten 3 oder mehr Versionen anzulegen. Groß, mittel und klein. Hier ein Beispiel zur Implementierung:

 

#teaser{
background-image: url(background-image.jpg);
}
 
@media all and (max-width:750px{
 
#teaser{
background-image: url(background-image-middle.jpg);
}
 
}
 
@media all and (max-width:500px{
 
#teaser{
background-image: url(background-image-small.jpg);
}
 
}

 

Welche Technik nutzt ihr für Responsive Webdesign Bilder? Lasst es mich in den Kommentaren wissen! 🙂

 

 

 

Bild: Jorma Bork  / pixelio.de