Wer wartet schon gerne? Sei es auf den Bus, auf die Post oder auf das Laden einer Website. Leider gibt es immer noch viele Websites, die einem durch langsames Laden einem die Laune verderben können. Dabei muss das doch nicht sein. Wir zeigen Ihnen in acht Schritten, wie Sie die Ladegeschwindigkeit Ihrer WordPress-Website schnell verbessern und beschleunigen.
Inhalt
Wieso kümmert mich der Speed meiner Website?
Sicher denken sich einige: „Wieso sollte ich mich um so was kümmern? Wie wichtig ist denn schon die Geschwindigkeit? Zwei, drei Sekunden ist doch nicht lange! Wozu also das ‚Need for Speed‘?“ Ganz einfach: Seit 2010 ist die Ladezeit ein anerkanntes Ranking-Kriterium der Google-Suche. Dies alleine sollte schon Grund genug sein, eine Website immer mit Top-Speed anbieten zu wollen. Nach 40-jähriger Recherche kommt der dänische Wissenschaftler Dr. Jakob Nielsen zu der Erkenntnis, dass sich ein Besucher schon nach einer Sekunde Ladezeit Gedanken über die Performance der Website macht. Google geht sogar weiter und findet in einer Studie heraus, dass 53% der Websites verlassen werden, wenn die Ladezeit länger als drei Sekunden dauert.
Auch wie effizient eine schnelle Website ist, macht Google in ihrer Studie deutlich. In dem sie eine Website, die fünf Sekunden mit einer, die 19 Sekunden zum Laden benötigt, verglichen haben, kam der Internet-Riese zu einem Ergebnis, welches (natürlich) für die Website mit fünf Sekunden Ladezeit spricht:
- 60 % bessere Seitenaufrufe
- 70 % längere durchschnittliche Sitzungen
- 35 % niedrigere Absprungrate
- 25 % bessere Sichtbarkeit
Schon mit ein paar einfachen Methoden kann man die Geschwindigkeit der eigenen WordPress Website optimieren. Bereit? Los geht’s!
Die Geschwindigkeit der Website messen
Zu allererst sollten Sie in Erfahrung bringen, in welchem Zustand sich Ihre Website aktuell befindet. Dafür gibt es im Netz viele Tools, die für Sie Ihre Website testen und anschließend einen Analysebericht vorlegen, in dem steht, was alles noch optimiert werden muss. Eine kleine Auswahl solcher Webtools wären:
- Google PageSpeed Insight analysiert die technische Gegebenheiten der Website und bietet Lösungen zur Optimierung an. Das Tool zeigt nicht die Ladezeit an, sondern eine Bewertung von 0 bis 100. Da man an Google wohl oder übel nicht vorbei kommt, ist es gut zu wissen, was Google von der eigenen Website hält. Mit dem Tool können Sie auch testen, ob Ihre Website auch für mobile Geräte optimiert ist.
- Pingdom ermittelt die Geschwindigkeit Ihrer Website von verschiedenen Standorten aus und gibt eine detaillierte Analyse hierzu ab. Es wird zum Beispiel aufgelistet, welche Elemente und Dateien Ihrer Website wie lang zum Laden benötigt. Für Leute, die ihre Website ausführlich optimieren wollen, sind das wichtige Informationen.
- WebPageTest ist das wohl ausgereifteste Webtool. Dementsprechend ist es eventuell auch eher etwas für Profis, die mit all den Fachbegriffen was anfangen können. Unter anderem bietet es das Testen auf verschiedenen Browsern sowie auf mobilen Geräten an.
Verbeißen Sie sich aber nicht darin, unbedingt die 100% in den jeweiligen Webtools erreichen zu wollen, da der Aufwand im Verhältnis zum Ertrag viel zu groß wäre. Wichtig ist vor allem, dass die Website für den Besucher gut optimiert ist, und nicht für die Webtools. Mit einer Bewertung von z.B. 85% können Sie voll und ganz zufrieden sein.
Den richtigen Webhoster wählen
Fangen wir mal von ganz von vorne an. Bevor man eine WordPress-Website aufzieht, sollte man sich Gedanken darüber machen, welchen Webhoster man nutzen will. Webhoster gibt es viele, aber welcher ist optimal für meine Website?
Wer eine schnelle und komfortable WordPress-Website haben will, kommt nicht drumherum, ein paar Taler für einen vernünftigen Webserver auszugeben. Mit Anbietern wie hosteurope.de oder Domain-Factory ist man auf der sicheren Seite. Viele dieser professionellen Anbieter bieten verschiedene Pakete an, u.a. auch einen WordPress-Service. Welches Paket ideal für Sie ist, müssen Sie selbst entscheiden. So ein WordPress-Service macht dann Sinn, wenn man selber absolut keine Ahnung hat, wie man eine WordPress-Website aufzieht. Fühlen Sie sich schon versiert mittels FTP-Zugang Daten zu transportieren und Datenbanken anzulegen, sollten Sie WordPress eigenhändig installieren. Sie werden in der Regel mit mehr Freiheiten beim Aufbau und im Umgang Ihrer Website belohnt.
Wichtig ist: Seien Sie nicht zu geizig, wenn Sie es mit der Geschwindigkeit Ihrer Website ernst meinen! Von kostenlosen Webspace-Anbietern sollten Sie sich gänzlich fernhalten. Auch von diversen Günstig-Angeboten bei großen Webhostern können Sie nicht die schnellste Geschwindigkeit erwarten. Denn man kann durchaus sagen: Je günstiger das Angebot, desto langsamer ist der Server. Achten Sie darauf, dass bei dem Angebot das das Komprimierungsmodul mod_deflate installiert ist und die neuen Standrads PHP 7.x und HTTP/2 unterstützt werden. Auch wenn letzteres bedeutet, dass Sie Ihre Website mit einer SSL-Verschlüsselung schützen müssen. Die Besucher Ihrer Website werden es Ihnen danken.
Bilder optimieren
Bilder sind neben den Texten die wohl wichtigsten Elemente auf einer Internetpräsenz. Durch sie wird eine Website einladend und interessant. Nun kann ein Bild aber vieles sein: ein Grafik-Element wie ein Button, dass Logo der Website, ein Foto oder gar eine Illustration wie ein Diagramm oder ein Comic. Vor allem Foto-, Mode- oder Food-Blogs benutzen viele Bilder, um die Themen in ihren Beiträgen zu präsentieren. Alles schön und gut, doch durch die vielen Bilder saugt man an der Performance der Website. Dagegen gibt es aber Abhilfe!
Erst mal sollte man wissen, welches Bildformat man wofür benutzen sollte. Zur Auswahl haben wir JPG, PNG und SVG.
JPG (JPEG File Interchange Format)
Für Fotografien ist dieses Dateiformat am besten geeignet. Bis zu 16.8 Millionen Farben können dargestellt werden. Am interessantesten jedoch ist, dass eine JPG-Datei die kleinste Dateigröße vorbringt, wenn man die Qualität etwas reduziert. Verringert man beim Speichern der Datei die Qualität auf 82%, dann reduziert sich die Datenmenge auf ca. ein Fünftel. Und das ohne, dass das menschliche Auge es wirklich wahrnimmt. Jedoch ist mit dem JPG-Format kein transparenter Hintergrund möglich. Und man sollte Logos oder Grafiken mit scharfen Kanten nicht im JPG-Format abspeichern. Sie sehen bei Reduzierung der Qualität schnell unscharf aus.
PNG (Portable Network Graphics)
Eine PNG-Datei ist für ein verlustfreies komprimieren geeignet. Auch transparente Hintergründe sind möglich, weswegen das PNG-Formate für Grafiken wie Logos und scharfkantigen Text-Grafiken gut geeignet ist. Für Fotos ist das PNG-Format nicht ideal: PNG-Dateien neigen dazu, im Vergleich zu einer JPG-Datei, eine höhere Dateigröße vorzuweisen.
SVG (Scalable Vector Graphics)
Das SVG-Format ist für Vektorgrafiken konzipiert. Das auf XML basierende Format kann sehr gut für Logos und Icons verwendet werden. Ähnlich wie eine Schrift skaliert die Vektorgrafiken knackscharf in jeder Größe und Bildschirmauflösung. Auch eine SVG-Datei kann man komprimieren, um noch mehr Bytes zu sparen. Da SVG-Dateien theoretisch schadhaften Code enthalten können, erlaubt WordPress das hochladen eigentlich nicht. Das Plug-in Scalable Vector Graphics (SVG) schafft Abhilfe.
Wichtig ist auch, dass Sie die Bilder in den passenden Größen abspeichern. Binden Sie übergroße Bilder ein, müssen unnötig viele Daten beim Aufruf Ihrer Website geladen werden. Binden Sie also Bilder stets nur in den benötigten Maßen ein.
Außerdem können Sie die Ihre Bilddateien zusätzlich komprimieren, um die Dateigröße noch weiter zu verkleinern. Plug-ins wie Imagify, WP Smush.it, EWWW Image Optimizer sind gute Anlaufstellen. PNG oder SVG-Dateien können Sie bedenkenlos komprimieren. Bei JPG sollten Sie wie oben bereits erwähnt etwas vorsichtiger sein. Wenn Sie die Qualität unter 82 % reduzieren, kann es zu Qualitätsverlusten kommen.
Wenn Sie diese drei Grafikformate nach Bedarf richtig einsetzt, sparen Sie sich einiges an Ladezeit.
Technisch einwandfreie Themes benutzen
Dank der starken Verbreitung von WordPress und der unfassbar großen Entwicklergemeinde gibt es ein genauso riesiges Angebot an Designvorlagen – den sog. Themes – für WordPress. Quantität ist aber nicht gleichbedeutend mit Qualität. Sie können sich vorstellen, dass es viele Themes gibt, die unsauber programmiert sind, unnötig vielen Programmcode enthalten oder aus sonstigen Gründen die Geschwindigkeit einer Website belasten können.
Bevor Sie sich für ein neues Theme entscheiden, sollten Sie nicht nur auf das Aussehen achten, sondern mit Hilfe der oben genannten Tools die Ladegeschwindigkeit testen. Und wenn Sie schon dabei sind, überprüfen Sie auch gleich, ob die Programmierer die Webstandards eingehalten haben. Das ist ein untrügerischer Hinweis, ob die Entwickler ihr Handwerk verstehen, oder nicht.
Caching einsetzen
Eine der schnellsten und effektivsten Methoden, den Speed der WordPress-Website zu erhöhen, ist es, ein Caching-Plug-In zu verwenden. Solche Plug-Ins generieren statische HTML-Kopien, die beim Besuch viel schneller geladen werden können. Ohne ein solches Plug-In werden bei Content-Management-Systemen wie WordPress bei jedem Aufruf die Seiten aus Dateien und dem Inhalt der Datenbank „zusammengebaut“.
Viele Caching-Lösungen gehen noch weiter und bieten zum Beispiel auch das unter 6. beschriebene Verkleinern und Zusammenlegen von CSS-, JavaScript- und sogar HTML-Dateien an. In dem Beitrag „Cache und sein Einfluss auf Ihre Website“ haben wir ausführlich die bekanntesten Cache-Plug-Ins beschrieben.
Skripte minimieren und zusammenfassen
WordPress, die Themes und installierten Plug-ins haben alle mehr oder weniger viele CSS- oder JavaScript-Dateien im Schlepptau. Für die Ladegeschwindigkeit ist das nicht ideal, lässt sich aber bei WordPress nicht verhindern. Was man aber machen kann ist, durch Aufräumen, die Code-Dateien so klein wie möglich zu machen und sie zusammenzulegen, um möglichst wenig Dateien laden zu müssen.
Während der Programmierung schreiben die Entwickler für die Übersichtlichkeit nicht selten viele Kommentare in den Programmcode. Zudem entstehen häufig unnötige Leerzeichen zwischen den Befehlen. Mit einem Plug-in wie Better WordPress Minify werden die Dateien auf das Nötigste reduziert und zusammengelegt. So reduzieren Sie die Anzahl der Zugriffe auf den Server und die Datenmengen. Ihre Website wird wieder ein kleines bisschen schneller geladen. Jedoch gilt hier Vorsicht! Es kann durchaus passieren, dass Ihr Theme oder Plug-ins mit dieser Herangehensweise nicht klar kommen. Deswegen sollten Sie vorher ein Back-Up durchführen und hinterher überprüfen, ob Ihre Website noch wie gewünscht aussieht und funktioniert.
Eine Anmerkung noch zu CSS und JavaScript: Die oben genannten Tools zum Messen der Geschwindigkeit merken immer an, Sie mögen „JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten „above the fold“ (ohne Scrollen sichtbar) beseitigen„.
Entspannen Sie sich bei dieser Meldung! Google PageSpeed Insight und Co. sind nicht gezielt für WordPress konzipiert. Die Architektur von WordPress macht es fast unmöglich, hier Abhilfe zu schaffen. Konzentrieren Sie sich auf die anderen hier vorgestellten Schritte, werden Sie sicher auch ohne diese Korrekturen (die wir auch ignorieren) in den grünen Bereich kommen.
Google Fonts bewusst verwenden
Auch die richtige Verwendung von Schriften kann die Geschwindigkeit Ihrer Website optimieren. War man früher auf ein paar Standardschriften reduziert, die auf allen Rechnern installiert waren, so gibt es heute externe Quellen im Internet, über die man vielfältige und vor allem individuellere Schritten einbinden kann. Ein der beliebtesten Quellen ist Google Fonts. Goole bietet mehr als 800 verschiedene Schriften zur Auswahl.
Das Problem? Die Schriften befinden sich auf externen Servern und müssen bei jedem Besuch Ihrer Website geladen werden. Nun kann man davon ausgehen, dass Google keine lahmen Server hat, dennoch entsteht eine längere Wartezeit, je mehr Schriften Sie in Ihrer Website einbinden. Google selbst hilft Ihnen dabei, es nicht zu übertreiben: Bei jeder Font-Übersicht wird Ihnen dargestellt, wie schnell die ausgewählte Schrift lädt. Dementsprechend können Sie Ihre Wunschschrift aussuchen. Versuchen Sie bei maximal zwei Fonts zu bleiben, die Besucher Ihrer Website werden Ihnen danken.
Noch besser ist es übrigens, die eingesetzten Google-Schriften herunterzuladen und auf dem eigenen Webserver zu installieren, auf dem auch das WordPress-Theme liegt. Dadurch erspart man weitere Millisekunden, da das Laden der Schriften von den Google-Servern künftig entfällt.
Plug-Ins intelligent einsetzen
Die Möglichkeit, mit Hilfe von Plug-ins die Funktionalität von WordPress beliebig zu erweitern, ist eines der Hauptgründe, weswegen WordPress so beliebt ist. Es gibt Plug-ins für so ziemlich jede Situation. Aber so toll das theoretisch ist, praktisch sollte man sich mit dem Installieren von Plug-Ins zurückhalten. Je mehr Plug-ins Sie verwenden, desto mehr Skripte und Dateien müssen geladen werden.
Überlegen Sie also stets, ob Sie die Funktion des jeweiligen Plug-ins wirklich benötigt. Können Sie auf eine Funktion nicht verzichten, dann überprüfen Sie, ob es nicht eine schlankere Alternative gibt. Mit dem Plug-in P3 (Plugin Performance Profiler) können Sie die Geschwindigkeit der Erweiterungen messen und sich für die schnellste Lösung entscheiden.
Übrigens: Es versteht sich fast von selbst, dass nicht (mehr) benötigte Plug-ins deaktiviert werden sollten. Im Idealfall deinstallieren Sie sie gleich. Das gilt zum Beispiel auch für den soeben erwähnten „Plugin Performance Profiler“, nachdem er seine Arbeit erledigt hat.
Fazit
Man kann mit recht überschaubaren Aufwand, die WordPress-Website im Sinne Ihrer Besucher und der Suchmaschinen Beine machen. Natürlich gibt es noch so einige weitere Möglichkeit, die Geschwindigkeit Ihrer WordPress-Website zu optimieren. Lazy Loading, CDN (Content Delivery Networks) und „Accelerated Mobile Pages“, kurz AMP, sind nur einige Möglichkeiten, den Speed noch etwas anzukurbeln. Wir haben in diesem Beitrag bewusst nach dem Paretoprinzip gehandelt: Mit möglichst wenig Aufwand, möglichst viel zu erreichen.
Wollen Sie noch mehr herausholen, zählen wir Sie schon zu den erfahreneren Webmastern und Sie werden im Netz noch viele Hinweise zur Beschleunigung finden. Eine hervorragende Quelle ist zum Beispiel der Beitrag 68+ Plugins und Tools, die helfen die WordPress Performance verbessern auf FastWP. Vieles ist aber mit viel Aufwand verbunden. Haben Sie eine kleinere Website, dann sollten die hier vorgestellten Tipps ausreichen. Haben Sie jedoch eine Website mit sehr hohem Traffic, dann lohnt es sich sicher, weiter zu optimieren.
2 Kommentare. Wir freuen uns über Ihren Kommentar
Ich kämpfe immer noch mit meinem Speed, auf meiner Webseite. Danke für eure Tipps, das ein oder andere werde ich wohl umsetzen (müssen). ;-)
Zu Punkt 7: Das Thema Fonts ist wirklich relevant und wird gerne noch als nicht so relevantes Extrathema behandelt. Es sind ja nicht nur die Ladezeiten der einzelnen Fonts, sondern auch – etwa bei einem Theme, das von sich aus viele Google Fonts lädt – eine Frage der Anzahl der http-requests, die man sparen kann. Ansonsten wie immer ein sehr guter und auc hilfreicher Überblick.