Warum die Ladezeit so wichtig ist

Die Ladezeit einer Webseite wird ein immer wichtigeres Kriterium hinsichtlich der Suchmaschinenoptimierung im Speziellen – aber auch in Bezug auf die Usability im Allgemeinen. Webmaster und SEOs arbeiten üblicher Weise an einem Desktop-PC oder Laptop, der in einem Büro mit schnellem Internetzugang steht.

Mann wartet darauf bis seine Webseite lädt

Weder die Arbeitsleistung des Rechners, noch die Datenübertragungsrate stellen hier eine Bremse für einen rasanten Seitenaufbau ohne nennenswerte Wartezeiten dar. Dieser vermeidliche Vorteil sorgt leider noch immer und häufig dafür, dass eine Internetseite nicht ausreichend auf ihre Ladezeit unter anderen Bedingungen analysiert und optimiert wird. Da man gar nicht oft genug wiederholen kann, dass der “Pagespeed” – also die Ladezeit der Website – ein signifikanter Ranking-Faktor für Google und andere Suchmaschinen ist, möchten wir nachfolgend ein paar Tipps und Tricks verraten, mit denen Sie Ihre Homepage beschleunigen können und somit auch die Chance auf bessere Positionen in den Suchergebnissen von Google und Co. erhalten.

Betrachtet man eine Webseite aus professioneller Sicht, handelt es sich letztlich um einen Zusammenschluss aus verschiedenen Elementen und Modulen. Wir haben eine Vielzahl an visuellen Medien (z.B. Texte, Fonts, Grafiken und Videos), die dem Seitenbesucher beim Betrachten unserer Homepage angezeigt werden. Hinzu kommt in der Regel ein gewaltiges Arsenal an Skripten, Code und Formatierungen, das bei den meisten Webseiten mehr Datenvolumen und Rechenleistung beansprucht als die visuellen Medien und Elemente. Spricht man von der Optimierung des Pagespeeds, spricht man somit von der Optimierung der einzelnen Website-Elemente.

Warum überhaupt die Ladezeit optimieren?

Google möchte den Nutzern Qualität und Komfort bieten und spricht daher selbst in vielen Artikeln und Publikationen von der “positiven Nutzererfahrung” oder dem “positiven Nutzererlebnis”. Nutzt man Google als Suchmaschine um eine Information, ein Produkt oder eine Dienstleistung zu recherchieren, erwartet man nicht nur passende und relevante Ergebnisse in den Serps, sondern möchte diese auch möglichst schnell zu Gesicht bekommen, nachdem man einen Link bzw. ein Suchergebnis angeklickt hat. Wie eingangs bereits angerissen, hängt die Ladezeit einer Webseite nicht nur von der Leistungsstärke des verwendenten Endgerätes und der verfügbaren Internet-Bandbreite ab.

Auch eine nicht-optimierte Homepage kann hier schnell zum sprichwörtlichen Flaschenhals mutieren und den Seitenaufbau unnötig verzögern. Da der durchschnittliche Internetuser nicht bereit ist eine exorbitant hohe Wartezeit in Kauf zu nehmen, um an eine Information zu gelangen, tendiert dieser eher zum vorzeitigen Verlassen der Webseite und trägt so zu einer Erhöhung der Absprungrate (Bouncerate) bei. Google ist sich der dadurch entstehenden Frustration durchaus bewusst und wertet Webseiten, denen keine oder nur unzureichende Optimierungen in puncto Pagespeed unterzogen wurden, ab. So ist es durchaus realistisch, dass selbst qualitativ hochwertiger Content kein Garant mehr für Top-Positionen in der Google-Suche darstellt und nicht selten von Mitbewerberseiten übertrumpft wird. Die Aussage “Content ist King” ist somit nicht nur in die Jahre gekommen, sondern muss heute immer auch mit Phrasen wie “wenn auch der Pagespeed stimmt” oder “wenn ganzheitliches SEO betrieben wurde” ergänzt werden.

Nachdem wir nun die Notwendigkeit der SEO-Maßnahme “Pagespeed” kurz erörtert haben, können wir uns den einzelnen Schritten widmen, die die Ladezeiten Ihrer Webseite reduzieren und Ihren Google-Rankings im besten Fall in die Top-Positionen befördern.

1. Pagespeed durch Bilder-Optimierung erhöhen

Egal ob Kamera vom Smartphone, Digicam oder professionelle Spiegelreflex: Die Auflösung und die Pixeldichte bei digitalen Fotoapparaten steigt kontinuierlich. Was Fotografen und Hobbyknipser erfreut, ist hinsichtlich des Pagespeed – gelinde formuliert – bescheiden. Hochauflösende Fotos kommen schnell auf ein Datenvolumen von mehreren Megabyte und haben somit auf einer optimierten Internetseite rein gar nichts verloren! Die Rechnung dabei ist denkbar einfach. Ein 5 MB großes Fotos benötigt selbst bei einer 16000er VDSL-Leitung mehr als drei Sekunden zum Laden.

