Das Internet befindet sich in einem stetigen Wandel. Diente es doch ursprünglich dem reinen Informationsaustausch für Militär und Universitäten. Die Dokumente enthielten damals höchstens Bildinhalte und Verknüpfungen zu anderen Dokumenten. Die Bilder wurden später durch blinkende Animationen in unendlichen Loops ausgetauscht. Sound- und Video-Daten läuteten schließlich das Multimedia-Alter ein, Zugangsgeschwindigkeiten wurden zwangsläufig den Bedürfnissen der wachsenden Nutzerzahl angepasst. Flash konnte den Leistungshunger dieser neuen multimedialen Begehrlichkeiten eine Zeit lang stillen, um den Ausbau der DSL-Netze ein wenig erträglicher zu gestalten. Recht zeitnah gab es nur noch wenige weiße Flecken auf der DSL-Landkarte, so dass beliebte Katzenvideos, dreidimensionale Kartendienste und Soziale Netze aller Art an Attraktivität gewannen.
Letztere sorgten schließlich für den „Web 2.0“-Kreuzzug, mit dem die eigene Meinung auch außerhalb von langweilig gestalteten Foren kundgetan werden konnte. Diese Bewegung ließ auch nicht die mobilen Endgeräte außen vor. Smartphones sind beliebter denn je. Die darauf installierten Apps benötigen in den meisten Fällen eine Rückleitung „nach Hause“, um den Anwender mit einer erstaunlichen Datenflut zu beeindrucken. Während die heimische DSL-Leitung mittlerweile eher für die Home-Automation und digitales TV-Vergnügen ganz besonders breitbandig ausgebaut sein muss, wechselt das Standardverhalten beim Web-Browsing in zunehmendem Maße auf die mobile Plattform. Und genau mit diesem Trend wurde die Ladezeiten-Reduzierung zu einem wichtigen Aspekt, der als SEO-Faktor inzwischen einen ansteigend stärkeren Einfluss auf die Bewertung von Websites hat.
Ladezeiten – welchen Einfluss hat man eigentlich?
Es gibt ein breit gefächertes Portfolio an Einflussfaktoren auf die Ladezeiten von Websites. Einige der Wichtigsten möchten wir Ihnen an dieser Stelle näher bringen, um Sie bei der Optimierung Ihres Webprojekts tatkräftig zu unterstützen.
Responsive Design & Media-Queries
Ein Ansatz, Ihre Website für so viele Endgeräte wie möglich zu optimieren, ist der vielfach diskutierte Hype des Responsive Design. Dabei werden sogenannte „Media-Queries“ als Weichen verwendet, um verschiedene Stilvorlagen an unterschiedliche Endgeräte auszuliefern. Bei kleineren Displays werden so beispielsweise Bilder in kleineren Formaten angeboten, Schriftarten angepasst oder ganze Bereiche ausgeblendet, die lediglich marginale Inhalte anbieten. Auf diese Weise bleibt der Fokus auf den Kerninhalten und es werden für die Übertragung wichtige Ladezeiten reduziert. Es gilt in diesem Zusammenhang übrigens der Vorsatz „mobile first“, d.h. es wird zuerst analysiert, ob es sich bei dem Endgerät beispielsweise um ein Smartphone handelt. Bei einem Aufruf über ein mobiles Endgerät wird der Großteil der Inhalte gar nicht erst übertragen. Es folgen Weichen für größere Darstellungsgrößen, aber auch für Print- und ggf. Audio-Ausgaben.
Reduzierung von HTTP-Requests
Die Anzahl der einzelnen Anfragen zu Bruchteilen der Website sind ein ganz entscheidender Faktor für die Reduzierung der Ladezeiten. Prinzipiell kann man sich eine Browser-Anfrage zu einer bestimmten Website wie eine Abfolge von Fragen und Antworten, ähnlich einem Interview vorstellen:
Der Browser stellt beim Webserver eine Anfrage, was die Auslieferung des Codes der entsprechenden Website als Antwort zur Folge hat. Dieser Code wird nun vom Browser interpretiert und ggf. noch einmal nachgehakt, wenn zusätzliche Ressourcen wie Bilder, CSS-Angaben zur Formatierung, eingebettete Videos, etc. gefunden werden. Jede dieser Fragen und Antworten muss vom lokalen Browser zum Webserver und wieder zurück. Dies geschieht zwar in Sekunden oder sogar Bruchteilen von Sekunden, nimmt aber in der Summe eine Menge Zeit in Anspruch.
CSS Sprites
Immerhin wird dabei so viel Zeit in Anspruch genommen, dass es sich ggf. lohnt, so genannte „CSS-Sprites“ anzulegen. Dabei werden Bilder zu einem großen Einzelbild zusammengefasst, welches dann nur einmal übertragen werden muss. Zusätzlich werden nur die Größe und Position des jeweils zu betrachtenden Bildausschnitts per Stylesheet angegeben, wenn im Browser ein Bild dargestellt werden soll. Mit Hilfe dieser Technik werden zum Beispiel gerne die auf der Website verwendeten Social Media Icons übertragen. Neben der Einsparung der Übertragungswege für viele einzelne Bilder werden auch alle mitgespeicherten Informationen der Einzelbilder (auch die Format-bezogenen, nicht für die grafische Darstellung benötigten Daten) auf die eines einzelnen Bildes reduziert. Auf vergleichbare Weise kann auch mit Audiodaten verfahren werden.
Inline-Images / Data URIs
Bilddaten können aber nicht nur als weitere Ressource auf dem Webserver benannt werden, sondern alternativ dazu auch „inline“, d.h. unmittelbar im Seitenquelltext übertragen werden.
Mittels der Base64-Codierung werden Bilddaten in Data URIs umgewandelt, die anstelle des originären Bildpfades angegeben werden können. Diese werden schließlich zusammen mit dem Seitenquelltext übermittelt. Grundsätzlich gilt natürlich, dass sämtliche Bildinhalte auf ihre Webtauglichkeit hin überprüft und ggf. angepasst werden sollten. Es gibt eine Reihe sehr wirkungsvoller, teilweise verlustfreier Kompressionsverfahren, mit denen Ihre Bilder hinsichtlich der Ladezeiten optimiert werden können. Auch vor der Codierung für den Einsatz als Inline-Image macht eine Anpassung der Datengröße durchaus Sinn.
Kompression & HTTP Caching aktivieren
Daten, die sich selten ändern, wie bestimmte Grafiken, CSS-Dateien oder ausgelagerte JavaScripts können zusätzlich im Cache vorgehalten werden, damit sie nicht bei jedem Seitenaufruf mitgeladen werden müssen. Damit reduziert sich die Anzahl der zu übertragenden Ressourcen und HTTP Requests auf ein Minimum.
Ergänzung vom 20.05.2014:
Werden die Inhalte daüber hinaus mit Hilfe von Minifizierung und zusätzlichen Packverfahren, z.B. „gzip/deflate“ in komprimierter Form angeboten, wird auch die benötigte Bandbreite für die Übertragung minimiert, was ebenfalls Ladezeiten spart.
Ergänzung vom 24.07.2014:
Durch die Verwendung eines Cache wird nicht nur die Ladezeit auf dem Clientsystem optimiert, es kann auch auf der Server-Seite überflüssiger Traffic eingespart werden.
Fazit
Alle in diesem Artikel aufgeführten Maßnahmen können zu einer messbaren Beschleunigung der Ladezeit Ihres Webprojekts führen. Da in zunehmendem Maße klassische Webinhalte über mobile Endgeräte konsumiert werden, sind die Ladezeiten mittlerweile zu einem wichtigen Bewertungskriterium geworden, das nicht außer Acht gelassen werden sollte.
Testen Sie Ihren Internetauftritt am besten gleich auf Verbesserungspotenzial auf den Seiten der Google PageSpeed Insights und finden Sie im Detail heraus, wie Sie Ihre Ladezeit ideal verkürzen können.
Welche PageSpeed-Optimierungen sind fester Bestandteil Ihrer Toolbox? Haben wir einen wichtigen Aspekt vergessen? Hinterlassen Sie uns Ihre Ideen als Kommentar!
- Keyword-Recherche mit dem Keyword Planner - 10. Februar 2016
- Die beliebtesten Content Sharing-Erweiterungen für Joomla! - 19. Januar 2016
- E-Commerce mit Erfolgskurs - 25. November 2015
