Schnelle Webseiten-Ladezeiten erfreuen nicht nur Ihre Besucher, sondern auch Google hat die Ladegeschwindigkeit einer Webseite im Jahr 2015 offiziell zu einem bedeutenden Rankingfaktor erklärt. So reduziert ein schneller PageSpeed die Abbruchraten Ihrer Nutzer, erhöht die Verweildauer und schafft insgesamt ein positiveres Nutzererlebnis – was letztendlich zu mehr Conversions führt. Wir zeigen Ihnen in diesem Artikel, wie Sie Ihr WordPress schneller machen und so die Website Performance optimieren können.
Wie können Sie Ihre Website Performance testen?
Bevor Sie WordPress schneller machen, müssen Sie zunächst wissen, welche Werte Ihre Website aktuell erzielt. Hierfür gibt es viele kostenlose Tools, beispielsweise das beliebte Google PageSpeed Insights. Tragen Sie einfach Ihre URL in das dafür vorgesehene Feld ein, klicken Sie auf „Analysieren“ und schon erhalten Sie die Ladegeschwindigkeit Ihrer Website. Das Tool testet dabei neben der Desktop-Ladezeit auch die Performance auf mobilen Endgeräten wie Smartphones oder Tablets. Liegen Ihre Werte hier unter 80 Punkten, ist es an der Zeit, dass Sie Ihr WordPress schneller machen. Das Tool zeigt außerdem mögliche Optimierungen an, mit welchen Sie Ihre Website Performance optimieren können.
Welche Ladezeiten tolerieren User?
Studien zufolge verlassen 40% der Besucher Ihre Webseite, wenn sie länger als drei Sekunden warten müssen. In der folgenden Grafik können Sie sehr gut erkennen, wie die Absprünge exponentiell ansteigen.
Idealerweise liegt die Ladezeit Ihrer Webseite bei maximal einer Sekunde. Mithilfe der nachfolgenden Punkte können Sie Ihr WordPress schneller machen.
1. Sie können Ihr WordPress schneller machen, indem Sie Bilder optimieren
Bilder zählen zu den Elementen, die den größten Teil einer Webseite ausmachen. Stellen Sie sich vor, Sie waren extra beim Fotografen, der Ihnen tolle Bilder für Ihre neue Webseite geschossen hat. Bei Übergabe der Fotos ist jedes dieser Bilder 3MB groß. Sie laden jetzt 10 dieser Bilder in eine Bildergalerie auf der Startseite. Schon allein um diese Bildergalerie darzustellen muss jeder Nutzer nun 30MB Bild-Dateien herunterladen. Spätestens, wenn Nutzer Ihre Webseite über ein Smartphone aufrufen möchten, werden diese frustriert nach wenigen Sekunden Ihre Webseite wieder verlassen. Achten Sie darauf, dass Sie Ihre Bilder also VOR (!!) dem Hochladen auf Ihre Webseite komprimieren. Dazu brauchen Sie nicht unbedingt Photoshop – ein gutes, kostenloses Tool ist beispielsweise Fotosizer. Laden Sie Ihre gesamten Fotos einfach in das Programm und verkleinern Sie diese auf die wirklich benötigte Größe. Achten Sie darauf, dass Sie Bilder nicht so sehr verkleinern, dass diese verpixelt dargestellt werden.
Für WordPress Nutzer empfehle ich das kostenlose Plugin WP Smush. Es eignet sich hervorragend, wenn Sie Ihr WordPress schneller machen möchten. In der kostenlosen Version können Sie jeweils 50 Bilder automatisch komprimieren lassen. Alternativ erscheint neben jedem hochgeladenen Bild in der Mediathek der Button „Smush Now!“. Klicken Sie darauf und das Tool komprimiert das Bild automatisch auf die optimale Größe.
Allein durch die Optimierung von Bildern können Ladezeiten oftmals um ein Vielfaches verbessert werden!
Smush Image Compression and Optimization
2. WordPress schneller machen, indem Bilder nachgeladen werden
Durch das sogenannte „Lazy Load“ werden Bilder einer Website erst dann geladen, wenn der Nutzer beim Scrollen den entsprechenden Bildbereich erreicht. Dies macht gerade dann Sinn, wenn auf Ihrer Website viele Bilder zum Einsatz kommen, beispielsweise weil sie als Fotograf Ihren Besuchern Ihr Portfolio präsentieren möchten. Mit WordPress lässt sich Lazy Load ganz einfach über das kostenlose Plugin „Crazy Lazy“ integrieren.
Crazy Lazy
3. Website Performance optimieren mit dem Einsatz von Browser-Caching
Als Browser-Cache wird eine Art Zwischenspeicher für Webseiten bezeichnet. Wenn Sie eine Webseite zum ersten Mal besuchen, speichert der Browser z.B. Bilder lokal auf einem entsprechenden Ordner auf Ihrer Festplatte ab. Besuchen Sie die Internetseite zu einem späteren Zeitpunkt erneut, dann braucht der Browser nicht mehr alle Inhalte nochmal laden, sondern kann auf bereits vorhandene aus dem Cache zurückgreifen und somit WordPress schneller machen.
Um den Browser-Cache für Ihre Webseite zu aktivieren, benötigen Sie Zugriff auf die .htaccess Datei Ihrer Webseite. Diese befindet sich im Root-Verzeichnis auf dem FTP-Server Ihrer Webseite. Tragen Sie in die .htaccess folgenden Code ein:
## EXPIRES CACHING ##
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 2 days”
## EXPIRES CACHING ##
Es ist wichtig, dass Sie den Dateien ein Ablaufdatum zuweisen – in unserem Beispiel ist das beispielsweise ein Monat oder ein Jahr. Der Cache funktioniert nämlich nur dann korrekt, wenn der Browser weiß, wie lange er die Dateien speichern darf. Da z.B. HTML-Dateien im Vergleich zu Bild-Dateien (jpg, png etc.) tendenziell öfter verändert werden müssen, können Sie für unterschiedliche Dateitypen auch unterschiedliche Ablaufdaten definieren.
WordPress bietet zahlreiche kostenlose Plugins für Browser-Caching
Falls Sie ein CMS wie WordPress benutzen, können Sie einfach ein Plugin installieren, welches das Browser-Cache automatisch aktiviert – manuelle Änderungen in der .htaccess sind hier dann nicht nötig. Empfehlen kann ich an dieser Stelle das kostenlose Plugin „WP Fastest Cache“.
Auch wenn es von anderen Webdesignern gerne empfohlen wird, rate ich von dem Plugin W3 Total Cache ab. Fast jeder, mit dem ich über das Plugin sprach, hatte mit zahlreichen Fehlermeldungen zu kämpfen, die durch das Plugin verursacht wurden. Auch die Deinstallation des Plugins gestaltet sich vor allem für Laien teilweise sehr kompliziert.
WP Fastest Cache
4. CSS und JavaScript minimieren und auslagern
Ohne CSS und JavaScript würden Webseiten wohl ziemlich langweilig und farblos wirken. Viele Animationen benötigen beispielsweise JavaScript, während Farben, Abstände und sonstige Style-Elemente über CSS definiert werden. Dies geschieht bestenfalls über externe .css oder .js Dateien. Damit Ihr HTML-Dokument überhaupt weiß, dass solche Dateien existieren, müssen Sie diese entsprechend einbinden. Bei großen Webseiten kommt es oftmals vor, dass mehrere CSS oder JavaScript-Dateien eingebunden werden müssen. Das Problem: ein Browser interpretiert Ihr HTML-Dokument Zeile für Zeile. Begegnet er im Kopfbereich – d.h. vor dem eigentlichen Inhalt Ihrer Webseite – einer Reihe von CSS oder JavaScript-Dateien, die er einbinden muss, lädt er zunächst jede einzelne dieser Dateien in Ihr Dokument, was die Darstellung der Inhalte auf Ihrer Webseite verzögern kann. Besser ist es, alle .css Dateien in einer einzigen CSS-Datei zusammen zu fassen, genauso auch bei JavaScript-Dateien. Dies im Nachhinein zu optimieren ist mit enormen Aufwand verbunden, weswegen bereits bei der Erstellung der Webseite darauf geachtet werden sollte.
Manchmal lagern Webmaster CSS oder JavaScript Dateien erst gar nicht aus, sondern schreiben diese direkt in das HTML-Dokument. Auch hier entsteht das Problem, dass vor der Darstellung des eigentlichen Inhalts zunächst der ganze Code geladen wird, was ebenfalls zu längeren Ladezeiten führen kann.
Vermeiden Sie zu viele Plugins, wenn Sie WordPress schneller machen wollen
Falls Sie WordPress nutzen, verzichten Sie auf alle unnötigen Plugins. Denn für jedes Plugin muss der Browser teilweise eine Menge JavaScript-Dateien einbinden. Je mehr Plugins, desto mehr JavaScript-Dateien. Wenn Sie Ihr WordPress schneller machen wollen, deaktivieren Sie nacheinander Ihre Plugins und prüfen Sie nach jeder einzelnen Deaktivierung, ob eines Ihrer eingesetzten Plugins die Ladezeit beeinträchtigt. Bemerken Sie bei einem, dass die Ladezeit sich verbessert hat, müssen Sie abwägen, ob Sie die Nutzung des Plugins einer schnelleren Ladezeit vorziehen möchten.
Zu den größten Ladezeit-Killern gehören zum Beispiel:
- ◾ Social-Media-Plugins (Twitter- oder Instagram-Feed, Facebook-Like-Box, Share-Buttons ohne Caching etc.)
- ◾ Page-Builder (z. B. Visual Composer)
- ◾ Broken Link Checker (nach Benutzung deaktivieren)
- ◾ Google Maps
- ◾ Kommentar-Plugins
- ◾ Kontaktformulare
- ◾ Foren-Plugins (Simple:Press, bbPress etc)
- ◾ Woocommerce und andere E-Commerce-Plugins
5. Zauberwort „Minify“: Code von Leerzeichen und Umbrüchen befreien
Unnötige Leerzeichen, Einzüge oder Umbrüche sorgen für zusätzliche Bytes. Werden diese entfernt, können die nun verkürzten HTML, CSS und JavaScript-Codes schneller geladen, geparst und ausgeführt werden. Außerdem kann für CSS- und JavaScript-Code die Dateigröße durch das Umbennen von Variablen verringert werden, sofern der HTML-Code so aktualisiert wird, dass die Selektoren weiterhin funktionieren.
Auch hier gilt: eine Optimierung im Nachhinein ist sehr aufwändig. Deswegen sollte bereits bei der Erstellung der Webseite darauf geachtet werden.
Für Nutzer, die Ihr WordPress schneller machen möchten, gibt es eine Reihe von Plugins, die eine Reduzierung von Codes versprechen. Nicht immer ist das Ergebnis allerdings optimal. Am besten hat mir das kostenlose Plugin „Better WordPress Minify“ gefallen. Aber auch Autopimize eignet sich hervorragend, wenn Sie Ihr Dateien komprimieren möchten. Probieren Sie es aus und testen Sie, ob Ihre Webseite nach Aktivierung des Plugins einwandfrei funktioniert. Ist dies nicht der Fall, deinstallieren Sie das Plugin einfach wieder.
6. JavaScript erst am Ende laden
Das HTML-Dokument Ihrer Webseite wird vom Browser Zeile für Zeile interpretiert. Verwendet eine Webseite JavaScript, befindet sich dieses Script für gewöhnlich in einer externen JavaScript-Datei (Endung: .js) und muss erst in das HTML-Dokument geladen werden. Oftmals verknüpfen Webmaster solche JavaScript-Dateien bereits im Head-Bereich Ihrer Webseite – d.h. vor dem eigentlichen Inhalt, der auf der Webseite dargestellt werden soll. Das Problem: der Browser arbeitet nun also beim Laden einer Webseite zuerst den Kopfbereich ab. Begegnet er dort einer Verknüpfung mit einer externen .js-Datei, lädt er zunächst diese komplette Datei, was die Darstellung des eigentlichen Contents verzögert. Um das Herunterladen anderer Elemente nicht zu blockieren ist es demnach besser, JavaScript-Dateien erst am Ende eines HTML-Dokuments zu laden.
Für diejenigen, die ihr WordPress schneller machen, erledigt das kostenlose Plugin Autoptimize dies automatisch.
Autoptimize
7. Benutzen Sie ein schlankes Theme, wenn Sie WordPress schneller machen möchten
WordPress Themes wie Enfold, Flatsome, Avada etc. sind nicht zuletzt deshalb so beliebt, weil sie standardmäßig viele Einstellungsmöglichkeiten, vorgefertige Demos und Extra-Funktionen bieten. Diese ganzen Features vereinfachen zwar erheblich die Gestaltung einer Website, wirken sich allerdings sehr negativ auf die Website Performance aus. Selbst wenn Sie gewisse Einstellungen überhaupt nicht verwenden, werden diese dennoch geladen und ziehen somit die Ladezeit in den Keller.
Oftmals empfehlen umfangreiche Themes auch die Installation vieler mitgelieferter Plugins. Häufig ist deren Installlation jedoch überflüssig. Verzichten Sie deswegen auf die Installation von Plugins, die Sie ohnehin nicht verwenden.
Tipp: Steht bei den Plugins das Wort „Recquired“ handelt es sich um Plugins, welche für die optimale Darstellung des Themes zwingend installiert werden müssen. Bei „Recommended“ hingegen handelt es sich nur um Empfehlungen, die jedoch nicht die Funktionsweise des Themes beeinträchtigen, falls sie nicht installiert werden.
Bevor Sie sich für ein Theme entscheiden schauen Sie sich genau an, welche Funktionen das Theme mitliefert und überlegen Sie gründlich, ob Sie das alles wirklich benötigen oder ob Sie auch mit einem schlankeren Theme bestens bedient sind. Auch schlanke Themes können im Nachhinein noch durch zahlreiche Plugins erweitert werden, falls Sie später doch noch besondere Funktionen integrieren möchten.
8. Stellen Sie Ihren Server auf PHP 7 um, wenn Sie WordPress schneller machen wollen
Die Umstellung des Website-Servers von PHP 5 auf PHP 7 kann unter Umständen für eine doppelt so schnelle Website Performance sorgen! Diese Maßnahme eignet sich demnach hervorragend, wenn Sie WordPress schneller machen möchten! Nicht umsonst wird PHP mittlerweile auch in den offizielen Hostin-Anforderungen empfohlen. Die Umstellung Ihrer PHP-Versionkönnen Sie in der Regel bei den Einstellungen Ihres Webhosters vornehmen.
Fazit:
Leidet Ihre Webseite unter zu langen Ladezeiten, liegt dies meistens an zu großen Bild-Dateien. Legen Sie Ihren Fokus also hauptsächlich auf die Optimierung Ihrer Bilder.
Wie Ihre Webseite mobil und auf Desktop-Geräten in Sachen Ladezeit abschneidet, können Sie kostenlos über PageSpeed Insights testen. Idealerweise sollten die Werte im grünen Bereich liegen. Das Tool zeigt Ihnen an, an welchen Stellen Sie wie viel Prozent durch entsprechende Maßnahmen einsparen können.
Wollen Sie Ihr WordPress schneller machen und benötigen dabei Unterstützung? Als langjährig erfahrene WordPress Agentur helfen wir Ihnen gerne dabei. Sprechen Sie uns einfach unverbindlich an!
