Ladezeit in WordPress optimieren

Die Optimierung der Ladezeit eines WordPress-Blogs ist ein entscheidender Erfolgsfaktor für mehr Besucher und deren Zufriedenheit. Wenn die Seite nicht gut optimiert ist, dann dauert der Ladevorgang länger und die Wahrscheinlichkeit steigt, dass der Besucher abspringt und somit euren Inhalt erst gar nicht anschauen wird.

Sicherlich ist das Problem heutzutage auf dem Desktop bzw. daheim, wo man doch mittlerweile immer öfters eine sehr gute bis gute Internet Anbindung hat, gering. Ist man allerdings mit dem Smartphone unterwegs, dann kann dies entscheidend sein. LTE ist leider doch nicht immer vorhanden und wenn die Seite nicht so schnell lädt, dann verliert man schnell die Geduld und sucht sich eine andere Seite, die schneller lädt.

Dies ist mitunter auch der Grund warum die Ladezeit auch beim Ranking einer Suchmaschine eine Rolle spielt. Da dies für Suchmaschinen ein wichtiger Faktor ist, stellt Google für die Optimierung einer Webseite sogar ein Tool zur Verfügung: PageSpeed Insights

Optimierung mit Google PageSpeed Insights

Dieses Tool ist für mich eine der ersten Anlaufstellen um einen Internetauftritt zu optimieren. Hier gibt man zunächst die URL des WordPress-Blogs ein und klickt auf „Analysieren“.
Nach einer kurzen Analysephase wird ein Wert angezeigt wie gut deine Seite optimiert ist. Zusätzlich werden die möglichen Optimierungen angezeigt. Hier kann man dann Schritt für Schritt durchgehen und sich geeignete Maßnahmen überlegen.

Ich habe mir den Start dieser Homepage zum Anlass genommen um zu zeigen, was man tun kann um einen WordPress-Blog zu optimieren.

Zu Beginn komme ich auf folgende Werte:

Mobil: 63 / 100Desktop: 75 / 100

Beide Werte sind nicht überragend und ich werde versuchen die Werte zu optimieren. Als ersten Anhaltspunkt, was man alles machen kann, bietet uns Google unter dem Punkt „Mögliche Optimierungen“ gleich mit an:

Mögliche Optimierungen

Wenn man bei den einzelnen Optimierungen auf „Fehlerbehebung anzeigen“ klickt, dann erhält man auch eine schöne Beschreibung was das Problem ist und wie man diese beheben kann.

Ich werde im Folgenden auf die einzelnen Punkte näher eingehen und beschreiben, wie ich diese mit WordPress optimiert habe.

Komprimierung aktivieren

Der erste Punkt „Komprimierung aktivieren“ ist relativ einfach zu lösen und hat auch einen erheblichen Einfluss auf den Score.

Hierzu muss eine .htaccess-Datei in eurem WordPress Hauptverzeichnis erstellt werden. Diese Datei ist normalerweise bei WordPress schon vorhanden, vor allem wenn man Permalinks mit dem Beitragsnamen aufrufen will.

Je nach dem welchen Hosting-Anbieter ihr benutzt, gibt es 2 Möglichkeiten. Bei meinem Hosting-Anbieter steht das Deflate-Modul zur Verfügung und ich konnte die Komprimierung mit folgenden Zeilen aktivieren:

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml
</IfModule>

Diese Zeilen sorgen dafür, dass die Komprimierung für die angegeben Dateitypen aktiviert wird.

Falls das Deflate-Modul nicht vorhanden ist, dann kann man es über das gzip-Modul probieren:

<IfModule mod_gzip.c>
    mod_gzip_on Yes
    mod_gzip_dechunk    Yes
    mod_gzip_item_include   file  \.(html?|txt|css|js|php)$
    mod_gzip_item_include   mime  ^text/.*
    mod_gzip_item_include   mime  ^application/x-javascript.*
    mod_gzip_item_exclude   mime  ^image/.*
    mod_gzip_item_exclude   rspheader   ^Content-Encoding:.*gzip.*
</IfModule>

