Top 5-Faktoren für eine blitzschnelle Website
Kommentare

Kaum etwas ist für Nutzer ärgerlicher als Websites, die sich langsam aufbauen. In Zeiten schneller Internetverbindungen wirken solche Seiten anachronistisch – erst recht, wenn man bedenkt, dass eine langsam ladende Desktop-Site eine noch langsamere Mobil-Site bedeutet. Da der Zugriff von mobilen Devices aus stetig steigt, ist ein langsamer Seitenaufbau eine durchaus reale Gefahr für Webmaster – die Toleranz für längere Ladezeiten sinkt auf Nutzerseite nämlich immer mehr.

Eine schnelle Ladezeit hingegen bedeutet eine bessere Nutzer-Experience und dadurch eine niedrigere Bounce Rate – und beide Faktoren spielen auch für Crawler eine wichtige Rolle. Da nach dem Panda-Update verstärkt Nutzer Signals an Bedeutung gewonnen haben, ist ein schneller Seitenaufbau essenziell wichtig: Dieser führt zu einer entsprechend niedrigen Bounce Rate, wohingegen viele Nutzer den Vorgang abbrechen, wenn sich eine Seite nur langsam lädt. Eine mögliche Folge: Keine Empfehlung von Seiten Googles und hintere Plätze in den SERPs.

Im Folgenden haben wir deshalb die Top-5-Faktoren für eine blitzschnelle Website aufgeführt:

Aufräumen (Datenmenge reduzieren)

Vor allem bei Domains, die regelmäßig aktualisiert und mit neuen Inhalten angereichert werden, sammeln sich im Laufe der Zeit große Datenmengen an. Das Bereinigen von nicht mehr brauchbaren Datenmengen kommt dabei oft zu kurz. Dies ist allerdings eine nicht zu unterschätzende Gefahr, denn solche „toten Daten“ können sich negativ auf den Site Speed der Domain auswirke. Um dies zu verhindern, sollte der Code einer Seite regelmäßig aufgeräumt und bereinigt werden. Besondere Aufmerksamkeit beim Aufräumen sollte man z. B. CSS-Files, externen und eigenen Dateien sowie nicht mehr verfügbaren Ressourcen zukommen lassen.

Bereits im Vorfeld sollte man versuchen, die anfallende Datenmenge möglichst klein zu halten. Beispielsweise sollte man sich fragen, ob für eine Seite wirklich sechs oder mehr CSS-Files benötigt werden und ob das Einbinden von Social Media Buttons tatsächlich notwendig ist.

Bad Requests