Menschen, die in ländlichen Regionen leben, können sich während des Ladevorgangs getrost einen Kaffee kochen und diesen vermutlich sogar noch in aller Ruhe trinken. Es ist daher elementar wichtig, dass Fotos und Grafiken optimiert bzw. komprimiert werden, bevor sie in einer Webseite zum Einsatz kommen. Man ist daher immer gut beraten, wenn man sich zumindest rudimentär mit der Nutzung von Bildbearbeitungs-Software auskennt.

Zudem sollte eine Webseiten-Grafik nur in der Abmessungs-Größe auf dem Webserver liegen, in der sie auch dem Seitenbesucher angezeigt wird:

[HTML-CODE]
<style>
#container {
width: 90%;
max-width: 800px;
min-width: 300px;
margin: 0 auto;
}
#container img {
display: block;
margin: 0 auto;
max-width: 100%;
}
<div id="container">
<img src="pfad/zum/foto.jpg" alt="" title="" />
</div>
[ENDE-HTML-CODE]

Oben gezeigtes HTML/CSS-Konstrukt zeigt, dass das anzuzeigende Foto niemals mit einer höheren Breite (width) als 800 Pixel ausgegeben wird. In diesem Fall macht es also wenig Sinn das gewünschte Foto in einer größeren Abmessung auf dem Webserver zu hinterlegen, auch wenn dies natürlich problemlos möglich wäre. Eine größere Grafik-Abmessung bedeutet in der Regel ein höheres Datenvolumen und die Ladezeit der gesamten Webseite würde sich erhöhen – obwohl absolut nicht benötigt.

2. Unnötige Skripte und Dateien vermeiden

Insbesondere Webseiten, die mit Content-Management-Systemen (CMS) wie WordPress, Typo3 oder Joomla erstellt wurden, leiden häufig unter der Problematik, dass beim Seitenaufruf ein ganzes Arsenal
an Skripten und Funktionen geladen wird, von denen effektiv nur ein Bruchteil benötigt wird, um die Homepage korrekt und vor allem schnell anzuzeigen. Hintergrund für diese Problematik ist in der Regel nicht das verwendete CMS sebst, sondern Themes und Plugins, die primär für die Bereitstellung von professionellen Website-Funktionen und moderenen Layouts verantwortlich sind. Diese Themes und Plugins haben den Anspruch eine möglichst hohe Anwendungspalette abzudecken und für jeden individuellen Anspruch eine entsprechende Lösung anzubieten – bevozugt “out of the box”.

Grundsätzlich sind Plugins mit üppigem Funktionsumfang natürlich eine gute Sache. Hinsichtlich des Pagespeed sind es jedoch nicht selten die überladenen Themes und Plugins, die den sprichwörtlichen Flaschenhals bilden. Immerhin werden Unmengen an Javascript (JS) und oft auch CSS geladen, um mächtige Funktionen und visuelle Effekte bereitzustellen. Das Credo hier: “Diese Funktion könnte benötigt werden, daher erfüllen wir die Voraussetzungen”. Als konkreten Handlungsvorschlag sollten Sie jede einzelne Javascript- und jede einzelne CSS-Datei genauer unter die Lupe nehmen. Sollten Sie feststellen, dass die bereitgestellte Funktion in Ihrem Webprojekt überhaupt nicht benötig wird, deaktivieren Sie die Datei oder das komplette Plugin. Hierdurch können sich Ihre Pagespeed-Werte signifikant verbessern, was sich wiederum sehr positiv auf Ihre Rankings bei Google und Co. auswirken kann.

3. Datenmenge reduzieren (Minimize)

Wir haben oben bereits über die Reduktion des Datenvolumens bei Bildern und Grafiken gesprochen. Ein Reduktionsverfahren kann und sollte auch bei anderen Dateitypen zur Anwendung kommen, vor allem bei JS- und CSS-Ressourcen.<br/>
Ein großer Unterschied zwischen Mensch und Maschine ist der, dass der Mensch Zeichen, Wörter und ganze Texte nur dann schnell und logisch verarbeiten kann, wenn sie ihm in einer klaren Struktur und Formatierung vorliegen.

Wir lesen bevorzugt von oben nach unten, von links nach rechts und empfinden es als angenehm, wenn ein Text durch hervorgehobene Überschriften, Zeilenumbrüche und Absätze sauber gegliedert ist. Was viele nicht wissen: Genau diese Gliederungen und Formatierungen erhöhen das Datenvolumen eines Textdokuments mitunter erheblich. Jede “Sonderformatierung” – von der Fettschrift, über den Zeilenumbruch bis hin zur Textfarbe – muss der Maschine bzw. der darstellenden Software explizit in Form von Zusatzinformationen “erklärt” werden.