Falls dies auch nicht geht, dann würde ich beim Hosting-Anbieter anfragen, ob er eines der Module zur Verfügung stellen kann.
Normalerweise bietet jeder gute Hosting-Anbieter diese Möglichkeit an.

Es gibt auch eine 3. Möglichkeit über Plugins, falls das mit dem Hosting-Provider nicht funktioniert. Dies würde ich aber nicht empfehlen, da dies aus meiner Sicht unnötig und nicht gerade ressourcenschonend ist. Da würde ich mir überlegen den Anbieter zu wechseln.

Falls es doch notwendig ist, dann könnte man dies mit dem Plugin WP Super Cache erreichen, das ich auch für die Optimierung des nächsten Problems benutze.

Wichtig
Verwendet bei dieser Optimierung keine Bilder oder bereits komprimierte Inhalte. Dies sorgt nur für unnötige Last auf dem Server, da diese Formate bereits komprimiert sind.

Allein diese Optimierung hat den mobilen Wert auf 74 wachsen lassen und beim Desktop bin ich sogar auf einen Wert von 90 gekommen.

Antwortzeit des Servers reduzieren

Eine weitere Optimierung „Antwortzeit des Servers reduzieren“ kann man durch Installation eines Caching-Plugins erreichen.

Mit dem Caching-Plugin werden die ausgelieferten Seiten nur noch beim ersten Aufruf oder bei Veränderungen aus der Datenbank geladen, ansonsten wird eine bereits gespeicherte HTML-Datei geladen und an den Benutzer gesendet. Dadurch sind beim Aufrufen einer Seite weniger bis gar keine Datenbank-Zugriffe mehr notwendig und die entsprechende Seite wird schneller ausgeliefert.

Ich habe mich für das Plugin WP Super Cache entschieden.
Die Einstellungen für das Plugin können über das Menü „Einstellungen“ -> „WP Super Cache“ aufgerufen werden.

Unter den erweiterten Einstellungen für das Plugin habe ich folgende Werte verwendet:

WP Super Cache - Erweiterte Einstellungen

(Bild anklicken zum Vergrößern)

Hier kann man unter dem Punkt „Sonstiges“ auch „Komprimiere Seiten, so das sie schneller an Besucher ausgeliefert werden“ aktivieren, um das Komprimierungsproblem von oben über Plugins zu lösen.

Nach Installation und Aktivierung des Plugins und Caches konnte ich meine Aufrufzeit um etwa 0,2 Sekunden verbessern.

Jetzt muss man sagen, dass das Plugin nichts beim ersten Abruf hilft, sondern wirkt sich langfristig aus und vor allem wenn die Seite mehr Besucher hat, dann kann man mit den vorhandenen Ressourcen länger auskommen.

Wichtig
Prüft bitte genau, ob ihr ein solches Caching-Plugin benutzen könnt. Teilweise wird auf Serverseite auf Cookies/Sessions zugegriffen und dann der entsprechende Inhalt ausgeliefert. Dies kann ungewünschte Nebenwirkungen haben. Best Practice an dieser Stelle ist: am besten man verzichtet auf Cookies oder Sessions, dann kann man auch besser Load Balancer, CDN und ähnliches für die Auslieferungen von Inhalten verwenden.

Browser-Caching nutzen

„Browser-Caching nutzen“ kann ebenfalls durch Code in der .htaccess-Datei gelöst werden. Hierzu muss man folgende Zeilen in die Datei hinzufügen:

<IfModule mod_expires.c>
 ExpiresActive On
 ExpiresByType text/html "access plus 1 second"
 ExpiresByType text/javascript "access plus 1 weak"
 ExpiresByType application/x-javascript "access plus 1 weak"
 ExpiresByType text/css "access plus 1 weak"
 ExpiresByType image/jpg "access plus 1 weak"
 ExpiresByType image/jpeg "access plus 1 weak"
 ExpiresByType image/png "access plus 1 weak"
 ExpiresByType image/gif "access plus 1 weak"
 ExpiresByType application/pdf "access plus 1 weak"
 ExpiresByType image/x-icon "access plus 1 weak"
 ExpiresDefault "access plus 1 days"
</IfModule>

Nach der Anpassung solltet ihr einen um 1 Punkt erhöhten Wert freuen.

Wichtig
Um den Wert zu erhöhen, muss für statische Inhalte ein Cache von mindestens 1 Woche hinzugefügt werden.
HTML Inhalte gelten dabei als nicht statisch und ich würde den Wert so klein wie möglich setzen, da sich hier doch öfters der Inhalt ändern könnte (z.B. durch Kommentare oder Text-Anpassungen).

HTML, JavaScript und CSS reduzieren

Für die Optimierungen „HTML reduzieren“, „JavaScript reduzieren“ und „CSS reduzieren“ gibt ist ein schönes Plugin: Autoptimize

In den Einstellungen habe ich „HTML-Code optimieren“, „JavaScript-Code optimieren“ und „CSS-Code optimieren“ aktiviert. Außerdem habe ich in den erweiterten Einstellungen unter Javascript-Optionen das Feld „Diese Skripte von Autoptimize ausschließen“ leer gelassen.
Danach muss noch der Cache des Caching-Plugins geleert werden, damit sich die Optimierungen sofort auswirken.

Ich hatte bei dieser Optimierung allerdings ein kleines Problem. Das Footer-Menü wurde aufgrund der fehlenden Whitespaces fehlerhaft dargestellt. Dies konnte ich durch eine kleine Anpassung im CSS-Code beheben.

Wichtig
Wie auch bei allen anderen Optimierungsmaßnahmen gilt: ausführlich und gründlich testen um jegliche Nebenwirkungen auszuschließen.

Shortpixel Plugin für Bildoptimierung

Dieses Plugin ist für den Moment zwar nicht notwendig, aber wenn der Blog mehr Beiträge hat und damit höchstwahrscheinlich auch mehr Bilder, dann rate ich zu einem Bildoptimierungs-Plugins.

Mit einem solchen Plugin, kann man erheblich an Transferkosten einsparen.

Ich werde in einem anderen Beitrag vergleichen und die einzelnen Bildoptimierungs-Plugins vorstellen. Nach langem Testen habe ich mich allerdings für ShortPixel entschieden.
Hier ist das Preis-/Leistungsverhältnis super. 100 Bilder gibt es zu Beginn umsonst und jedes weitere Bild kostet je nach Paket etwa 0,001$. Bitte bedenkt aber, dass ihr pro Bild in der Mediathek etwa 4 Bilder optimieren müsst.

Um das Plugin zu benutzen müsst ihr dieses installieren, aktivieren und unter Einstellungen konfigurieren. Ihr braucht hierzu ein API-Key. Diesen könnt ihr direkt über das Plugin aufrufen, wenn ihr euch dort mit eurer E-Mail-Adresse anmeldet.

Oder: wenn ihr mögt, dann würde ich mich freuen, wenn ihr euch über folgenden Link anmeldet. Über den Link habe sowohl ich als auch du einen Vorteil. Ich erhalte zusätzliche 100 Bilder frei und du auch. Somit stehen dir nach der Anmeldung 200 Bilder zur Verfügung anstatt 100.

Bei ShortPixel mit Vorteil anmeldenAnzeige

Vielen Dank für deine Unterstützung!

Ergebnis

Nach diesen ganzen Optimierungen erreicht die Seite sowohl in der Mobil als auch in der Desktop Bewertung gute Werte:

Mobil: 91 / 100 Desktop: 97 / 100

Das Ergebnis mit 91 von 100 Punkten für die Mobile Version und sogar 97 von 100 bei der Desktop Bewertung ist zwar nicht perfekt, aber ich bin Verfechter des Paretoprinzips und bei einem Ergebnis von über 90 von 100 Punkten, bin ich mehr als zufrieden. Vor allem wenn man bedenkt mit wie wenig Aufwand dies machbar war.

Um einen Wert von 100 zu erreichen, müsste man noch die Optimierung „JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten „above the fold“ (ohne Scrollen sichtbar) beseitigen“ durchführen. Diesen Punkt zu lösen ist zwar nicht ganz so schwer, aber das „Preis-/Leistungsverhältnis“ stimmt bei diesem Punkt nicht ganz. Ich will trotzdem schildern, was man hier schnell tun kann.

