Die Ladezeit ist ein immer wichtiger werdender Faktor. Nicht nur im Bezug auf die Nutzerfreundlichkeit der Seite. Auch in Zeiten wo Googles Algorithmus darüber entscheidet, welche Seite viel Traffic bekommt und welche wenig, ist es wichtig zu erkennen, dass die Performance einer Webseite unmittelbar Auswirkungen auf das Ranking in Suchmaschinen hat. Nicht nur aufgrund der schnellen Ladezeit, sondern auch aufgrund der dadurch resultierenden besseren Benutzerstatistiken. Wir stellen hier nun einige effektive Maßnahmen vor, wie die eigene Webseite optimiert werden kann.
1. Caching aktivieren
Caching ist ein Begriff der oft im Bezug auf Webbrowser und Webseiten verwendet wird. Bei diesem Vorgang gibt die Webseite dem Webbrowser quasi die Anforderung gewisse Dateien zwischenzuspeichern, sodass sie bei mehrmaligem Aufrufen der Seite schon geladen sind und nicht erneut vom Server geholt werden müssen. Dies spart sogenannte HTTP-Anfragen und verringert die Ladezeit maßgeblich. Für WordPress ist dies sehr einfach umzusetzen mit Plugins wie WP Super Cache oder WP Fastest Cache. Alternativ kann über die .htaccess Datei im Root Verzeichnis der Webseite über Code die gleiche Anweisung gegeben werden. Wir haben hier eine TXT Datei zum herunterladen mit dem erforderlichen Code erstellt. Dieser muss einfach in die .htaccess Datei eingefügt werden und schon sollte das Browser Caching aktiviert sein.
2. HTTP Anfragen reduzieren
Dies ist einer der wichtigsten und meist unterschätzten Punkte wenn es um Ladezeiten geht. Schon allein ein Bild vom Server zu laden generiert eine HTTP Anfrage und braucht Zeit. Externe http Anfragen, welche Dateien von anderen Servern laden müssen benötigen in der Regel immer mehr Zeit als Anfragen vom gleichen Webserver. Daher sollte sich zu Beginn auf die Reduzierung der externen Anfragen konzentriert werden. Sehr einfach zu erreichen ist dies mit dem WordPress Plugin Autoptimize. Es fasst automatisch alle Javascript und CSS Dateien zusammen und minimiert diese. Da bei WordPress diese Dateien oft unterschiedlich von Theme zu Theme eingebunden werden können wir hier keine Universallösung anbieten. Allerdings sollten Anfragen zu Google Fonts, externen Javascript Bibliotheken oder anderen Frameworks aufs Minimum reduziert werden. Google Fonts lassen sich zum Beispiel exzellent lokal einbinden und dadurch eine Anfrage sparen. Dies gilt natürlich auch für Icon Fonts wie fontawesome.
3. Bilder optimieren und reduzieren
Bilder sind oft die Dateien, welche am meisten Ressourcen verbrauchen. Teilweise sind Bilder bis 500Kb schon sehr groß für Webseiten und sollten nicht allzu häufig eingesetzt werden. Tinypng.com ist eine gute Webseite um Bilder jeglicher Art zu komprimieren und dabei trotzdem die Qualität zu bewahren. Wer etwas fortgeschrittener ist sollte sich in Base64 Encoding einlesen: Durch diese „Verschlüsselung“ kann dem Browser aus einem langen Code aus Zahlen und Buchstaben gesagt werden, wie er das Bild darzustellen hat und so die Anfrage an das Bild komplett gespart werden. Auf den ersten Blick wirken 60 Zeilen lange Zeichenketten zwar wie viel mehr Code, aber für den Browser machen diese Zeilen nur einen ganz minimalen Unterschied. Im direkten Vergleich ist Base64 Encoding immer die bessere Alternative. Hierbei wird im HTML src Attribut des Images anstatt dem Pfad dann einfach die Encodete Zeichenkette eingefügt. Eine weitere Möglichkeit ist es kleine Bilder als SVG direkt ins HTML einzubinden oder in ein großes Bild zusammenzufügen und per CSS als Hintergrundbild einzubauen. Beide Alternativen sparen auch wieder eine HTTP Anfrage und verhelfen zu einer insgesamt schnelleren Seite.
Bei den Optimierungen wird man am Anfang leider nicht viel selbst spüren, daher sollten Ladezeiten Tools wie das von Google, Pingdom oder GTMetrix verwendet werden um in regelmäßigen Abständen zu überprüfen ob die Maßnahmen funktioniert haben. Nichtsdestotrotz sollte die Optimierung einer Webseite nicht auf die leichte Schulter genommen werden und wirklich professionelle Optimierung gehört zu einer Webseite ebenso dazu wie professionelle Bilder und Texte.
Neueste Kommentare