Bad Requests werden hervorgerufen, wenn angefragte Ressourcen nicht mehr existieren. Um zu verhindern, dass der Browser mehrfache Anfragen an den Server stellt um sicherzustellen, dass die angefragte Ressource wirklich nicht existiert, sollten die Ursachen von Bad Requests auf ein Minimum reduziert werden. Übrigens verlangsamen nicht nur sinnlose Anfragen die Ladegeschwindigkeit einer Seite, sondern auch mögliche DNS-Lookups. Ist beispielweise ein Bild nicht vorhanden,  wird eine komplette 404-Seite gerendert, die eventuell noch Social Media Buttons im Footer oder Tracking-Pixel enthält. Durch das Google Page Speed Insights Tool werden solche 404-Fehler angezeigt (https://developers.google.com/speed/pagespeed/insights/).

Externe Dateien

Externe Scripte wie Social Share Buttons, Tracking Codes, Plugins und Google Webfonts beeinflussen die Ladegeschwindigkeit einer Seite in großem Maße. Bevor man also externe Seiten auf einer Seite anbindet, sollte man entscheiden, ob dies wirklich notwendig ist. Schließlich findet bei jeder externen Ressource ein DNS-Lookup statt.

top 5

Screenshot: http://www.feedthebot.com/pagespeed/dns-lookups.html

Eine Alternative zum Einbinden von externen Dateien ist es, die Daten auf dem eigenen Server zur Verfügung zu stellen. Dadurch können die Daten aus dem Cache geladen werden und die Ladegeschwindigkeit der Seite verringert sich deutlich. Beim Caching „erinnert“ sich der Browser an den Inhalt und muss ihn deshalb nicht noch einmal herunterladen, was die Seite schneller rendern lässt.

Eigene Dateien

Auch das Aufräumen der eigenen Dateien kann sich positiv auf die Seitenladegeschwindigkeit einer Seite auswirken, z. B. durch Zusammenfassen und Minimieren (Leerzeichen und Umbrüche im Code entfernen etc.). Dazu können Minimizer wie der Closure Compiler von Google verwendet werden (https://developers.google.com/speed/docs/insights/MinifyResources). 

QUICK WINS

  • Nicht vorhandene Ressourcen (404-Fehler) aufspüren und beheben
  • Unnötige Ressourcen entfernen
  • Dateien zusammenfassen und minimieren

Priorisieren (Datenmenge reduzieren, die sofort benötigt wird)

Bei einem Request wird die HTML-Datei einer Seite vor allen anderen Dateien angefragt. Aus der HTML-Datei ergibt sich, in welcher Reihenfolge alle anderen Ressourcen einer Seite angefragt werden. Befindet sich in der HTML-Datei z. B. ein Bild über einem Video, wird das Bild als erstes angefragt.

Im Normalfall müssen erst alle CSS- und JavaScript-Dateien geladen werden, damit alle Inhalte im Frontend (auf dem Desktop, dem Tablet oder dem Smartphone) angezeigt werden können. Das bedeutet, dass der Nutzer warten muss, bis alle Dateien angefragt und übertragen wurden, bis ihm alle Inhalte einer Seite angezeigt werden. Diese Abfolge von Anfragen von allen Ressourcen an den Server, um die Seite aufzubauen (HTML, CSS, Grafiken, JS, Fonts usw.), nennt man Render-Pfad.

Spricht Google von Page Speed, geht es also nicht um die Gesamtzeit, bis alle Ressourcen geladen sind, sondern um die Zeit, bis der User etwas zu sehen bekommt.In einigen Fällen ist es daher sinnvoll, erst einmal nicht die komplette Webseite zu laden, sondern z. B. nur die Inhalte im sichtbaren Bereich, der ohne Scrollen erreicht werden kann („above the fold“).

Priorisiertes Laden

Ein wichtiges Konzept für schnelle Ladezeiten ist der kritische Render-Pfad. Der kritische Render-Pfad kann dazu führen, dass große Websites mit vielen Ressourcen deutlich schneller geladen werden können.

„Kritisch“ bedeutet in diesem Fall: absolut erforderlich für den sichtbaren Bereich einer Website. Der kritische Render-Pfad ist demzufolge die Abfolge von Anfragen der Ressourcen, die benötigt werden, um den sichtbaren Bereich darzustellen.

Diesem Prinzip folgend, sollten in der HTML-Datei die Einbindungen der Ressourcen eine neue, priorisierte Reihenfolge erhalten:

  • Dateien, die für das initiale Laden der Seite notwendig sind, sollten am Anfang der HTML-Datei stehen, z.B. CSS-Files.
  • Dateien, die für das initiale Laden nicht benötigt werden, sollten hingegen am Ende der HTML-Datei eingebunden werden. Dazu gehören z. B. JavaScript für Social Buttons, Analytics, Werbeeinbindung etc.

Asynchrones Laden

Eine noch bessere Priorisierung der zu ladenden Ressourcen einer Seite wird gewährleistet, wenn einige Ressourcen nur dann geladen werden, wenn sie auch wirklich benötigt werden, z. B. durch Lazy Load.

Hierzu gehören etwa große Bildergalerien, Audioplayer oder Videoplayer. Beim Scrollen, Hovern oder Klicken wird das jeweilige JavaScript getriggert, was erst dann die benötigten Ressourcen lädt. Bekannte Beispiele sind die „Infinity Scrolls“ von Pinterest oder der Facebook Timeline.

QUICK WINS

  • JavaScripte im Render-Pfad nach hinten verschieben
  • CSS im Render-Pfad nach vorne ziehen
  • Lazy Load verwenden (wird W3C-Standard: <img lazyload=„1“>)

Parallelisieren (Datenmenge erhöhen, die gleichzeitig übertragen werden kann) 

Browser können pro Sekunde nur eine limitierte Anzahl von Anfragen an einen Server stellen, z. B.

Browser HTTP/1.1
IE 8 6
Firefox 3 6
Safari 3,4 4
Chrome 4+ 6
Iphone 4 4
Opera 10.51+ 8

Um diese Limitation zu überwinden, kann man durch Subdomains weitere Server simulieren. Dadurch wird es möglich, mehrere Ressourcen parallel anzufragen, was die Ladezeit um die jeweilige Komponente verkürzt, wie in der Grafik zu sehen.

Beispiel

  • beispiel.de
  • static1.beispiel.de
  • static2.beispiel.de

Fragt man statt einer Domain zwei cookiefreie Subdomains an, kann man beispielsweise mit dem Chrome Browser 18 statt 6 Ressourcen gleichzeitig anfragen.

.htaccess – Datenmenge reduzieren II

Die .htaccess-Datei bietet die Möglichkeit, den Webserver anzupassen, ohne dass man Zugang zu den Konfigurationsdateien des Servers besitzt. Um die Ladezeit zu reduzieren, sind Komprimierung und Caching die zwei wichtigen Stellschrauben.

Komprimierung

Um die Datenmenge während der Übertragung zwischen Browser und Server zu verkleinern, können Dateien in komprimierter Form übertragen werden (gzip oder deflate). Dies spart im Normalfall zwischen 50 und 70 % der Dateigröße und verringert somit auch Auslastung von Bandbreite und Ladezeit.

Caching

In der .htaccess Datei kann festgelegt werden, welche Art von Dateien gecached werden soll und wie lange diese Versionen gültig sind (Expires oder Cache-Control max-age). Generell ist eine längere Gültigkeit von Vorteil und kann zur Not mit URL-Fingerprinting umgangen werden. Unter Fingerprinting wird die Versionierung einer Datei durch einen einzigartigen Namen verstanden, sodass die Ressource dadurch am Cache vorbei gelangen kann. Wenn die Datei beispielsweise landingpage.css heißt, könnte sie nach dem Fingerprinting landingpage1.css oder landingpage2.css heißen.

QUICK WINS

  • HTML, JS und CSS komprimiert übertragen
  • JS, CSS und Bilder cachen

 Bilder (Datenmenge von Bildern reduzieren)

Die Übertragung jedes einzelnen Bytes zwischen Browser und Server kostet Zeit. Je kleiner die Bilder sind, desto schneller können sie übertragen und die Seite gerendert werden.

Bilder skalieren

Die eigentliche Bildgröße sollte genau der angezeigten Bildgröße entsprechen. Ansonsten wird ein großes Bild angefragt und übertragen, letztendlich aber kleiner ausgegeben, was unnötige Server-Kapazität in Anspruch nimmt.

Bildkomprimierung

Bilder sollten immer in web-optimierter Form komprimiert abgespeichert und hochgeladen werden. Man unterscheidet verschiedene Kompressionsverfahren nach verlustfreier und verlustbehafteter Kompression. Bei der verlustbehafteten Kompression (lossy) werden Bildinformationen weggelassen. Dabei wird versucht, den Informationsverlust so unmerklich wie möglich zu gestalten. Bei der verlustfreien Kompression (lossless) gehen keinerlei Informationen verloren, es werden lediglich wiederkehrende Muster zusammengefasst (z. B. gleichfarbige Flächen).

QUICK WINS

  • Bilder nur in benötigter Größe hochladen
  • Bilder komprimieren

MobileTech Conference 2014

Interessiert ihr euch für weitere Themen rund um die Entwicklungen aus dem Mobile-Bereich? Dann sei euch die MobileTech Conference 2014 ans Herz gelegt, die vom 1. bis 3. September 2014 im nhow Hotel in Berlin stattfindet. Die MobileTech gehört zu den wichtigsten Plattformen der Mobile-Branche im deutschsprachigen Raum und vermittelt das nötige technische und strategische Know-how, um sich auf dem hartumkämpften Mobile-Markt erfolgreich zu positionieren. Hier geht es zur Anmeldung

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -