In Zeiten von HighSpeed-Internet und mobilen Endgeräten möchte man nicht lange auf Informationen warten oder unnötig Datenvolumen verbrauchen. Abgesehen davon ist die Ladegeschwindigkeit einer Webseite ein Google Ranking-Faktor. Wir geben 5 Tipps, wie man die eigene Webseite schneller macht. 

Nutzer lesen das Internet nicht wie ein Buch, sondern suchen sich gezielt ihre Informationen. Deshalb sollten diese möglichst schnell und einfach gefunden werden. Da sind einige Sekunden Wartezeit bis zum Aufbau einer Webseite eine gefühlte Ewigkeit und die Absprungraten von langsamen Webseiten entsprechend hoch. Wir haben ein paar der einfachsten Möglichkeiten zusammengetragen, Webseiten zu entschlacken und die Ladegeschwindigkeit zu erhöhen. Wer direktes Feedback haben will, ob seine Seite schneller geworden ist oder wie der aktuelle Status der Seite ist, kann sie auf Google Pagespeed Insights testen.

1. Dateien reduzieren und zusammenlegen

Jede Zeile Code, ob CSS, HTML, PHP oder andere, müssen vom Server und dem Browser des Nutzers verrechnet werden. Je mehr Code, desto länger dauert es, bis eine Webseite für den Nutzer vollständig angezeigt wird. Deshalb ist es wichtig, Dateien möglichst klein und präzise zu halten. Leerzeichen und Absätze, die zwar die Übersichtlichkeit des Codes verbessern, sind der Performance der Seite abträglich.

Eine Webseite lädt schneller, je weniger Anfragen ein Browser an einen Server stellen muss. Für jede eingebundene Datei wird eine Anfrage gestellt. Daher ist es naheliegend, am Ende der Entwicklungsarbeiten gleiche Dateitypen in einer Datei zu vereinen und diese dann zu minimieren. Wichtig ist dabei, dass man nur die Dateien zusammenlegt, die an einer ähnlichen Stelle oder zur selben Zeit auf der Webseite geladen werden sollen. So sollte man z.B. JavaScript-Dateien im Footer der Seite einbinden, damit sie nach dem Rendern der gesamten Seite geladen werden. Das Minimieren kann man mit seinem Code-Editor oder mit einem Online-Tool wie minifycode.com erledigen.

2. Bilder optimieren

Bilder sind die Teile einer Webseite, die die Ladegeschwindigkeit am meisten strapazieren können. Am besten werden sie verlustfrei mit einem Programm komprimiert. Die kostenpflichtigen Programme wie Adobe Photoshop und Affinity Photo (Mac) eignen sich mit ihrer vielseitigen Bildbearbeitung und differenziert einstellbaren Kompression sehr gut für den Webbereich.  Im kostenlosen Segment bieten sich als Alternativen Gimp (Windows & Mac) und Paint.NET (Windows) an. Darüber hinaus gibt es Online-Tools, mit denen man die Dateigröße von Bildern reduzieren kann. Es empfiehlt sich eine Kompression ohne sichtbare Bildfehler.

Kostenpflichtig:
Adobe Photoshop (Windows & Mac)
Affinity Photo (Mac)

Kostenfrei:
Gimp (Windows & Mac)
Paint.net (Windows)
JPEGmini Lite (Mac)

Online:
compressor.io
fotosverkleinern.de

3. Daten serverseitig komprimieren

Ein weiterer Punkt bei der Speed-Optimierung einer Webseite ist die serverseitige Komprimierung von Daten. Unkomprimierte Dateien brauchen länger, um geladen zu werden, wodurch das Nutzer-Erlebnis leidet. gzip oder deflate sind Kompressionsalgorithmen für den Server. Sie komprimieren die Dateien auf dem Server, bevor sie vom Browser des Nutzers geladen werden. Um das zu erreichen, muss die .htaccess Datei auf dem Server dahingehend angepasst werden, dass dieser die Inhalte der Webseite komprimiert an den Browser des Besuchers übergibt. Vorausgesetzt, der Server unterstützt die Komprimierung von Dateien. Für einen Apache-Server funktioniert die Kompression mittels DEFLATE mit folgendem Code:

AddType image/svg+xml .svg

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript image/svg+xml

Die Angabe „AddOutputFilterByType DEFLATE“ gibt an, dass ein gewisser Dateityp mit dem „DEFLATE“ Algorithmus komprimiert werden soll. Die Angabe „text/html“ definiert hier speziell, dass Text im HTML-Format komprimiert werden soll. Diese Angabe kann durch verschiedene Dateitypen ersetzt werden. Im angelegten Fall wurden svg+xml Bilder mit der „AddType“ Angabe als Dateityp hinzugefügt, da dies standardmäßig nicht der Fall ist.