Man geht in die Einstellungen von dem Plugin Autoptimize und aktiviert in den CSS-Optionen die Checkbox „Gesamten CSS-Code inline und verzögert einfügen?“. Es erscheint nun eine Textbox. Die schnelle Lösung an dieser Stelle ist den gesamten CSS-Code des Themes zu kopieren und in die Textbox einzufügen. Man erreicht mit dieser Optimierung dann auch einen fabelhaften Wert von 99 Punkten. Allerdings ist er aus meiner Sicht teuer erkauft, man hat doppelten CSS-Code, da die CSS-Datei am Ende noch einmal geladen wird.

Besser ist es die Bestandteile des CSS-Codes zu analysieren, die hauptverantwortlich für das Design der Seite sind und dann an dieser Stelle einzufügen. Dies ist auch der Grund, warum ich dies im Moment nicht mache, da dies relativ aufwendig sein kann und mir das letztendlich nicht Wert ist bzw. ich dies in Angriff nehmen will, sobald ich mein eigenes Design für den Blog erstellt habe.

Kleiner Hinweis:
Man kann die Checkbox auch ohne jeden CSS-Code in dieser Textbox aktivieren, aber dann beschwert sich PageSpeed Insights über weitere Punkte und beim Laden der Seite kann ein „Flackereffekt“ entstehen. Der Hintergrund ist, dass zunächst nur der reine HTML-Code ohne jeglichen Style geladen wird und erst wenn am Schluss der CSS-Code zur Verfügung steht, wird die Seite mit dem richtigen Style gerendert.

Auswirkungen der Optimierungen auf das GTmetix-Ergebnis

GTmetrix ist ein weiteres Online Tool mit dem man die eigene Homepage bzgl. der Ladezeit optimieren kann. Auch bei diesem Tool gibt es eine schöne Auswertung und zu jedem Problem einen Hilfetext.

Im Folgenden möchte ich euch die Auswirkungen der vorherigen Optimierungen zeigen.

Ohne jegliche Anpassungen sieht das Ergebnis wie folgt aus:
PageSpeed 81%, YSlow 66%, Fully Loaded Time 4,0sek, Total Page Size 346KB, Requests 15

Nachdem die Komprimierung aktiviert wurde, sinkt die Ladezeit und die gesamte Seitengröße ist nur noch halb so groß:
PageSpeed 97%, YSlow 77%, Fully Loaded Time 3,1sek, Total Page Size 162KB, Requests 15

Nach der Aktivierung des Caches lädt die Seite in 2,3 Sekunden anstatt in 4 Sekunden ohne Optimierung:
PageSpeed 97%, YSlow 77%, Fully Loaded Time 2,3sek, Total Page Size 162KB, Requests 15

Die Browser-Cache Optimierung bringt nur eine Steigerung des PageSpeed-Wertes und des YSlow-Wertes:
PageSpeed 98%, YSlow 89%, Fully Loaded Time 2,3sek, Total Page Size 162KB, Requests 15

Mit dem Plugin Autoptimize, konnte noch einmal die gesamte Ladezeit und Seitengröße minimiert werden:
PageSpeed 99%, YSlow 96%, Fully Loaded Time 2,0sek, Total Page Size 154KB, Requests 7

Die Optimierungen konnten insgesamt das Ergebnis erheblich verbessern.
Der PageSpeed-Wert ist von 81% auf 99% gestiegen.
Der YSlow-Wert konnte von 66% auf 96% gesteigert werden.
Die gesamte Ladezeit, die Seitengröße und die Anzahl der Request ist jeweils halbiert worden.

Welche Erfahrungen habt ihr gemacht?

Die jeweiligen Optimierungen sind alle nicht schwer anzuwenden und die positiven Auswirkungen sind teilweise erheblich.

Aus meiner Sicht ein Muss für jeden WordPress-Blog.

Wie seht ihr das? Habt ihr auch schon Optimierungen durchgeführt? Wie war das Ergebnis?

Ich freue mich über eure Kommentare.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.