WordPress beschleunigen: Pagespeed Optimierung für WordPress ohne Programmierkenntnisse

Die Optimierung der Websitegeschwindigkeit ist aus verschiedenen Aspekten notwendig. Der wichtigste Grund ist die User Experience. Wenn eine Seite langsam lädt, wird der Besucher oft bereits verloren, bevor die Inhalte sichtbar sind. Der Besucher deiner Website wartet keine 10 Sekunden, sondern 3 bis 4 Sekunden. Genervt ist er schon nach 2 Sekunden. Da Google das Ziel hat möglichst user-freundliche Websites gut ranken zu lassen, beeinflusst die Websitegeschwindigkeit direkt das Google Ranking. Wer also den Pagespeed verbessert, der betreibt automatisch Suchmaschinenoptimierung (SEO).

Request-Anzahl und -Größe reduzieren: Wie wird eine Website technisch schneller?

Um die Geschwindigkeit einer Website zu verbessern, sind technisch zwei Punkte notwendig: Die Anzahl an Requests muss reduziert werden und die Dateigröße der einzelnen Anfragen muss reduziert werden. Jedes Mal, wenn eine Person eine URL aufruft, wird eine Anfrage an den zugehörigen Server gesendet. Bei diesem werden alle Daten abgefragt, die zum Aufruf der Seite benötigt werden. Dies sind: CSS-Dateien, HTML-Dateien, Bilder, Videos, PDFs, Javascript-Dateien und andere Dateiformate.

Je mehr Dokumente es gibt, desto größer ist die Anzahl der benötigten Abfragen (Requests). Da nicht alle Dokumente gleichzeitig geladen werden können, benötigen mehr Dokumente bei gleicher Dateigröße länger. Aus diesem Grund muss die Anzahl der Requests reduziert werden, wenn die Geschwindigkeit steigen soll.

Des Weiteren ist die Größe der einzelnen Abfragen entscheidend. Wenn sich auf einer Website fünf Bilder befinden, die jeweils 1 MB groß sind, dann steigt die Ladezeit deutlich, im Vergleich zu fünf 50 KB großen Bildern. Aus diesem Grund auch die Größe der einzelnen Abfragen (Requests) reduziert werden.

Die folgenden Maßnahmen zeigen auf, wie die Anzahl und Größe der Requests reduziert werden kann. Bei allen Maßnahmen sind keine Programmierkenntnisse nötig. Auch müssen keine Änderungen an der htacces Datei durchgeführt werden. Die Maßnahmen sind sortiert nach der Schwierigkeit der Umsetzung.

Zur Orientierung: Ziel sollte es sein, dass eine einzelne Seite nicht größer als 2 MB ist. Im besten Fall unter 1 Mb.

Bilder komprimieren

Die Größe der Bilder zu reduzieren ist die einfachste und gleichzeitig einflussreichste Möglichkeit, die Ladegeschwindigkeit einer Website zu erhöhen. Ein Bild in seiner originalen Auflösung besitzt bereits auf einem iPhone eine Breite von 6000 px. Um Bilder im Vollformat auf einem Bildschirm anzuzeigen, reicht häufig schon eine Breite von 1280 px aus. Da meist Bilder in einen Text integriert werden, benötigen diese nur einen kleinen Teil des Bildschirms. So reicht es in vielen Fällen vollkommen aus, ein Bild auf eine Breite von 600 px zu reduzieren. Auf diesem Wege werden 90 % der Dateigröße eingespart, ohne die Qualität des Bildes für den User zu verschlechtern. Zusätzlich sollte die Qualität soweit reduziert werden, bis ein Qualitätsverlust auffällt. In den meisten Fällen kann die Bildgröße so auf 30 bis 100 KB reduziert werden.

Um die Bildgröße zu reduzieren, gibt es zwei Möglichkeiten. Empfehlenswert ist die Nutzung von Bildbearbeitungssoftware, wie Photoshop, GIMP oder Affinity Photo. Ich empfehle gerne Affinity Photo, da es ein würdiger Photoshop Konkurrent ist und nur einmalig ca. 55 € kostet. Eine zweite Möglichkeit ist die Nutzung von WordPress Plugins wie Smush. Smush erkennt automatisch zu große Bilder in der WordPress Datenbank und reduziert die Größe. Diesen Weg würde ich jedoch nur für Websites empfehlen, die mit vielen Redakteuren arbeiten. Wer technisch sauber arbeiten möchte, sollte Bilddateien immer einsatzbereit in WordPress hochladen. Sollten Bilder auf einer einzelnen Seite reduziert sein, wirst du den Unterschied der Ladegeschwindigkeit sofort spüren.

WordPress Plugins reduzieren

Plugins sind der Grund, weshalb WordPress so erfolgreich ist. Dank der großen Anzahl an Plugins können mittlerweile viele Menschen eine Website betreiben, ohne jegliche Kenntnisse von HTML, CSS oder Programmiersprachen wie JavaScript, Python und Co. Gleichzeitig bedeutet die große Anzahl an Plugins, dass eine große Versuchung besteht, möglichst viele davon zu installieren. Dieses Verhalten ist jedoch aus zwei Gründen nicht zu empfehlen.

Zunächst einmal bedeutet jedes WordPress Plugin eine potentielle Sicherheitslücke mehr im eigenen System zu haben. Viele Plugins sind nicht gut programmiert und besitzen keine Sicherheitsmechanismen. Insbesondere auf Plugins, die seit mehr als einem Jahr nicht aktualisiert wurden, sollte man im besten Fall verzichten.

Doch auch der Pagespeed leidet unter steigender Anzahl an Plugins. Viele Plugins erhöhen die Anzahl der Requests und somit die Ladegeschwindigkeit der Website. Aus diesem Grund solltest du dir alle installierten Plugins anschauen und drei Fragen stellen:

1. Ist dieses Plugin überhaupt noch in Benutzung?
2. Gibt es eine Lösung, die mehrere Plugins ersetzen kann?
3. Muss dieses Plugin dauerhaft aktiviert sein?

Plugins, die nur unregelmäßig genutzt werden, können einfach deaktiviert werden und müssen nicht direkt gelöscht werden. Wenn ein Plugin jedoch wirklich nicht mehr benötigt wird, sollte dies komplett deinstalliert werden.

Content Delivery Network (CDN) nutzen

Eine Website liegt immer auf einem Server, der an einem bestimmten Fleck auf dieser Erde steht. Immer, wenn ein Internetnutzer eine URL aufruft, werden die Daten von diesem Ort geladen und dem Internetnutzer zur Verfügung gestellt. Je weiter eine Person von diesem Serverstandort entfernt ist, desto länger benötigt die Anfrage und desto länger lädt eine Internetseite. Eine Distanz von mehreren hundert Kilometern ist kein Problem. Eine Distanz von mehreren Tausend schon. Diese technische Herausforderung müssen insbesondere international besuchte Websites meistern.

Die Lösung ist ein Content Delivery Network, kurz CDN. Dabei wird eine Kopie der eigenen Website auf vielen Servern, verteilt auf der ganzen Welt, abgelegt. So reduziert sich der physische Weg der Anfrage beim Aufruf einer URL deutlich. Content Delivery Networks kann man bereits ohne Kosten aktivieren. Zum Beispiel bei Cloudflare oder keyCDN. Ich selbst nutze bisher kein CDN und kann deshalb keine Aussage darüber treffen, welche Anbieter empfehlenswert sind.

Quelle: https://www.keycdn.com/img/blog/blog-image-infographic.png

WordPress Browser Caching

Neben der Optimierung der Bilder ist die Nutzung eines Browser Caching Plugins die zweite große Stellschraube, um die Performance der WordPress Website zu optimieren.

Bei einem Aufruf einer URL werden, wie wir bereits gelernt haben, alle Daten vom Server abgerufen und zum Endgerät gesendet. Wird die URL erneut aufgerufen, werden erneut alle Daten abgefragt und gesendet. Selbst wenn die Dateien identisch sind. Ein Browser Cache verhindert genau dies. Wenn eine URL aufgerufen wird, werden alle Daten und Informationen lokal auf dem Endgerät, im Browser, gespeichert. Wird die URL nun ein zweites Mal aufgerufen, kann der Browser die Daten aus dem Cache laden. So reduziert sich die Geschwindigkeit der Website deutlich. Natürlich immer nur dann, wenn die Seite/Datei ein zweites Mal aufgerufen wird.

Es gibt viele kostenlose Browser Caching Plugins für WordPress. Dabei ist eine Empfehlung häufig nicht so einfach. Beim Cachen einer Seite kann es zu verschiedenen Problemen kommen, die die Darstellung und die Funktionsweise der eigenen Website beeinträchtig. Um direkt die Angst zu nehmen: Durch Deaktivieren des Plugins können mögliche Probleme direkt behoben werden. Es kann nichts „kaputt gemacht werden“.

Häufig empfohlen wird W3Cache, dies führte bei mir jedoch nur zu Problemen. Aus diesem Grund setze ich auf die kostenlose Version von Borlabs Cache. Das Plugin ist so simpel aufgebaut, dass alle grundlegenden Caching-Funktionen abgedeckt sind und die Funktion der Website nicht beeinträchtigt wird. Wirklich empfehlen kann ich WPRocket. WPRocket kostet ca. 40 € im Jahr, ist sehr einfach zu bedienen und erhöht die Websitegeschwindigkeit deutlich.

Als Ergänzung ist die Funktion Lazyload zu nennen. Dabei werden Bilder erst dann geladen, wenn diese im Bildschirmbereich auftauchen bzw. kurz davor. So ist die gefühlte Ladezeit für den Nutzer deutlich schneller. WPRocket hat diese Funktion bereits integriert. Das kostenlose Plugin A3Lazy Load ist in Kombination mit Borlabs Cache zu nutzen.

Neben der Zusammenführung der Javascript- und CSS-Dateien bietet Asset Cleanup noch eine weitere wichtige Funktion, die WPRocket nicht bietet. Und zwar kannst du dank des Plugins jeden Request einzeln deaktivieren. Welche Requests reduziert werden können:

• Requests, die durch überladene Themes entstehen und nicht auf jeder Seite notwendig sind
• Requests die WordPress auf jeder Seite stellt und generell abgestellt werden können
• Requests von Social Networks wie Facebook und Twitter
• Requests von Plugins, die nicht auf jeder Seite benötigt werden.

Im Menü des Plugins befindet sich eine ausführliche Anleitung, welche Requets problemlos deaktiviert werden können. Ich konnte mit Hilfe des Plugins unnötige Requests von WooCommerce (Shopsystem Plugin) auf ungewünschten Seiten, wie der Startseite oder dem Blog, deaktivieren.

HTTP2 testen & aktivieren

Aufgrund der DSGVO und den Sicherheitswarnungen durch Google Chrome haben mittlerweile viele Leute, auch außerhalb der IT und Online Marketing Welt, etwas von HTTP und HTTPS gehört. HTTPS verschlüsselt die Datenübertragung und erhöht somit die Sicherheit und den Datenschutz einer Website. Eine weitere technische Möglichkeit, die HTTPS bietet ist der Einsatz von HTTP/2.0. Während HTTP/1.0 nur einen Request gleichzeitig ermöglicht, können mit HTTP/2.0 mehrere Requests gleichzeitig gestellt werden.

Wichtig: HTTPS ermöglicht HTTP/2.0, es ist jedoch nicht standardmäßig aktiviert.

