Verringert eure Ladezeiten – Diese Tipps verleihen eurer Webseite Speed

Die Geschwindigkeit einer Webseite ist bereits seit 2010 ein anerkanntes Ranking-Kriterium der Google-Suche. Zudem erhält der Besucher durch eine lange Ladezeit einen ersten Eindruck von eurem Unternehmen, ohne überhaupt etwas gesehen zu haben. Dass dieser Eindruck nicht positiv ist, liegt auf der Hand. Gregg Crystall hat auf HubSpot einige Tipps zur Verbesserung des Pagespeeds zusammengestellt, die wir für euch aufbereitet und ergänzt haben.

Um die Thematik greifbar zu machen, wollen wir zunächst abklären, was die Geschwindigkeit einer Webseite negativ beeinflusst. In erster Linie geht es schlicht und einfach um die Größe der Seite. Je mehr der Browser downloaden muss, desto länger dauert die komplette Darstellung der jeweiligen Site.

Der Browser lädt beim Aufruf einer Webseite folgende Bestandteile herunter:

• HTML Code
• CSS Stylesheets
• Skripte, wie zum Beispiel Javascript
• Bilder

Um die Ladezeit einer Webseite zu verringern, müssen die jeweiligen Bausteine lediglich verkleinert werden. So weit so logisch. Wir möchten euch mit den folgenden Tipps einige Handlungsempfehlungen präsentieren, die eurer Webseite Beine machen werden.

Bilder verkleinern

Bilder sind das Herz einer Webseite, zumindest aus Sicht des Nutzers. Homepages, vor allem die von Onlineshops bestehen im oberen Teil fast ausschließlich aus Bildern. Es ist wichtig und sogar einfach, die Dateigröße der Bilder klein zu halten. Dieses „klein halten“ beginnt bereits beim Upload auf den Server. Es ist mehr als ärgerlich, wenn die Bilder lediglich per CSS verkleinert werden, der Browser trotzdem das riesige 5 MB Bild vom Server lädt. Denn genau das tut er.

Es gibt zahlreiche Tools, mit denen man Bilder mit geringen Qualitätsverlusten maßgeblich verkleinern kann. Häufig ist es schon damit getan, die Auflösung proportional anzupassen. Gängige Bildbearbeitungsprogramme besitzen Speicherfunktionen für die Darstellung im Web. In den meisten Fällen ist es kein Problem, Bilder in die Größenordnung von 100 kB zu skalieren.

Aber was kann ich tun, wenn das Kind schon in den Brunnen gefallen ist? Wenn bereits unzählige Riesenbilder auf dem Server liegen? In diesem Fall bietet sich die Verkleinerung per Stapelverarbeitung an. Ladet alle Bilder aus einem Verzeichnis herunter, schraubt die Datei in punkto Qualität und Auflösung runter und überschreibt die auf dem Server vorhandenen Dateien. Das Internet ist voll von Anleitungen, die euch zeigen, wie das geht. Es ist wichtig, die Bilder anschließend im Frontend zu überprüfen und gegebenenfalls manuelle Anpassungen vorzunehmen.

Browser Caching & Kompression

Browser Caching und Kompression sind kleine Kniffe, die viel bewirken können. Ein Online Marketer hat wenig mit der Umsetzung zu tun, sollte aber unbedingt das Potenzial dieser Maßnahmen abklären. Es handelt sich hierbei um Servereinstellungen, beziehungsweise um Einträge in der .htaccess. Das Browser Caching ermöglicht das vorübergehende Beschreiben des Nutzercomputers. Der Browser muss bei einem erneuten Besuch des Computers nicht mehr die komplette Webseite herunterladen und kann sie somit deutlich schneller aufbauen.

Durch Kompression könnt ihr die Größe eurer Webseite deutlich minimieren. Vergleichbar ist diese Methode mit einer Zip-Datei. Der Computer des Nutzers bekommt eine gepackte Version eurer Webseite präsentiert, was sich signifikant auf die herunterzuladende Dateigröße auswirken kann. Allerdings kommt es hier vereinzelt zu Problemen auf den Servern, da diese mehr Leistung benötigen, um die Seiten zu komprimieren, was demnach auch manchmal von Nachteil sein kann.

Letztendlich könnt ihr zu diesem Thema euren Hoster oder euren Webentwickler ansprechen. Die können euch in der Regel sagen, welche Art des Cachings beziehungsweise der Kompression möglich ist und inwiefern ihr es auf eurer Webseite umsetzen könnt.

CSS optimieren

Weiteres Optimierungspotenzial findet ihr in der ausgelagerten CSS-Datei. Als erstes sollte man sich überlegen, ob wirklich alle vorhandenen CSS-Elemente auf der eigenen Seite genutzt werden. Häufig beinhaltet diese Datei zahlreiche Klassen oder IDs, die gar nicht mehr genutzt werden. Zudem beeinträchtigen Leerzeilen die Ladezeit unnötig. Content Management Systeme wie WordPress oder Joomla besitzen keine Funktion zur Minimierung von CSS. Mit dem kostenlosen Tool csscompressor.com könnt ihr die Datei problemlos optimieren.

Darüber hinaus verursachen Inline-Styles auf vielen Webseiten überflüssige Ladezeiten. Gerade in Content Management und Shop-Systemen werden div-Tags und andere HTML Bausteine gerne als Schablonen benutzt und auf zahlreiche Seiten kopiert. Hierin befinden sich häufig Styles, die eigentlich in die ausgelagerte Datei gehören. Das kann zum Beispiel ein Absatz sein, der auf jeder Seite gesondert als Blocksatz formatiert wird. Das ist unnötig und verursacht unter Umständen mehrere Hundert Codeschnipsel, obwohl nur einer notwendig ist.

Javascript gehört nach hinten

Ihr solltet unbedingt darauf achten, wo und wie eure Skripte ausgeführt werden. Idealerweise verweist ihr am Ende des body-Tags auf die externe Javascript-Datei. Durch diese Positionierung ermöglicht ihr es dem Browser, als erstes den Inhalt der Seite herunterzuladen. Werden die Skripte an den Anfang der Seite geschrieben, lädt der Browser diese zuerst und die Inhalte müssen warten. Bei einer Seite mit vielen Funktionen und einer entsprechend hohen Anzahl an Skripten wird der Nutzer auf eine wahre Geduldsprobe gestellt.

Falls ihr Skripte auf eurer Seite verwendet, die unbedingt zuerst geladen werden müssen (wie etwa Analytics oder Tracker, die im Head belassen werden sollten, da die Page Impressions ansonsten nicht gezählt werden), hilft das async– Attribut am Ende des entsprechenden HTML-Tags:

<script type=“text/javascript“ src=“/…/ Javascript.js“ async></script>

Das defer-Attribut hält das Javascript so lange zurück, bis der Inhalt der Seite geladen wurde:

<script type=“text/javascript“ src=“/…/ Javascript.js“ defer></script>

Durch den Einsatz dieser Methode werdet ihr nicht gezwungen, das Javascript an das Ende der Seite zu verbannen. Vielmehr wird euch dadurch die Möglichkeit verliehen, den Seitenaufbau entsprechend eurer Prioritäten zu steuern.