Eine ausführliche englische Anleitung dazu findet sich hier. Für einen IIS-Server gibt es bei Microsoft eine deutsche Anleitung.

4. Skripte in den Footer und asynchron laden lassen

Zunächst sollten sämtliche Skripte in den Footer, damit sie gemäß der DOM-Struktur nach den HTML-Elementen geladen werden. Es gibt aber auch Angaben, um alle Skripte und CSS-Angaben im Header-Bereich zu lassen und trotzdem die Performance nicht zu beeinträchtigen. Durch eine einfache Angabe in der Einbindung lassen sich Skripte, die von anderen Webseiten kommen, asynchron laden. Das bedeutet, die Skripte werden erst geladen, wenn der Rest der Webseite bereits geladen wurde. Denn sollte die Quelle des Skripts lange für eine Antwort brauchen oder ist nicht erreichbar, würde das die Webseite erheblich verlangsamen. Daher kann folgender Code für Skripte benutzt werden, die von anderen Webseiten hinzugeladen werden sollen. Diese Angaben stellen für moderne Browser (IE ab Version 10) kein Problem dar und sollten wie gewünscht ausgeführt werden.

1. Das „async“ – Attribut

<script src="Externe URL zur Datei" async></script>

Die Angabe „async“ lässt externe Skripte gleichzeitig mit der Seite laden, sodass sich die Webseite vollständig aufbauen kann, während das Skript lädt. Wichtig dabei ist die Angabe „async“ (ohne Anführungszeichen) hinter der Pfadangabe des Skripts.

2. Das „defer“ – Attribut

<script src="Externe URL zur Datei" defer></script>

Die Angabe „defer“ lässt Skripte erst ausführen, nachdem die Seite geparst wurde. Damit ist die Seite bereits nutzbar, nur das Skript wird noch hinzugeladen. Das eignet sich eher für Skripte, die nicht sichtbar ausgeführt werden. Skripte, die essenziell für die Nutzerführung sind, empfehlen sich mit „async“ zu laden und/oder in den Footer zu packen.

5. Webhosting-Paket überprüfen und ggf. Provider wechseln

Viele Provider bieten für Beträge unter 10 € pro Monat das klassische Shared-Webhosting. Das bedeutet, dass die eigene Webseite auf einem Server mit sehr vielen anderen Kunden liegt. Je nach Größe des Providers und des gebuchten Pakets können das durchaus ein paar hundert Kunden sein, mit denen man sich einen Server teilt. Das wiederum bedeutet, dass die Leistung des Servers durch alle darauf enthaltenen Webseiten geteilt werden muss. Wenn dann zufällig dreihundert WordPress-Installationen auf diesem Server vorhanden sind, geht das natürlich zu Lasten meiner eigenen Website-Performance.

Die hochpreisigen Shared-Webhosting-Pakete zeichnen sich in der Regel dadurch aus, dass sie einerseits zusätzliche Leistung bieten (mehr E-Mail-Adressen, mehr Speicherplatz, mehr FTP-Zugänge, etc.), aber oft auch eben dadurch, dass sie auf Servern liegen, die deutlich weniger Kunden verwalten müssen, als die aus dem Niedrigpreis-Sektor. Und das mündest zwangsläufig in eine bessere Performance.

Nicht alle Provider weisen darauf hin, wie viele Kunden sie parallel auf einem Server verwalten. Und die Angabe ist natürlich auch nicht immer gleichbedeutend, da nicht jeder Kunde für eine Ressourcen-intensive Webseite steht. Aber es gibt durchaus Hoster, die ihre Paketpreise mit solchen Angaben ergänzen, bzw. lohnt es sich durchaus, beim eigenen Provider anzurufen, das zu erfragen und ggf. ein Upgrade durchzuführen.

Fazit

Nicht erst seitdem Google den PageSpeed offiziell als Rankingfaktor eingeführt hat, ist es wichtig, die Ladegeschwindigkeit der eigenen Webseite zu überprüfen und ggf. zu optimieren. Das Komprimieren von Dateien und Bildern ist dabei der erste Schritt. Das asynchrone Laden von JavaScript-Dateien und die serverseitige Komprimierung erfordern sicher ein wenig mehr als reines Basiswissen. Aber für alles gibt es gute und kostenlose Online-Tools, die einem dabei helfen, die Nutzerfahrung durch Erhöhung des PageSpeeds zu verbessern. Und wenn alles nicht hilft, hilft ja vielleicht der Wechsel zu einem anderen Hoster.