Ob HTTP/2.0 auf eurer Website aktiviert ist, kann unter folgendem Link geprüft werden: https://tools.keycdn.com/http2-test. Sollte der Test negativ ausfallen sind folgende Schritte notwendig:

1. In den Webhosting Einstellungen schauen, ob man HTTP/2.0 aktivieren kann
2. Mit dem Hoster in Kontakt treten und ihn darum bitten es zu aktivieren bzw. die Seite auf einen geeigneten Server umziehen zu lassen.
3. Den Hoster wechseln

Auf dem Barcamp 2019 wurde mir gesagt, dass die Nutzung eines Content Delivery Networks ebenfalls dafür sorgt, dass HTTP/2.0 aktiviert wird. Mit der Nutzung eines CDNs kannst du dieses Problem also ebenfalls lösen.

Quelle: https://www.web-netz.de/wp-content/uploads/Multiplexing-Auswirkung.jpg

Schneller WordPress Hoster

Eine wichtige Kennzahl bei der Messung des Pagespeeds ist die Time to first byte (TTFB). Die TTFB ist die Zeit, die benötigt wird, bis der Server auf die Anfrage reagiert. Bevor der Server auf die Anfrage nicht reagiert, können keine weiteren Requests gestellt werden. Das bedeutet: egal wie gut du deine Website optimierst, wenn die Serverantwortzeit zu langsam ist, wird deine Website niemals schnell sein.

Google empfiehlt eine TTFB-Zeit von unter 200ms. Diese Zeit wird von Billig-Hostern jedoch nicht ansatzweise erreicht. Dort liegt die Reaktionszeit eher bei 1-3 Sekunden. Du hast deinen Website-Besucher als schon verloren, bevor der Server überhaupt reagiert. Wie gut deine TTFB ist, kannst du in der Browser Entwicker Konsole sehen oder mit Hilfe eines Tools.

Anleitung: Entwickler Konsole in Chrome öffnen

Aus diesem Grund sollte bei der Wahl des WordPress Hosters nicht gespart werden. Besonders häufig empfohlen wird All Inkl. Ich bin mit meinen Seiten Anfang 2019 zu Webgo gewechselt. Hier beträgt die TTFB, je nach Tageszeit bzw. Auslastung, 160 ms bis 550 ms. Wer eine noch schnellere Ladezeit möchte, der muss deutlich teurere Webhosting-Angebote in Anspruch nehmen und sollte auf ein Shared-Hosting eher verzichten. Im Gegensatz zum Root Server, bei man seinen Server ganz allein zur Verfügung hat, teilt man sich beim Shared Hosting einen Server mit anderen. Dies sind, je nach Angebot acht bis mehrere hundert Personen.

Ich zahle für mein Webhosting Paket „Profi“ bei Webgo 10 Euro im Monat. Dabei teile ich mir mit 15 weiteren Kunden den Server. Wer sich mit maximal vier Personen einen Server teilen möchte, der zahlt 27 Euro im Monat. Die Website meines alten Arbeitgebers cybay.de hat beispielsweise eine TTFB von 23 bis 80 ms.

Das Unternehmen kinsta hat übrigens einen sehr ausführlichen Artikel darüber geschrieben, wie man die TTFB noch reduzieren kann: „Wie man TTFB reduziert, um die Ladezeiten von WordPress-Seiten zu verbessern“

Ein guter WordPress Hoster ist auch aus anderen Gründen sinnvoll. Gute Hoster sorgen nicht nur für eine erhöhte Sicherheit vor Hackerangriffen, sondern reduzieren Down Times auf ein Minimum. So ist die eigene Internetpräsenz fast zu jeder Sekunde im Jahr aufrufbar.

Tipp zum einfachen Umzug mit WordPress

Dank dem Plugin Duplicator ist das Umziehen von Websites zu einem neuen Hoster kinderleicht:

1. Duplicator installieren
2. Eine Kopie der Seite erstellen
3. Den FTP-Server der neuen Website aufrufen
4. Die Duplicator Datei auf den Server schieben
5. Die neue URL aufrufen und das Duplikat installieren

Eine ausführliche Anleitung zum Umzug mit Duplicator liefert Pixelbar.

Bei einem Umzug der Seite kann es dazu kommen, dass der Umzug der IP-Adresse von deinem Rechner noch nicht erkannt wurde. Dies kann bis zu 24 Stunden dauern. Damit du dies umgehen kannst, musst du die neue IP-Adresse in die Host-Datei deines PCs oder Macs eintragen. Eine Erklärung dazu liefert der Tech k-webs

Schnelles WordPress Theme

Der letzte Punkt, um die Websitegeschwindigkeit zu erhöhen und sowohl den User als auch Google Pagespeed Insights zum Lachen zu bringen, ist das passende WordPress Themes. Viele WordPress Themes sind schlecht programmiert, überladen und stellen viel zu viele Requests, aufgrund von Javascripten, CSS-Dateien und ungewollten Verbindungen zu sozialen Netzwerken. Auf der anderen Seite gibt es WordPress Themes wie das Divi Theme (nutze ich selbst), welche unglaublich mächtig sind und vielen Online Marketing Abteilungen Entwickler und Grafiker sparen, jedoch sehr behäbig sind, aufgrund der vielen Funktionen.

WordPress Themes wie Astra (Nein, nicht das Bier) oder OceanWP sind extrem schlank und darauf optimiert die Websitegeschwindigkeit nicht negativ zu beeinträchtigen.

Jedoch erfordert die Installation eines neuen Themes viel Zeitaufwand. Nicht die Installation selbst, sondern die darauffolgende Arbeit. Wer ein neues Theme installiert, der wird eine ziemlich durcheinander gewürfelte Website auffinden. Denn nun müssen erst alle Design-Einstellungen für das neue Theme getroffen werden. Dies kann im schlechtesten Fall mehrere Tage dauern oder sogar zu einem kompletten Re-Design der Website führen. Aus diesem Grund sollte man sich gut überlegen, ob ein neues Theme wirklich den gewünschten Erfolg mit sich bringt. Hier wäre es sinnvoll eine Kopie der Seite zu erstellen und die Auswirkungen zu testen. Dies ist mit Duplicator oder mit WP Staging möglich.

Fazit: Pagespeed vs. Usability

Für viele Personen ist es wichtig beim Google Pagespeed Insights Test einen Wert von 100 zu erhalten. Grundsätzlich ist dieser Wunsch auch nicht falsch, da Google impliziert, dass eine möglichst schnelle Seite die User glücklicher macht.

Jedoch gibt es da ein Problem. Je mehr Funktionen eine Seite hat, desto mehr und größere Requests sind in der Regel notwendig. Eine statische Seite, wie Fabian-Praschl.de hat nur wenige Funktionen, erreicht deshalb recht schnell einen guten Pagespeed Wert, ohne Beeinträchtigungen für den User. Auf meiner Projektseite Gym-Wear-Fashion.com ist jedoch ein Shopsystem integriert. Hier ist ein guter Pagespeed Wert schon schwieriger zu erreichen, wenn man alle Funktionen beibehalten möchte. Aus diesem Grund sollte man sich immer folgende Fragen stellen:

• Welche Funktionen sind wirklich wichtig?
• Kann ich Funktionen entfernen, ohne dem User etwas wegzunehmen?
• Wird die Geschwindigkeit durch das Entfernen der Funktionen so stark verbessert, dass es das Entfernen rechtfertigt?
• Können Fehler/Bugs entstehen, wenn bestimmte Caching-Funktionen aktiviert sind?

Man muss also immer abwägen, wie weit man optimiert. Dies musst du am Ende selbst enscheiden.