WordPress schneller machen – Ladezeit optimieren für mehr PageSpeed (2/2)

  • wordpress-geschwindigkeit-anleitung

Im 1. Teil hast du die grundlegenden Optimierungen kennen gelernt. In diesem Teil steige ich tiefer in das WordPress System bzw. Template ein und zeige dir weitere Optimierungen, welche teilweise ohne Plugins durchgeführt werden können.

Inhaltsverzeichnis Teil 2:

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

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-fontskeycdn.com/blog/web-font-performance

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

Kopieren

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

Kopieren
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:

Kopieren

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

Kopieren

 
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:

Kopieren

mit diesem Eintrag:

Kopieren

 
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:

Kopieren

mit diesem Code:

Kopieren

 
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:

Kopieren

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:


Und minimierter Code:

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!

10 September 2018|

One Comment

  1. ONMA Werbeagentur Hannover 7. November 2018 at 8:45 - Reply

    Hallo Holger, ich finde deinen Artikel wirklich sehr gut geschrieben. Aktuell höre ich von vielen Seiten, dass WordPress leider etwas langsam ist und habe mich deswegen umso mehr über deinen Artikel gefreut. Deine detaillierten Tipps hast du super formuliert, sodass diese direkt in die Tat umgesetzt werden können.

  2. 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.

Leave A Comment

Ich akzeptiere die Datenschutzhinweise.