wordpress-geschwindigkeit-anleitung

WordPress PageSpeed optimieren – So schaffst du einen 100/100 Score [Komplett Guide]

Den WordPress PageSpeed optimieren ist aktuell ein großes Thema, da Google angekündigt hat, dass zukünftig die Website-Geschwindigkeit auch für das Ranking bei der mobilen Suche eine Rolle spielen wird.

Für die Desktop-Suche ist der Pagespeed bereits seit einigen Jahren ein Rankingfaktor.

Wenn du dich bisher noch nicht mit der Geschwindigkeits-Optimierung deines Blogs beschäftigt hast, dann wird es also höchste Zeit.

In diesem umfangreichen Guide werde ich dir Schritt für Schritt zeigen, wie du den Pagespeed-Score deines WordPress-Blog optimierst.

Dabei zeige ich dir die Ergebnisse der einzelnen Schritte anhand eines aufgesetzten Test-Blogs.

Du kannst jeden Schritt sofort auf deinem Blog umsetzen, vorausgesetzt, er ist bisher noch nicht erfolgt.

Inhaltsverzeichnis:

  1. Optimierung der Bilder
  2. Komprimierung auf dem Server aktivieren
  3. Browser-Cache nutzen
  4. Plugins überprüfen
  5. HTML, JavaScript & CSS reduzieren
  6. Lazy Load für Bilder
  7. Optimiere deine Datenbank
  8. Cache-Plugin installieren
  9. Nutze ein schlankes Theme
  10. Wähle einen guten Webhoster
  11. Gravatare deaktivieren
  12. Trackbacks und Pingbacks deaktivieren
  13. Entferne Google Web Fonts
  14. Einsatz eines Content Delivery Networks (CDN) prüfen
  15. WordPress-Header entschlacke
  16. CSS- & JavaScript-Code optimieren
  17. JavaScript- und CSS-Ressourcen prüfen, die das Rendering blockieren
  18. Antwortzeit des Servers reduzieren

Warum du die Website-Geschwindigkeit optimieren solltest

  1. Google und andere Suchmaschinen lieben schnell ladende Seiten.
  2. Es ergibt sich ein besseres Nutzer-Erlebnis.
  3. Die Absprungrate (Bounce Rate) verringert sich.
  4. Die Conversion Rate erhöht sich (wichtig für Online-Shops).

Einige wichtige statistische Infos über Website-Geschwindigkeit:

  • 40 % der Besucher verlassen eine Seite, wenn diese zum Laden mehr als 3 Sekunden benötigt.(Quelle)
  • Jede Sekunde Verzögerung verringert die Conversion Rate um 7 %.(Quelle)
  • 47 % der Nutzer erwarten, dass eine Website in 2 Sekunden oder weniger lädt.

Teste die Geschwindigkeit deiner Website

Als Erstes solltest du die aktuelle Geschwindigkeit deiner Website ermitteln. Bedenke dabei, dass verschiedene Seiten deiner Domain unterschiedliche Ergebnisse liefern, denn jede Seite enthält unterschiedlichen Content (Bilder, JavaScript-Code etc.).

Teste deshalb deine Startseite und eine Unterseite, z. B. einen Blogbeitrag. Diese Tools werden hierfür oft empfohlen:

  1. WebPagetest.org
  2. Tools.Pingdom.com
  3. PageSpeed Insights

Verwende für den Anfang das Tool Pingdom. Dieses werde ich nachfolgend nutzen, um die Ergebnisse der Optimierungen zu erhalten.

Auf dem Test-Blog habe ich populäre Plugins installiert, um eine realistische Umgebung zu schaffen:

  • Yoast SEO
  • Antispam Bee
  • Page Builder by SiteOrigin
  • das populäre Theme „Sydney“ aus dem Theme-Verzeichnis von WordPress

Du siehst im Screenshot die aktuelle Ladezeit, die Anzahl der Requests und die Gesamt-Größe der Startseite (mit Pingdom Tool analysiert).

wordpress speed guide optimierung lade geschwindigkeit verbessern

Die Ladezeit von unter 2 Sekunden ist bereits ein super Ergebnis. Auch Google empfiehlt eine solche Ladezeit.

Die Ladegeschwindigkeit ist natürlich auch abhängig vom Standort des Besuchers. Wenn du das Tool Pingdom nutzt, achte darauf, bei Standortauswahl „Stockholm“ auszuwählen. Leider gibt es keinen deutschen Standort. Die Ladegeschwindigkeit verlangsamt sich z. B. bei Wahl von „Melbourne, Australia“.

Diese 4 Faktoren spielen eine wesentliche Rolle bei geringer Website-Geschwindigkeit:

  • nicht optimierte/zu viele Bilder
  • langsamer Server
  • aufgeblähtes WordPress-Theme
  • zu viele Plugins

 

1. Optimierung der Bilder

So, nun beginnen wir mit der Optimierung und fangen mit den Bildern an, da diese bei den meisten Blogs ein hohes Potential bergen.

Bilder werden häufig in zu hohen Auflösungen und schlecht komprimiert auf den Blog hochgeladen.

Falls du nicht gerade einen Foto-Blog mit hochauflösenden Bildern betreibst, solltest du diese weitestmöglich verkleinern, ohne dass es zu spürbaren Qualitätsverlusten kommt.

Beträgt die Breite der Blogbeitrags-Seite 700 Pixel, dann sollten auch die Bilder maximal 700 Pixel breit sein.

Der Vorteil liegt darin, dass ein kleineres Bild mit 700 anstatt 1500 Pixeln wesentlich schneller geladen wird.

Wenn du Bilder mit einem Grafik-Programm bearbeitest, dann verkleinere sie auf die entsprechende Breite deines Blogs.

Wie du diese Breite herausfindest, zeige ich dir im Screenshot (anhand des Chrome-Browsers).

wordpress speed guide optimierung lade geschwindigkeit verbessern

Lade eine Blogbeitrags-Seite > klicke mit der rechten Maustaste auf ein Bild > klicke im Menü auf „Untersuchen“

Anschließend wird dir die Breite in Pixel angezeigt.

Im Screenshot siehst du, dass im Test-Blog das Bild eine Originalgröße von 1600 x 1047 Pixeln hat. Der Browser muss diese herunterskalieren, was ebenfalls Zeit kostet.

Wie können wir nun die Bilder nachträglich verkleinern und besser komprimieren?

Dafür gibt es sehr gute Plugins, z. B.:

Mit letzterem erledigst du die Arbeit mit wenigen Mausklicks und erhältst eine gute Komprimierung ohne nennenswerte Qualitätsverluste.

  1. Installiere Compress JPEG & PNG images.
  2. Registriere dich mit deiner E-Mail-Adresse, um den API Key zu erhalten (500 Bilder im Monat sind kostenlos).
  3. Trage den Key ein, falls noch nicht automatisch erfolgt.
  4. Aktiviere den Punkt „Originalbild“ > „Resize the …“ > Gib die maximale Breite ein.
  5. Gehe auf das WordPress-Menü „Medien“ > „Massenoptimierung“ > „… starten“.

Hier siehst du ein Vorher-nachher-Bild als Beispiel für eine veränderte Dateigröße:

wordpress speed guide optimierung lade geschwindigkeit verbessern

Du siehst hier deutlich, wie viel Potential in den Bildern steckt. Mit einer Optimierung verkleinerst du enorm die Seitengröße und erhöhst die Website-Geschwindigkeit.

Die extrem schnelle Ladezeit beim Test-Blog mit unter 2 Sekunden liegt auch an dem schnellen Webhoster, den ich dafür nutze. Im Abschnitt „Hosting“ gehe ich näher auf die Wahl eines guten Webhosters ein.

Wenn du neue Bilder hochlädst, werden diese durch das Plugin ab sofort automatisch komprimiert und skaliert.

Ich empfehle, dies bereits bei der Erstellung zu tun, und habe gute Erfahrungen gemacht mit dem Online-Komprimierungs-Tool https://tinypng.com.

2. Komprimierung auf dem Server aktivieren

Internet-Browser unterstützen das Laden einer Seite in komprimierter Form. Dabei werden der HTML-Code, CSS- und JavaScript-Dateien als Zip komprimiert und an den Browser übertragen.

Das verringert die Dateigröße enorm, da HTML-/CSS-/JS-Dateien Text enthalten und dieser stark komprimiert werden kann.

wordpress speed guide optimierung lade geschwindigkeit verbessern

Die meisten Webserver laufen mit der Webserver-Software Apache und die Aktivierung erfolgt einfach über die .htaccess-Datei im Hauptverzeichnis deiner WordPress-Installation.

Füge diesen Code am Anfang der .htaccess-Datei ein:

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/x-javascript

 
Tool zum Testen: https://checkgzipcompression.com

Auf meinem Test-Server ist die Komprimierung bereits Server-seitig aktiviert. Es kommt aber häufig vor, dass die Komprimierung erst mit Hilfe der .htaccess-Datei aktiviert werden muss.

Falls dies nicht erfolgreich ist, frage beim Hoster nach, ob das Modul „mod_deflate“ installiert ist. Wenn nicht, solltest du zu einem Hoster wechseln, der auf dem Stand der Zeit ist!

3. Browser-Cache nutzen

Wir bleiben in der .htaccess-Datei und fügen weiteren Code ein für „Expires Header“.
Wenn jemand deine Website besucht, werden vom Browser alle Dateien vom Server heruntergeladen und die Website gerendert.

Mit „Expires Header“ wird dabei für statische Dateien eine Zeit festgelegt, wie lange der Browser diese Dateien im Cache behält.

Wenn der Nutzer die Seite innerhalb dieser Zeit ein zweites Mal besucht, werden diese Dateien aus dem schnellen Cache des Browsers aufgerufen und müssen nicht erneut vom Server heruntergeladen werden.

Das beschleunigt enorm den Seitenaufbau bei wiederkehrenden Besuchern.

Füge folgenden Code zur .htaccess-Datei hinzu:

<FilesMatch "(?i)^.*\.(ico|flv|jpg|jpeg|png|gif|js|css|woff)$">
ExpiresActive On
ExpiresDefault A2592000
</FilesMatch>

 

4. Plugins überprüfen

Es gibt tausende Plugins für WordPress. Das heißt aber nicht, dass alle sauber und performant programmiert sind. Meine Blogs wurden schon 2-mal gehackt aufgrund von Sicherheitslücken sehr weit verbreiteter Plugins.

Du solltest daher nur Plugins installieren, welche die aktuelle WordPress-Version unterstützen und als gut bewertet sind. Orientiere dich dabei an den Sterne-Bewertungen der Plugins.

Aber auch unter dieser Prämisse kommen mit den Jahren einige Plugins zusammen. Das bremst natürlich dein System, da jedes Plugin Ressourcen benötigt (Speicher, CPU).

Überlege dir deshalb, welche Funktionen du wirklich brauchst, und entferne Plugins, die nicht mehr benötigt werden.

Vielleicht lässt sich das benötigte Feature auch im Template umsetzen bzw. in der functions.php-Datei.

Dazu, wie Optimierungen ohne Plugin durchgeführt werden, erfährst du ebenfalls in diesem Guide. Ich bevorzuge selbst diese Variante und reduziere installierte Plugins auf ein Minimum.

Mit P3 (Plugin Performance Profiler) kannst du dir einen Überblick verschaffen und Ressourcen-fressende Plugins aufspüren: https://wordpress.org/plugins/p3-profiler/.

wordpress plugin geschwindigkeit

5. HTML, JavaScript & CSS reduzieren

WordPress-Themes und viele Frontend-Plugins fügen deiner Seite CSS-/JS-Code hinzu.

Browser laden maximal 6 Dateien parallel herunter, wenn der Server nur das Protokoll HTTP/1.1 unterstützt. Im Abschnitt „Server“ erläutere ich dir das neue, bessere Protokoll HTTP/2.

Wenn nun dein Blog mehr als 20 CSS- und JS-Dateien laden muss, benötigt das viel Zeit, bis dem Besucher die Seite korrekt angezeigt wird.

Dieser Flaschenhals wird „Head-of-Line Blocking“ genannt.

Du erinnerst dich noch an die anfangs erwähnte hohe Absprungrate, wenn Seiten lange zum Anzeigen des Inhalts benötigen!

Prüfe bitte, ob dein Server HTTP/1.1 oder bereits das neue HTTP/2 unterstützt.

Verwende dazu dieses Tool: https://http2.pro.

HTTP/2 funktioniert nur auf Domains, die ein SSL-Zertifikat installiert haben. Falls du dies noch nicht getan hast, dann wird es höchste Zeit. Browser markieren Seiten ohne SSL als „unsicher“.

Auch Google dürfte das nicht gefallen, obwohl es offiziell kein Ranking-Kriterium ist. Doch wer weiß?

Wenn dein Server nur HTTP/1.1 unterstützt, empfehle ich dir die Installation von Autoptimize.

wordpress autoptimize installation

Autoptimize minimiert und kombiniert die statischen CSS-/JS-Dateien in einer bzw. zwei Dateien. Das beschleunigt enorm den gesamten Ladeprozess. Eine gute Anleitung zur Konfiguration liest du hier.

Das Kombinieren von CSS-/JS-Dateien führt nur bei HTTP/1.1-Verbindungen zu einem Geschwindigkeits-Vorteil.

Es wird von einigen Page-Speed-Tools zwar mit mehr Punkten bewertet, wenn wenig CSS- bzw. JS-Dateien geladen werden. Konzentriere dich aber nicht zu sehr auf den Punkte-Score bzw. Rating-Buchstaben, sondern vielmehr auf die Optimierung der Ladezeit.

Ein Rating von A mit 100 Punkten beim Page-Speed-Check ist machbar und ich zeige dir im Teil 2 noch weitere Tuning-Maßnahmen, um dies zu erreichen.

6. Lazy Load für Bilder

Lazy Load zeigt Bilder auf der Webseite nur im aktuell sichtbaren Bereich an. Bilder, die sich noch außerhalb dieses Bereichs befinden, werden also noch nicht geladen.

Dies reduziert den Request und erhöht die Ladegeschwindigkeit.

Du kannst WP Rocket, Rocket Lazy Load oder a3 Lazy Load verwenden, um diese Funktion deinem WordPress-Blog hinzuzufügen.

Aktuell (Stand: 08/2018) bietet der Chrome-Browser selbst eine Lazy-Load-Option an. Diese muss vom Nutzer aber manuell aktiviert werden (was nur wenige tun).

Bei späteren Chrome-Versionen könnte sie bereits standardmäßig aktiv sein. Ich werde diesen Abschnitt gegebenenfalls anpassen. Die Umsetzung auf dem Blog wäre dann nicht mehr erforderlich, falls andere Browser (Firefox, Opera etc.) nachziehen.

7. Optimiere deine Datenbank

Wenn dein Blog schon ein paar Jährchen auf dem Buckel hat, sammeln sich in der Datenbank unnötige Eintragungen.

Das muss nicht zwingend auf die Website-Geschwindigkeit Einfluss haben, kann es aber.

Hier einige Plugins, die du für die Säuberung deiner Datenbank nutzen kannst:

WP-Sweep gefällt mir am besten und ist einfach zu bedienen. Es löscht Spam-Kommentare, Beitragsrevisionen, Beitragsentwürfe und noch einige andere Dinge.

Eine optimierte Datenbank sorgt auch für einen schnellen WordPress-Adminbereich.

Erstelle vor den Optimierungen ein vollständiges Backup deiner WordPress-Installation und Datenbank.

Es gibt dafür unzählige Plugins. Ich habe einige ausprobiert und nutze aktuell UpdraftPlus. Damit lässt sich nicht nur die Datenbank sichern, sondern auch die komplette WordPress-Installation inklusive Plugins und Bilder-Uploads.

Begrenze die Beitragsrevisionen

Wenn wir Beiträge schreiben, ist es oft hilfreich, wenn Zwischenversionen gespeichert werden, falls etwas schiefläuft.

Füge in die Datei wp-config.php im Hauptverzeichnis folgenden Code ein:

define('AUTOSAVE_INTERVAL', 600); 
define('WP_POST_REVISIONS', 3);

Du kannst dabei den Wert für Autosave und Revisionen deinen Bedürfnissen anpassen.

8. Cache-Plugin installieren

An der Nutzung von Caching kommst du nicht vorbei, wenn du schnelle Ladezeiten erreichen willst.

Dabei wird eine HTML-Version der abgerufenen Seite erstellt und beim nächsten Aufruf ausgeliefert. Eine Ausführung von PHP-Code und Datenbank-Abfragen, was einige Zeit mehr benötigt, um die Seite an den Browser in HTML-Code auszuliefern, ist nicht mehr notwendig.

Für WordPress gibt es sehr ausgereifte Plugins, die allesamt ähnlich gute Resultate liefern.

Lies dazu meinen Beitrag wo ich 5 der besten WordPress Cache Plugins ausführlich getestet habe.

Ein besonders einfaches Einrichten bietet meines Erachtens das WP-Super-Cache-Plugin, das es schon lange gibt und das von vielen Nutzern empfohlen wird. Es wird von Automattic, den Machern von WordPress, angeboten, und die besitzen natürlich besonders viel Know-how.

Wenn du noch keine Erfahrung mit Caching-Plugins hast, solltest du zunächst dieses Plugin nutzen. Die Einrichtung ist einfach und auf dem Blog von Susanne Braun findest du eine kompakte Anleitung dazu.

Mehr Funktionen bietet das W3-Total-Cache-Plugin, darunter die Minimierung von CSS- und JS-Dateien.

Aufgrund der vielen Möglichkeiten kann natürlich auch viel falsch eingestellt und die Website komplett „zerschossen“ oder ein anderer Fehler verursacht werden.

Das Plugin sollte daher nur von erfahrenen Nutzern verwendet werden.

Außerdem gibt es noch ein professionelles und leistungsstarkes Plugin, das allerdings kostenpflichtig ist: WP Rocket ist ein Premium-Plugin und aktuell das beste auf dem Markt.

WP Rocket punktet nicht nur bei der Geschwindigkeit sondern auch bei der unkomplizierten Einrichtung – einfacher noch als WP Super Cache.

Nachfolgend zeige ich dir die Ergebnisse aller 3 getesteten Plugins auf meinem Test-Blog.

WP Super Cache

wp super cache test

W3 Total Cache

wp super cache test

WP Rocket

wp super cache test

WP Rocket ist klarer Sieger und das hatte ich auch für ein Premium Plugin erwartet.

Natürlich spielen viele Faktoren eine Rolle für eine schnelle Ladezeit – z.B. ein schlankes Theme und schneller Hoster, wozu ich gleich kommen werde.

Im zweiten Teil dieser Serie gehe ich noch auf weitere Optimierungen ein, damit du die beste Performance aus deinem Blog herausholen kannst.

Hinweis: Wenn du deine Website nach der Konfiguration testest, lösche vorher den Browser-Cache. Dann lade die Seite und warte 30 Sekunden. Lade die Seite anschließend erneut.
Achte darauf, dass du nicht in WordPress eingeloggt bist, bzw. nutze einfach ein Inkognito-Fenster.

9. Nutze ein schlankes Theme

WordPress-Themes mit vielen Funktionen, Slidern, Widgets, Social Icons und vielen anderen visuellen Elementen sehen für den Besucher schön aus. Doch jedes Element erhöht die Seitengröße und damit die Ladedauer.

Wenn du die Seite Themeforest kennst, dann hast du bestimmt schon die tollen Multipurpose-Themes gesehen. Die Anbieter überbieten sich gegenseitig mit immer tolleren Features.

Das meistverkaufte Theme ist Avada, das ich auf diesem Blog einsetze. Es bietet unzählige Einstellungen und fast unbegrenzte Möglichkeiten, Websites zu gestalten.
Sehr einfach lassen sich auch Landingpages gestalten, in voller Breite und ohne Header.

Kritisiert werden solche Themes jedoch häufig insofern, als die Ladegeschwindigkeit extrem hoch ist.

Mit etwas Zeitaufwand habe ich Avada optimiert und der Page-Speed kann sich sehen lassen. Es ist also durchaus möglich, auch mit solch aufgeblähten Themes gute Ergebnisse zu erzielen.

Ich rate aber von der Verwendung ab, wenn du nur wenige Funktionen benötigst und einfach nur bloggen willst.

Die Standard-Themes von WordPress sind extrem gut programmiert sowie schnell und einfach anzupassen.

Vor einiger Zeit bin auf der Suche nach schnellen Themes auf zwei Vertreter aufmerksam geworden, da diese häufig empfohlen wurden:

Beide Themes sind auf Schnelligkeit getrimmt, sind extrem klein (Astra hat ca. 150 KB) und bieten trotzdem einige Features an, um das Theme den eigenen Bedürfnissen anzupassen.

Neben einer kostenlosen Version gibt es bei beiden auch eine kostenpflichtige Pro-Version mit weiteren Funktionen. Schau dir am besten beide an und installiere sie auf deinem Blog, falls du gerade einen Theme-Wechsel beabsichtigst.

Wie gesagt ist ein schlankes Theme enorm wichtig, um gute Ladezeiten zu erreichen.

Mit viel Erfahrung und Zeitaufwand kann auch ein Multipurpose-Theme auf Schnelligkeit optimiert werden, wie ich dies bei Avada getan habe. Bedenke aber, ob du tatsächlich all die Features etc. benötigst.

Hier eine Analyse mit dem Tool Pingdom eines Beitrages mit über 1500 Wörtern und vielen Bilder auf diesem Blog.

wp super cache test

10. Wähle einen guten Webhoster

Dieser Punkt wird eigentlich zu Punkt 1. Denn du kannst erst damit beginnen, deinen Blog zu optimieren, wenn du sicher bist, dass du einen schnellen Webhoster hast.

Es gibt hunderte von Anbietern und ich habe, seit ich WordPress nutze (2005), schon einige ausprobiert.

Aktuell bin ich bei Netcup gelandet und wirklich begeistert. Du hast die Leistung dieses Anbieters schon an den guten Ergebnissen gesehen. Netcup ist 2018 bereits zum dritten Mal Sieger bei den Hosting Awards geworden.

Einen guten Hoster zu finden, ist aber nicht so einfach. Vor allem solltest du nicht auf den Preis schauen. Oft ist ein günstiger Anbieter nicht besonders schnell.

Viele Hoster legen tausende Domains auf einen Server, die sich dessen Leistung teilen müssen. Darum heißen die Pakete auch „Shared Webhosting“. Achte also darauf, dass der Webhoster nicht zu viele Domains auf einem Server erfasst.

Das Problem dürfte aber sein, dass entsprechende Informationen kaum veröffentlicht werden.
Sie lassen sich aber trotzdem einfach herausfinden. Wie das geht, erkläre ich im 2 Teil.

Für holgerfreier.de nutze ich einen vServer und habe eine eigene IP-Adresse dafür. vServer sind zwar virtuell und teilen sich mit anderen vServern einen Host-Rechner, sind aber viel leistungsfähiger gegenüber einem Shared Webhosting.

Ich setze statt der Webserver-Software Apache Nginx ein (gesprochen: engine X) mit FastCGI-Cache im RAM – schneller geht es nicht.

Nginx kann 10.000 Anfragen pro Sekunde verarbeiten. Große Seiten setzen daher auf Nginx, z. B. Facebook, Netflix und Amazon (https://t3n.de/news/nginx-vs-apache-814684/).

Um einen vServer bzw. Root-Server selbst zu betreiben, ist viel Erfahrung mit Linux notwendig. Da ich schon viele Jahre Linux als Betriebssystem nutze, administriere ich meine Server selbst. Webserver laufen zu 99,9 % mit Linux.

Mittlerweile gibt es einige „Nginx-Managed-Hosting“-Anbieter, die Nginx komplett als Webserver-Software einsetzen, also echtes Nginx-Hosting z.B. von TimmeHosting.

Falls du weniger als 10.000 Besucher am Tag hast, lohnt sich der Einsatz allerdings nicht. Dann reicht ein Shared-Hosting-Paket völlig aus. Wie du oben gesehen hast, erreicht der Test-Blog, der auf dem kleinsten Shared-Webpaket von Netcup läuft, super Ergebnisse.

Netcup setzt Nginx als Proxy ein, der Apache vorgeschalten wird (bereits als Standard voreingestellt). Hierbei werden statische Inhalte über den schnellen Nginx-Server ausgeliefert und nur dynamische Anfragen an Apache weitergeleitet.

Das bringt einen enormen Geschwindigkeits-Vorteil gegenüber Hostern, die nicht Nginx als Reverse-Proxy einsetzen.

Daher kann ich dir Netcup ganz klar empfehlen, falls du einen Wechsel zu einem schnellen Hoster planst.

Wie gesagt, ist das die Grundvoraussetzung für einen hohen Page-Speed und gute Rankings in den Suchmaschinen.

  • PHP 7
  • SSL-Zertifikat (häufig ohne Aufpreis, da von „Let’s Encrypt“ kostenlos bereitgestellt)
  • mindestens 128 MB RAM (besser 256 MB)
  • HTTP/2-Unterstützung
  • Einsatz von Nginx als Reverse-Proxy vor Apache
  • PHP Execution Time 180 Sekunden oder mehr (einige WP-Plugins benötigen 180 s)
  • Opcode-Cache (PHP-Code wird gecached für schnellere Ausführung)
  • Redis- oder Memcache Modul

All das bietet Netcup bereits mit dem Einstiegs-Paket „Webhosting 1000“ an.

11. Gravatare deaktivieren

Wenn du das WordPress-Kommentarsystem nutzt, ist jeder Aufruf eines Gravatar-Bildes ein Request. Erhalten deine Beiträge viele Kommentare, entsteht demzufolge eine Menge an Requests und Redirects.
In WordPress lässt sich die Anzeige von Gravataren einfach abstellen unter Einstellungen > Diskussion:

avatare-deaktivieren

Durch das Anzeigen von Gravataren werden bei deren Aufruf Daten des Besuchers an den Anbieter der Gravatare übertragen. Mit dem Deaktivieren sorgst du daher auch für mehr Datenschutz.

12. Trackbacks und Pingbacks deaktivieren

WordPress verwendet Pingbacks und Trackbacks für die Interaktion mit anderen WordPress-Blogs.

Wenn jemand deinen Blog in seinen Beiträgen erwähnt, benachrichtigt er hierüber automatisch (Pingback) oder manuell (Trackback) deinen Blog. Diese Funktion wird häufig für den Erhalt eines Backlinks verwendet.

Deaktiviere in den Diskussions-Einstellungen die Link-Benachrichtigungen von anderen Blogs (Pingbacks und Trackbacks) für neue Artikel.

javascript-footer-verschieben

13. Entferne Google Web Fonts

Viele Themes ermöglichen es, aus einer Vielzahl an Google Fonts auszuwählen, oder sie nutzen bereits einen bestimmten Google Font.

Das Laden der Fonts kostet natürlich Zeit, und wenn du Google Fonts verwendest, musst du dies auch in deiner Datenschutzerklärung erwähnen.

Überlege dir deshalb, ob du tatsächlich einen Google Font benötigst und ob nicht auch ein „Websafe-Font“ wie z. B. Arial, Helvetica oder Verdana ausreicht. Diese sehen ebenfalls gut aus und jeder kennt sie.

In den Einstellungen des Autoptimize-Plugins lässt sich das Laden von Google Fonts verhindern.

Premium-Themes bieten unter „Typografie“ häufig eine Auswahl an, welche Schriftarten genutzt werden sollen.
Ich selbst nutze hier „Verdana“, dieser Font gefällt mir besser als Arial.

An dieser Stelle möchte ich dir noch die Ergebnisse einer Analyse von KeyCDN zeigen, die die Ladegeschwindigkeit von Standard- und Google Fonts getestet haben.

ladezeit-google-fonts

Es ist also eine Überlegung wert, auf Google Fonts zu verzichten.
 

14. Einsatz eines Content Delivery Networks (CDN) prüfen

Zu diesem Punkt gibt es verschiedene Meinungen und es hängt immer vom Einzelfall ab, ob sich der Einsatz lohnt.

Wenn du auf einem schnellen Server einen kleinen Blog betreibst mit Beiträgen, die nur wenige, gut optimierte Bilder bzw. statische Elemente enthalten, dann benötigst du meiner Meinung nach kein CDN.

Erst wenn deine Website mehr als 10.000 Besucher am Tag hat, viele statische Dateien geladen werden und die Besucher zudem weltweit verteilt sind, dann empfehle ich ein CDN.

Dazu, wie das CDN die Zugriffszeit verlangsamen kann, habe ich einen meiner Blogs mit dem CDN-Anbieter MaxCDN getestet.

Als Caching-Plugin verwendete ich das einfach zu konfigurierende WP Super Cache.

In folgender Auswertung siehst du die Ladezeit mit und ohne CDN.

Mit CDN

Ohne CDN

Warum bewirkt nun der Einsatz eines CDN in diesem Fall keinen Geschwindigkeitszuwachs, sondern sogar das Gegenteil?

Ein CDN-Anbieter betreibt rund um die Welt mehrerer Datencenter. Ruft nun als Beispiel ein Nutzer aus Australien deine Website auf, werden statische Dateien vom nächstgelegenen Datencenter an den Nutzer ausgeliefert.

Die Auflösung des DNS-Namens (z. B. deinedomain123.stackpath.com), um auf den Server des CDN-Anbieters zuzugreifen und die entsprechenden Dateien anzufordern, benötigt Zeit.

Beim Aufruf ohne Einsatz eines CDN entfällt dieser Schritt und das Laden statischer Inhalte erfolgt direkt von deinem Hoster.

Wenn du also bereits einen schnellen Hoster nutzt, so wie ich Netcup, der sogar statische Dateien über Nginx als Reserve-Proxy ausliefert, dann lohnt sich der Einsatz eines CDN erst bei vielen Besuchern (international) und einer hohen Zahl statischer Dateien.

15. WordPress-Header entschlacken

Im Header-Bereich von WordPress befinden sich mitunter Eintragungen, die nicht benötigt werden oder sogar ein Sicherheitsrisiko darstellen können.

Da WordPress oft ein Ziel von Hackern ist, müssen wir bspw. nicht extra darauf hinweisen, dass unsere Seiten mit WordPress betrieben werden.

Meta-Element Generator entfernen

<meta name="generator" content="WordPress 4.9.x">

Füge dazu einfach in der functions.php-Datei deines Themes am Ende folgenden Eintrag hinzu:

remove_action('wp_head', 'wp_generator');
Nutze ein Child-Theme und füge den Code der Datei functions.php im Child-Ordner hinzu. So werden die Änderungen bei einem Theme-Update nicht überschrieben.

Premium-Themes stellen meist Child-Themes zur Verfügung. Erfahre in diesem Beitrag, wie du selbst ein Child-Theme erstellst.

WP-JSON-Schnittstelle entfernen

Ab der Version 4.4. steht in WordPress eine API-Schnittstelle zur Verfügung. Falls du keine externen Tools nutzt, die Daten deines Blogs auslesen, dann deaktiviere diese Funktion:

remove_action( 'wp_head','rest_output_link_wp_head'); 

Um die Schnittstelle komplett zu deaktivieren, füge noch diesen Code ein:

add_filter('json_enabled', '__return_false');
add_filter('json_jsonp_enabled', '__return_false');

 
DNS Prefetch entfernen

Diese Methode wird genutzt, um die Zugriffszeit zu optimieren, und ist recht sinnvoll.
Falls du nicht die Ressourcen von wordpress.org nutzt und gerade überlegst, was das sein sollte, dann kannst du getrost folgenden Code entfernen:

<link rel="dns-prefetch" href="//s.w.org">

mit diesem Eintrag:

remove_action('wp_head', 'wp_resource_hints', 2);

 
RSD-Verweis und WLW-Manifest entfernen

Falls du mit keinem externen Tool auf deinen Blog zugreifst, wie z. B. Windows Live Writer, dann können auch die folgenden Einträge ohne Bedenken entfernt werden:

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://scheible.it/xmlrpc.php?rsd">

mit diesem Code:

remove_action('wp_head', 'rsd_link'); 
remove_action( 'wp_head', 'wlwmanifest_link' );

 
Emoticons deaktivieren

Nutzt du keine grafischen Emojis in deinem Blog, dann kannst du durch Entfernen dieser Funktion zusätzlichen CSS-/JS-Code einsparen und damit auch Requests:

remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');

Wenn du lieber ein Plugin nutzen möchtest, dann kannst du „WP Disable“ dafür verwenden.

Autoptimize bietet diese Funktion ebenfalls an.

 

16. CSS- & JavaScript-Code optimieren

Jetzt steigen wir tiefer in die Optimierung deines WordPress-Themes ein.

Viele Themes laden umfangreiche CSS- & JS-Dateien, denn die meisten Entwickler achten auf einen ansprechend gestalteten Code mit Kommentaren zu einzelnen Bereichen, gesetzten Leerzeichen und eingefügten Zeilenumbrüchen.

Das erhöht die Dateigröße und somit die Ladezeit, was Punkte beim Google PageSpeed kostet.

Normaler CSS-Code:

​body {
margin:20px;
padding:20px;
color:#333333;
background:#f7f7f7;
}
h1 {
font-size:32px;
color#222222;
margin-bottom:10px;
}

Und minimierter Code:

body{margin:20px;padding:20px;color:#333;background:#f7f7f7}h1{font-size:32px;margin-bottom:10px}

Wenn du einen Google PageSpeed Score von 100 erreichen möchtest, dann erzielst du mit der Minimierung eine Erhöhung deines Scores.

Hier ein Beispiel für die Größe einer CSS-Datei des populären Themes „Sahifa“ von Themeforest vor und nach der Minimierung.

Du siehst eine deutliche Einsparung von einigen Kilobytes, und die wird mit mehr Punkten belohnt.

css-komprimierung

Das Tool Google PageSpeed Insights bietet bereits die optimierten Dateien – CSS & JS – zum Download an.

google-pagespeed-download-css-js

Du brauchst diese nur noch in die entsprechenden Theme-Ordner hochzuladen.

Oder du nutzt einen der vielen Online-Optimierer wie z. B.:

Alternativ bietet diese Minimierung auch das Plugin Autoptimize an. Du brauchst dann bei einem Theme-Update die neuen CSS- & JS-Dateien nicht mehr manuell zu minimieren.

Natürlich gibt es auch viele Theme-Entwickler, die bereits minimierte CSS- & JS-Dateien einbinden – wie das beim „Avada“-Theme der Fall ist.
Das Premium-Caching-Plugin WP Rocket unterstützt die Minimierung ebenfalls.
 

17. JavaScript- und CSS-Ressourcen prüfen, die das Rendering blockieren

JavaScript

Das Tool PageSpeed Insights unterbreitet viele Optimierungsvorschläge. Bei dem Vorschlag, den „Above-the-Fold“-Bereich zu optimieren, geben jedoch viele Websitebetreiber auf.

Dies ist einer der schwierigsten Parts, Googles Vorschläge umzusetzen.

above-fold-optimierung-pagespeed

Ich versuche hier, dir bestmöglich zu erklären, wie du die Optimierung umsetzt. Das Prinzip ist einfach erklärt:

Es gibt zwei Möglichkeiten, JavaScript-Code (z. B. jQuery) zu laden: im Kopfbereich (Header) und im Fußbereich (Footer) der Webseite.

Der Browser kann die Webseite erst anzeigen, wenn alle JavaScript-Ressourcen im Header geladen sind. Das Rendering ist bis dahin blockiert.

Nachdem die HTML-Seite angezeigt wird, werden die Ressourcen im Footer geladen. Insofern würde es sich anbieten, die JS-Ressourcen ausschließlich im Footer zu platzieren.

Je nach verwendetem Theme und der Implementierung von JavaScript können aber auch negative Effekte bei der Darstellung der Seite entstehen, wenn wir die Dateien in den Footer verschieben.

Es gibt also keine Allzwecklösung, da etliche Stolperfallen existieren.

Ich möchte dir dennoch eine Möglichkeit zeigen, wie du die Optimierung mit dem bereits vorgestellten Plugin Autoptimize umsetzen kannst.

Du hast bereits gelernt, wie du CSS- bzw. JS-Dateien zu einer Datei zusammenfügst. Mit wenigen Mausklicks lässt sich sowohl die Datei als auch inline JavaScript im Footer der Webseite laden:

javascript-footer-verschieben

Beim „Sydney“-Theme sowie den von mir genutzten Themes „Avada“ und „Sahifa“ zeigen sich glücklicherweise keine Nebeneffekte.

Optimierung der CSS-Darstellung „Above the Fold“

Beim CSS-Code verhält es sich ähnlich. Der Browser benötigt nach dem Laden der HTML-Seite noch den CSS-Code für die Darstellung.
Häufig wird dabei aber auch CSS-Code geladen, der für die Darstellung (erstmal) nicht notwendig ist (z. B. nicht sichtbare Inhalte und CSS-Code von Plugins).

Google schlägt uns nun vor, das „Above-the-Fold“-CSS im HTML inline einzufügen, damit die Seite schnell korrekt angezeigt werden kann, ohne auf den übrigen CSS-Code warten zu müssen.

Der „Above-the-Fold“-Bereich kann natürlich von Seite zu Seite verschieden sein, je nachdem welche Funktionen, Effekte etc. angezeigt werden. Daher müsste jede Webseite separat optimiert werden.

Doch wie finden wir nun heraus, welcher CSS-Code zu „Above the Fold“ gehört? Darauf gibt es keine pauschale Antwort, deshalb zeige ich dir, wie du vorgehen kannst:

  1. Das Tool „Critical Path CSS Generator“ extrahiert aus der Seite sehr zuverlässig den „Above-the-Fold“-CSS-Code. Dieser Code wird aber nicht die Qualität erreichen, die ein Webentwickler liefern könnte.
  2. Falls Google immer noch Beanstandungen hat, dann hilft nur noch ein HTML-/CSS-Experte und Ausprobieren.

Je nach benutztem Theme kann es dann sehr aufwendig und kaum lohnenswert sein, an dieser Stelle weiterzumachen. Fokussiere dich bitte nicht zu sehr auf das Erreichen von 100 Punkten und investiere nicht zu viel Zeit. Ein Ergebnis von 90 Punkten ist schon ein Top-Wert.

Viel wichtiger sind die Website-Ladezeit, die Website-Größe und die „Time to First Byte (TTFB)“.

„Above-the-Fold“-CSS-Code zur Website hinzufügen

Mit dem Autoptimize-Plugin können wir einfach den „Above-the-Fold“-CSS-Code hinzufügen:
So gehst du vor:

  1. Lass dir den Code mit dem Tool „Critical Path CSS Generator“ generieren
  2. Setze einen Haken in die entsprechenden Boxen wie im Screenshot
  3. Füge den Code ein

css above the fold code autoptimize einfügen

Es dürften (fast) keine Darstellungsprobleme auftreten. Falls doch, entferne den Haken bei „Also aggregate inline CSS?“.

Eine Vorhersage auftretender Probleme ist unmöglich. Hier müsste dann eine intensive Überprüfung erfolgen.

Bei WP Rocket wird die Erstellung und das Einfügen des „Above-the-Fold“-CSS-Codes einfach mit einem Klick auf einen Button durchgeführt. Einfacher geht es nicht!

wp rocket cache css above the fold code
 

18. Antwortzeit des Servers reduzieren (Time to First Byte)

Wenn dein WordPress-Theme bereits stark optimiert ist, du wenige Plugins einsetzt und einen schnellen Hoster nutzt, dann hast du vielleicht schon einen Top-Score erreicht. Herzlichen Glückwunsch!

Bei den meisten Blogs ist aber der Hoster zu langsam. Google empfiehlt eine Antwortzeit von höchstens 200 Millisekunden für das Reagieren des Servers bei einer Anfrage bzw. für das Senden der ersten Daten.

time to first byte optimieren mit wp rocket

Hinweis: Bitte nicht verwechseln mit der Gesamtdauer, die für die Anzeige der Seite benötigt wird!

Liegt man unter diesem Wert, wird das von Google mit Punkten belohnt. Im Test mit Einsatz von WP Rocket lag die Zeit bei schnellen 109 Millisekunden.

Es gibt verschiedene Faktoren, welche die Antwortzeit des Servers verzögern. Durch Einsatz von Caching kann diese Zeit bei den meisten WordPress-Blogs stark verringert werden. Du solltest daher wie bereits beschrieben ein Caching-Plugin installieren.

So, nun teste ich, ob das für den perfekten PageSpeed-Score reicht.

pagespeed 100 punkte optimieren desktop

pagespeed 100 punkte optimieren mobil

Perfekt, 100 Punkte!

Mit dem Astra Theme wie im Teil 1 vorgestellt, erzielte ich mit WP Rocket eine noch schnellere Ladezeit:

astra theme mit wp rocket top performance pagespeed 100 punkte

Fazit:

Du hast gesehen wie mit nur wenig Änderungen die Geschwindigkeit bei einem WordPress-Blog enorm gesteigert werden kann. Es lohnt sich diese Zeit zu investieren um bessere Rankings und Nutzungserlebnis zu erzielen.

Wer sich nicht traut tiefergehende Änderungen am System vorzunehmen, den empfehle ich WP Rocket.

Die Konfiguration ist sehr leicht und es können damit fast alle Optimierungen umgesetzt werden, wie in den beiden Teilen vorgestellt wurden.

Hast du selbst noch einen Speed-Tipp? Schreibe doch deine Optimierungs-Ergebnisse als Kommentar oder stelle eine Frage!

Teile den Beitrag - Danke!

FacebookTwitterWhatsAppBuffer

Das könnte auch interessant sein...

9 Kommentare zu „WordPress PageSpeed optimieren – So schaffst du einen 100/100 Score [Komplett Guide]“

  1. Und wieder ein schlecht recherchierter Artikel zum Thema PageSpeed. Fängt schon damit an dass der Autor nicht mitbekommen hat dass man in den Google Page Speed Tools schon seit Monaten auch gemessene Zeiten einsehen kann. Ganz davon zu schweigen dass Google gleich mehrere andere Tools anbietet die Ladezeit zu prüfen.

    Und dafür schaltet man Werbung auf Facebook?

  2. Hallo Stefan,

    deine Aussage ist nicht ganz korrekt. Es wäre auch schön gewesen, du hättest die anderen Tools benannt.
    Ich habe diese Google Tools – außer PageSpeed Insights – bewusst nicht unter dem Punkt „Teste die Geschwindigkeit deiner Website“ aufgeführt.

    Das Tool PageSpeed Insights zeigt nur die Geschwindigkeit bei Seiten mit hohem Traffic an. **UPDATE** Seit Januar 2019 wird auch die Geschwindigkeit gemessen.
    Warum das so ist und es nicht empfohlen wird zu Geschwindigkeits-Messung wird hier beschrieben:

    Hier mal Analysen der Seite vom Marketing Experten Björn Tantau und das Magazin t3n:
    (Wobei die Seite von Björn mit Sicherheit auch hohe monatliche Besucherzahlen aufweist)

    https://holgerfreier.de/wp-content/uploads/2018/08/tantau.png

    https://holgerfreier.de/wp-content/uploads/2018/08/t3n.png

    Ich vermute du meinst auch noch das mobile Speed Test Tool von Google.

    Dieses testet die Geschwindigkeit einer mobilen Seite mit einer simulierten 3G Verbindung und liefert dementsprechend eine deutlich höhere Ladezeit.

    Ich würde das Tool nicht verwenden für die Durchführung der Optimierungen unter Punkt 1-10.

    Nach Abschluss aller Optimierungen kann es genutzt werden, um festzustellen wo die Seite mobil „steht“.

    Weiterhin gibt es von Google noch „Lighthouse“ was zu den Chrome DevTools gehört und mehr was für erfahrene Nutzer ist.

    Es kann im Chrome Browser über die Console aufgerufen werden und liefert tiefgreifende Analysen.

    Aus o.g. Gründen empfehle ich das Tool „Pingdom“ WordPress Nutzern, die erst mit Optimierungen anfangen.

    Pingdom liefert hier schnell und übersichtlich Ergebnisse von Seitengröße, Geschwindigkeit und ein Wasserfall Diagramm um festzustellen, welche Elemente auf der Seite lange zum laden benötigen.

    Das Thema Website Optimierung ist sehr komplex. Es ist unmöglich das Thema abschließend zu behandeln. Es gibt darüber schon große Bücher z.B. hier >

    Im zweiten Teil gehe ich aber noch tiefer in das WordPress System und zeige viele „Tweaks“.

    Facebook ist aktuell immer noch die beste Traffic Quelle um schnell hochwertigen und günstigen Traffic zu erzielen.

    Nicht nur meine Meinung :-)

    Wer erfahren möchte wie ich für 1 Cent Besucher und Fans erziele, sollte einfach bei meinem kostenlosen Facebook Training teilnehmen.

  3. Hallo Herr Freier,

    Guter Artikel, wirklich interessant. Ich selber nutze HTTP/2 und habe über Plugins Java Script und css reduziert. Bei Goggle Page Speed wird mir jetzt eine viel bessere Wertung angezeigt.

    Aber in der Praxis läd meine Webseite überhaupt nicht schneller :(

    Ich glaube Pingdom Tools, ist die bessere Wahl.

    1. Hallo,

      um wie viele KB ist die Seite kleiner geworden? Welches Plugin wurde für die Optimierung verwendet?
      Wenn das nur ca. 50 – 100KB sind merkt man beim Besuch der Seite im Browser keinen Unterschied.

      Die Verkleinerung von JS/CSS ist nur ein Teil von vielen Optimierungen.

      Mehr dazu in meinem Guide…

  4. Danke für den Artikel, der ist sehr gut recherchiert, auch wenn einige Kommentatoren offensichtlich anderer Meinung sind. Ich würde bei den Bildern noch das Format WebP erwähnen und natürlich SVG. WebP wird noch nicht von allen Browsern unterstützt, aber es gibt das Plugin WebP-Express, dass das Problem behebt und zuerst prüft, welcher Browser die Seite aufruft und dann das entsprechende Bild („normal“ oder WebP) lädt. Und natürlich für Grafiken SVG.

    , Das Hauptproblem beim Thema Pagespeed ist (meiner Meinung nach) die „Philosophie“ der meisten Theme- und Pluginanbieter, die behaupten, dass man ohne irgendwelchen Kenntnissen in Sekundenschnelle unglaublich tolle WordPressseiten erstellen kann.

    Abgesehen davon, dass man – wenn man eine Webseite macht – auch eine Idee von Grafikdesign haben sollte, verleiten aber solche Aussagen natürlich dazu, dass man Riesenthemes nutzt und dann alle Probleme mit entsprechenden Riesenplugins „löst“.

    Angeblich alles kein Problem. ;) Ja OK, man kann sich auf diese Art eine Seite zusammenklicken, aber… Die Ladezeit ist dann natürlich die erste Sache, die extrem problematisch ist.

    1. Hallo Raphael,

      danke für deinen Kommentar.

      Mit WebP stimme ich dir voll zu. Werde den Guide demnächst ergänzen.

      Durch Verwendung von Bildern im WebP Format lässt sich die Seitengröße erheblich verkleinern, wenn viele Bilder auf der Seite verwendet werden.

      Selbst nutze ich das Plugin WebP Express
      Auf dem Server muss aber eins der PHP Module imagic cwebp, vips, gd aktiviert sein. Bei Shared Hostern ist das selten der Fall.
      Ich nutze einen vServer und kann entsprechend alles installieren.

      Eine Alternative ist das EWWW Image Optimizer Plugin in der Paid Version https://de.wordpress.org/plugins/ewww-image-optimizer/.

      Der Einsatz von Plugins sollte auf ein Minimum reduziert werden, da stimme ich dir voll zu.

      Weniger ist mehr – auch wenn es um irgendwelche Fancy Features geht die kein Seitenbesucher sehen will.

      Er hat nur wenig Zeit und will schnell die Informationen die er sucht.

      Ich nutze das schnelle Astra Theme und für Landingpages zu bauen den Pagebuilder Elementor. Vorteil: JS/CSS Code wird nur für Seiten geladen die mit dem Builder gebaut wurden.

      Blogbeiträge bleiben schlank und laden daher extrem schnell.

      siehe auch meinen Test der 5 besten WordPress Cache Plugins: https://holgerfreier.de/wordpress-cache-plugins/

  5. Hallo Holger,

    schöner Guide, fasst das ganze gut zusammen und trotzdem sehr ausführlich. Vielleicht könntest du mal einen Guide zu CDNs machen, da diese Funktion gerade für die Ladezeit von Blogs und Onlineshops relevant ist. Nicht jedes Caching Tool bietet einen (geeigneten) Reiter dafür.

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht.

Die mit Sternchen (*) gekennzeichneten Verweise sind sogenannte Provision-Links. Wenn du auf so einen Verweislink klickst und über diesen Link einkaufst, bekomme ich von deinem Einkauf eine Provision. Für dich verändert sich der Preis nicht.