Mit diesen Maßnahmen wurden deutlich schnellere Ladenzeiten für lambertschuster.de erreicht. Erreichen Sie mit diesen Schritten schnelle Ladezeiten für Ihre Website.
Nein. Ein klares Nein! Früher war nicht alles besser. Zu den Dingen, die ich zum Beispiel nicht im Geringsten vermisse, gehört das Warten auf den Aufbau einer Internetseite Ende der Neunziger Jahre. Schnelle Ladezeiten? Ha! Bis zu fünf Minuten konnte es dauern, bis eine Seite vollständig geladen war. Die Telefonleitung war analog, mit dem Modem und dem damit untrennbar verbundenen Kratzen und Piepen ging man ins Netz. Bezahlen musste man die tatsächliche Online-Zeit, gesucht wurde mit Yahoo, AltaVista oder Lycos. Google? Wer ist Google? Während des Seitenaufbaus konnte man sich in Ruhe einen Kaffee holen – und diesen manchmal noch während der Ladezeit austrinken… Wie gesagt: Früher war nicht alles besser.
Schnelle Ladezeiten – höchstens zwei Sekunden
Heute diktiert uns Google, wie schnell eine Seite geladen sein muss. Ist sie zu langsam, wird sie „downgerankt“, abgewertet – jedenfalls im Google’schen Sinne. Erste Seite bei den Suchergebnissen? Mit fünf Sekunden Ladezeit? Vergiss es! Fünf SEKUNDEN… Im heutigen Internetverständnis eine Ewigkeit. Es muss schnell gehen, immer schneller, Ladezeiten von unter zwei Sekunden – damit ist aktuell vielleicht ein virtueller Blumentopf zu gewinnen. Am besten aber, es geht noch schneller…
Am Beispiel von lambertschuster.de bekommt man einen Eindruck, was in Sachen „Performance-Steigerung“ für schnelle Ladezeiten so alles möglich ist.
Umstellung auf Responsive Design – zulasten der Ladezeiten
Es bestand Handlungsbedarf! Im März 2014 wurde meine Seite auf Responsive Design umgestellt, das heißt, dass sich meine Website an das jeweilige Endgerät des Nutzers anpasst. Das hat erst einmal nichts mit schnellen Ladezeiten zu tun, aber spätestens seit April 2015 stuft Google Seiten, die nicht im Responsive Design programmiert sind, herunter. Das ist nachvollziehbar bei einer wachsenden Anzahl von Menschen, die mobil im Internet unterwegs sind. Leider spielte aber beim Programmieren von lambertschuster.de vor allem das Aussehen eine Rolle, nicht jedoch die Schnelligkeit. Und da hatte ich den Salat: Ein tolles Responsive Design, aber Ladezeiten von teilweise bis zu neun Sekunden. Nicht drei, nicht fünf, sondern NEUN! Für eine gute Platzierung in den Suchergebnissen war das völlig inakzeptabel, einmal ganz zu schweigen von den Geduldsproben, auf die ich meine Besucher damit stellte.
Schritt für Schritt zu schnellen Ladezeiten für die Seite lambertschuster.de
1. Nur laden, was sichtbar ist
Der erste Schritt bestand darin, die Seite so zu programmieren, dass beim Aufruf nur noch der auf dem jeweiligen Endgerät zuerst sichtbare Teil geladen wird. Ein prima Kniff mit Blick auf Google und schnelle Ladezeiten, denn die Suchmaschine bewertet nur die erste Ladezeit, alles was nachgeladen wird, kann man hinsichtlich des Rankings zunächst außer Acht lassen.
2. Bilder im Kleinstformat anzeigen
Aber es geht ja wie gesagt nicht nur um Google und das Ranking, sondern um die Nutzerfreundlichkeit. Deshalb bestand der zweite Schritt in Sachen schnelle Ladezeiten darin, ladeintensive Inhalte zu komprimieren. Bilder etwa werden nun erst einmal als Thumbnail, also in „Daumennagel“-großen Vorschau-Ansichten dargestellt, und erst dann mit der vollen Datenmenge geladen, wenn der User sie tatsächlich aufruft.
3. Optimierung von Basis- und Hintergrundinformationen
Jetzt wird es technisch. Auch für mich ist das nicht ganz zu durchschauen, aber es wirkt. Die Datenmenge einer Seite bezieht sich nicht nur auf die sichtbaren Anteile. Viele Datentypen müssen abgefragt werden, um eine Seite zu laden. Unzählige Softwaremodule, so genannte Plugins, sollen das Surferlebnis versüßen. Mit CSS-Dateien wird das Aussehen der Seite, etwa Farben, Schriftart oder Layout, bestimmt. Um dynamische Inhalte (z. B. einen Slider) darzustellen, braucht man JavaScript während HTML statisch ist. Aber wenn JavaScript verarbeitet wird, hält das die Website auf. All dies wurde optimiert – bis hin zu einer komprimierten Ausgabe des Quelltextes, womit eine weitere Performance-Steigerung erzielt werden konnte.
4. Zeitfresser externe Abfragen ausschalten
Ein echter Zeitfresser sind auch externe Abfragen, zum Beispiel für die Kennzahlen der Social-Media-Plattformen. Vor den Anpassungen im Sinne einer schnelleren Ladezeit von lambertschuster.de wurden bei jedem Aufruf der Seite die Kennzahlen extern, zum Beispiel bei Facebook, abgefragt. Jetzt ist es so, dass diese einmal täglich per Script abgerufen und in einen Zwischenspeicher gelegt werden. Ja, richtig, das heißt, dass meine Leser teilweise keine topaktuellen Daten zu sehen bekommen. Doch solche Zugeständnisse an die Schnelligkeit zu Lasten der Aktualität sind vertretbar.
5. Meine Daten sind jetzt Amerikaner – VULTR und CloudFlare
Dieses Zugeständnis gilt auch für den eigentlichen Hosting-Ort meiner Seite. Meine Daten sind nämlich nach Amerika umgezogen. Bevor Sie sich jetzt aber an den Kopf fassen und fragen, ob gerade das nicht für sehr lange Ladezeiten verantwortlich ist, lassen Sie sich sagen, dass es genau andersherum ist.
Um die Ladezeiten zu verkürzen, nutze ich nämlich einen Dienst namens CloudFlare. Dieser verspricht nicht nur Schnelligkeit, sondern auch Sicherheit und Komfort. CloudFlare ist ein Content Delivery Network (CDN), das Daten schnell ausliefern soll. Dahinter steht das Prinzip, dass die Daten einer Seite über ein globales und weit verzweigtes Servernetz zur Verfügung gestellt werden, und zwar immer von dem Server aus, der dem User am nächsten ist. Kurze Wege = Schnelle Ladezeiten. Dabei wird ein Abbild der Seite aus dem Zwischenspeicher (Cache) zur Verfügung gestellt, nicht die tatsächlich aktuelle Seite. Das geht rasend schnell und wirkt sich sehr positiv auf die Ladezeiten aus. Per automatisiertem Script werden in regelmäßigen Abständen alle Daten neu eingelesen, so dass die Aktualität dann doch erhalten bleibt. Und warum USA? Nun ja, der Server, VULTR, auf dem lambertschuster.de nun liegt, harmoniert nach Ansicht vieler Web-Experten am allerbesten mit CloudFlare.
6. Optimale Serverarchitektur für schnelle Ladezeiten
Damit das alles bestens funktioniert, haben wir schließlich auch noch die gesamte Serverarchitektur meiner Seite lambertschuster.de angepasst. Bereits vorher waren alle Daten im Sinne einer schnelleren Ladezeit auf zwei Quellen verteilt. Nun aber wurde die eigentliche Datenbank von MySQL auf MariaDB und der Webserver von Apache auf Nginx umgestellt.
Bitte – das ist mir selbst zu kompliziert, das sind Dinge, um die sich meine IT-Spezialisten kümmern. Wer Details möchte, findet sie hier:
MariaDB vs. MySQL
Vergleich Apache mit Nginx
In einer Datenbank sind sämtliche Texte enthalten, aber auch die Informationen für die Struktur der Seite, für den Aufbau, etwa dafür, in welcher Reihenfolge die Inhalte auf der Seite angezeigt werden. Alle Bilder und Videos hingegen sowie der eigentliche Code der Seite, ebenso wie die Gestaltung über Themes und Stylesheets, kurzum alle speicherintensiven Daten befinden sich auf einer Festplatte auf dem Server. Durch diese Struktur gelingt es, diejenigen Daten, die der User auf meiner Seite braucht und sehen will, schneller bereitzustellen – wieder ein Punktgewinn beim Rennen um die schnellen Ladezeiten.
Google bestimmt, wo es langgeht – und in welchem Tempo
Ganz ehrlich: Manchmal klingt es wie ein Kampf gegen Windmühlen. Und manchmal denke ich: Die da in Mountain View, bei Google, die lachen sich jeden Morgen kaputt über ihren neuesten Coup, klopfen sich auf die Schenkel, weil in der ganzen Welt IT-Spezialisten, SEO-Experten, Programmierer und Seitenbetreiber (Sie und ich) dem Diktat der mächtigsten Suchmaschine der Welt hinterherhecheln, um beim Rennen um die buchstäblich besten Plätze ganz vorne mitzuspielen. Aber ich muss gestehen: Auch ich bin genervt, wenn sich eine Internetseite im Schneckentempo aufbaut, und mir ist es total egal, welche tollen Plugins, Style-Sheets, Quellcodes oder wer weiß was alles noch sich dahinter verbergen. Ich will meine Infos – und zwar schnell, sonst klicke ich woanders hin.
Erreichen auch Sie schnelle Ladezeiten
Um es auf den Punkt zu bringen: Eine komplexe und dynamische Seite wie lambertschuster.de muss sich ebenso schnell aufbauen wie die vom Friseur um die Ecke (wenn er denn eine hat). So einfach ist nun einmal die virtuelle Welt. Nehmen Sie den Wettlauf an und auf! Viele Wege führen zu schnellen Ladezeiten – auch für Ihre Homepage!
(Fotos: © Lambert Schuster)
