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
Tolle Arbeit. Vielen dank für ihre informationen. Ich wünsche Ihnen viel Erfolg.
Also wir haben bei uns vor allem Caching aktiv und HTTP-Requests stark reduziert, unter anderem durch CSS-Sprites… Da gibt es bei uns immer noch potenziell.. Aktuell werden 46 Requests benötigt, unser Ziel soll aber um die 25-30 sein 🙂
Beim Cache haben wir ca. 90% die zwischen gespeichert werden. Data-URI würden wir vielleicht nutzen, aber ich weiß net wie D:
Es fehlen sogar einige ganz essentielle Aspekte der Optimierung. Es wurde ja schon die Verringerung der Requests angesprochen. Dabei fehlt aber z.B. die Möglichkeit, dass CSS und JavaScript Dateien zu einer einzigen Datei kombiniert werden können.
Ein weiterer wichtiger Aspekt ist die sogenannte Minification von statischen Textdateien.
Außerdem die Komprimierung von Textdateien und vom HTML-Quellcode mit DEFLATE/GZIP durch den Server.
Dies bringt alles in der Regel sehr viel mehr, als die hier im Artikel erwähnten Methoden. Natürlich sind diese aber auch genauso notwendig, um eine optimale Performancesteigerung zu erreichen.
Ich nutze auf meinem V-Server bei Host Europe daher auch das Page Speed Modul. Wenn dieses aber auch in Hosting-Pakten ohne eigenen Server einsetzbar wäre, könnte sich Host Europe noch viel mehr als zukunftsicherer und zuverlässiger Hoster mit toller Performance positionieren.
Also, ich hoffe auf eine baldige Aktualisierung der Hosting-Angebote 🙂
P.S. Solltet ihr Fragen zum Thema Page Speed Modul haben, dann könnt ihr euch auch das Video auf meinem Blog vom WP Camp im letzten Jahr ansehen.
Vielen Dank für das informative und freundliche Feedback an dieser Stelle!
Es sind in der Tat einige Optimierungsmaßnahmen aufgelistet, die mir entweder schon seit so langer Zeit bekannt sind, dass ich sie bereits als gegeben hingenommen habe (Kompression der Dateien, DEFLATE/GZIP), aber auch sehr interessante Ansätze, die sich meinem Wissen bisher entzogen haben (Kombination von JS/PHP/CSS).
@Bernhard: Vielen Dank dafür!
@Marco Büttner: Ich plane derzeit, in weiteren Beiträgen auf die verschiedenen Aspekte dieses Artikels im Einzelnen etwas detaillierter einzugehen, damit jeder Punkt etwas besser durchleuchtet wird. Gerne übernehme ich die Themen von Bernhard in einer Fortsetzung dieses Artikels sowie als Einzelthema. Damit alle Informationen letztlich zusammen bleiben, verlinke ich selbstverständlich die Artikel an gegebener Stelle miteinander.
@Thomas: Schön zu hören, dass es noch weitere Artikel dazu geben wird. Ich finde das generell ein sehr wichtiges Thema, das leider viel zu viele Webseitenbetreiber nicht auf dem Plan haben. Und leider ist DEFLATE bei einer Vielzahl von Seiten nicht aktiv. Genauso wenig wie Expire-Headers. Ich schreibe gerade eine Abschlussarbeit zu Page Speed und bin dabei auf viele Seiten gestoßen, die all das nicht machen, obwohl sie eigentlich genug Geld und Know-How haben sollten, um zumindest die Basics abzudecken.
Super Artikel, vielen Dank! Die meiste Ladezeit benötigt allerdings leider witzigerweise Google Analytics 🙂
Ein schöner Artikel, wenn auch viele dieser Informationen schon vielfach veröffentlicht wurden. Spannend wäre an dieser Stelle doch gewesen Informationen zu erhalten wie man Seiten speziell mit Host Europe verbessern kann. Beispielsweise ist Latenz ein Problem.
Mit bestem Gruß
Norman
Eine Optimierungsmöglichkeit für WordPress-Installationen ist zum Beispiel der Wechsel auf ein BlogHosting-Produkt von Host Europe. Die MySQL-Datenbanken laufen auf High-Speed-SSD-Festplatten. Das ermöglicht einen höheren Datendurchsatz und schnelle Seitenaufrufe. Die beiden Blog-Serverprodukte haben zudem einen NGINX-Cache, durch den sich der Speicheroverhead deutlich reduzieren lässt. Zum Latenzproblem würde ich vorschlagen, dass Sie die Latenz einmal testen, z.B. mit WinMTR. So lassen sich Schwachstellen konkret lokalisieren. Mit dem Ergebnis können Sie sich dann gerne an unseren Support wenden.