Diese Zusatzinformationen sind für den Endanwedner (in unserem Fall den Seitenbesucher) zwar visuell nicht sichtbar, dennoch sind sie vorhanden und verschlingen so das ein oder andere Byte an Datenvolumen. Zum Glück sind Maschinen weniger anspruchsvoll. Ihnen ist in der Regel völlig egal, ob ein Text in roter oder blauer Schrift dargestellt wird oder ob er Zeilenumbrüche enthält. Möchte man nun den Pagespeed der eigenen Webseite optimieren, sollte man sich die Anspruchslosigkeit der Maschine zu Nutze machen und sämtliche Textdateien (JS, CSS, PHP, HTML) von besagten Zusatzinformationen befreien. Sehen wir uns folgende exemplarische CSS-Datei an:

[CSS-CODE]
h1 {
font-size: 150%;
font-weight: bold;
color: blue;
line-height: 1.5em;
font-family: 'Arial', sans-serif;
}

p {
font-weight: bold;
color: #000;
line-height: 1.5em;
font-family: ‘Arial’, sans-serif;
}
[ENDE CSS-CODE]

Wir sehen hier die benötigten Formatierungen für eine Überschrift (h1) sowie für einen Absatz (p). Das geschulte Auge sieht hier sehr schnell, dass sich die Formatierung für beide Elemente weitestgehend gleicht, lediglich die Schriftgröße (font-size) und die Schriftfarbe (color) unterscheiden sich zwischen Überschrift und Absatz. Wir erkennen diese Tatsache schnell, da die CSS-Datei für das menschliche Auge optimiert ist. Die Informationen erstrecken sich über 14 Zeilen und wurden mit Hilfe von Zeilenumbrüchen und Leerzeichen sauber strukturiert. Ihr Webbrowser (die Maschine) benötigt diese ganzen Fomatierungen jedoch überhaupt nicht. Folgender Einzeiler reicht völlig aus, um das selbe Ergebnis zu erzielen:

[CSS-CODE]
h1,p{font-weight:bold;line-height:1.5em;font-family:'Arial',sans-serif}h1{font-size:150%;color:blue}
[ENDE CSS-CODE]

Bedenken Sie, dass dies nur ein primitives kurzes Beispiel ist. Für gewöhnlich haben CSS-Dateien mehrere Hundert oder gar mehrere Tausend Zeilen. Das Einsparpotential ist somit nicht zu verachten und sollte dringend berücksichtigt werden, wenn man den Pagespeed seiner Seite optimieren möchte und somit auch im Bereich SEO effektiv punkten möchte.

4. Browser-Caching aktivieren

Lassen Sie uns diesen Punkt mit einem konkreten Beispiel beginnen. Stelle Sie sich vor Sie haben ein neues Produkt auf den Markt gebracht und widmen diesem natürlich eine eigene Unterseite im Rahmen Ihrer Webseite. Um das Produkt optimal zu präsentieren verwenden sie einige hochauflösende Produktfotos und zeigen diese in einem animierten Foto-Karussell an (auch als Image-Slider bekannt). Ruft ein Seitenbesucher nun Ihre Unterseite auf, passiert letzlich folgendes:

  • Der Webbrowser des Besuchers ruft die Produktfotos von Ihrem Webserver ab
  • Der Webbrowser des Besuchers ruft die JS- und ggf. CSS-Dateien von Ihrem Webserver ab, die ihm sagen, dass die Fotos in einem Karussell angezeigt werden sollen, wie das Karussell auszusehen hat und welche Funktionen das Karussell bieten soll (z.B. automatischer Bilderwechsel nach jeweils 5 Sekunden)

Hier wird klar: Es werden eine Menge an Daten und Informationen übertragen, die, je nach verfügbarer Internetgeschwindigkeit, den Seitenaufbau verzögern können. Wenn Sie die oben aufgeführten Punkte 1-3 beherzigt und umgesetzt haben, sollte der Seitenaufbau schon einigermaßen zügig vonstatten gehen. Es existiert jedoch noch ein weiterer wichtiger Punkt, den Sie bei der Optimierung Ihrer Webseite berücksichtigen sollten: Die Aktivierung des Browser-Cachings.

Bleiben wir beim Beispiel mit dem Foto-Karussell, das Ihr neues Produkt präsentiert. Ihrem Seitenbesucher gefällt das Produkt und er spielt mit dem Gedanken dieses zu kaufen. Er ruft Ihre Produktseite demzufolge erneut auf und bekommt diese – sofern das Browser-Caching ordnungsgemäß und korrekt aktiviert wurde – sofort und rasendschnell angezeigt. Hintergrund ist der, dass der Webbrowser des potentiellen Kunden beim Erstbesuch angewiesen wurde nicht nur die Produktfotos und Skripte von Ihrem Webserver zu laden, sondern diese auch lokal – also auf dem Computer des Besuchers – zu speichern.

Ab sofort werden die Daten also nicht mehr über das Internet übertragen, sondern direkt von der Festplatte des Besuchers gelesen. Dieser Prozess geht natürlich deutluch schneller als die Übertragung via Internet, hängt somit nicht von der Internet-Bandbreite ab und stärkt so natürlich die Usability auf Kundenseite.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Ich akzeptiere