Pagespeed-Optimierung: Das letzte Quäntchen aus WordPress herausholen
WordPress hat sicherlich viele Vorteile, leider kommen die in den meisten Fällen mit einem Preis: Ladezeit. In den letzten Jahren hat sich die einstige Blogging-Plattform weiterentwickelt – mehr Funktionalitäten waren gefragt. Bei so vielen Möglichkeiten kann eine WordPress-Website jedoch sehr langsam werden, wenn das Setup nicht stimmt.
Pagespeed im Trend
Die negativen Auswirkungen von langsamen Websites sind mittlerweile bekannt: hohe Bounce-Rates, niedrige Conversion-Rates, ganz zu schweigen von der Nutzererfahrung. Doch auch hier macht es WordPress Nutzern einfach. Nach kurzer Suche findet man Tricks wie Caching, CSS, HTML und JavaScript-Komprimierung oder Bild-Optimierung – es gibt für alles ein Plugin. Doch auch neben den Klassikern gibt es weitere Möglichkeiten, eine WordPress-Website blitzschnell zu machen.
Google-Fonts Lokal hosten
Google-Fonts sind klasse, nur leider kommen sie meist mit zusätzlichen HTTP-Anfragen, die eine WordPress-Seite langsamer machen. Um sicherzugehen, dass diese Optimierung Sinn ergibt, sollte über zum Beispiel Pingdom-Tools getestet werden, ob Google-Fonts derzeit zusätzliche Anfragen verursachen.
Ist dies der Fall, ergibt das lokale Hosten von Google Fonts meist Sinn. Dafür muss im ersten Schritt die genutzte Google-Font heruntergeladen werden. Für höchste Kompatibilität sollte sie vom TTF-Format in WOFF umgewandelt und danach per FTP auf den eigenen Server geladen werden. Zusätzlich muss über den Google Webfont Helper das zugehörige CSS heruntergeladen werden.
/* roboto-regular - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url('../fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Roboto'), local('Roboto-Regular'),
url('../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
Im letzten Schritt muss der CSS-Code nur noch über den WordPress-Customizer eingebunden werden und schon sind Google Fonts lokal gehostet. Um sicherzugehen, testet ihr das natürlich vorher.
Brotli für maximale Komprimierung
Durch Komprimierung werden Dateien, die vom Webserver geladen werden müssen, in kleinere Datengrößen verpackt und so an den Nutzer gesendet. Das spart einiges an Ladezeit. Viele Websites nutzen dafür GZIP-Komprimierung. Das ist zwar besser als keine Komprimierung, seit 2013 gibt es aber eine andere, deutlich effektivere Methode: Brotli. Damit spart ihr meist zusätzliche zehn Prozent Dateigröße.
Leider kann die Komprimierung noch nicht bei jedem Hoster genutzt werden. Brotli ist lediglich für NGINX- oder Apache-Server ab Version 2.4.26 oder höher möglich. Um Brotli-Komprimierung unabhängig vom Hoster zu nutzen, kann jedoch Cloudflare eingesetzt werden. Cloudflare bietet ein sogenanntes Content-Delivery-Network (CDN) kostenfrei an – einfach zu installieren ist es auch noch. Hinter CDN verbirgt sich ein international verteiltes Netz an durch das Internet verbundenen Servern. Die unterstützen Websites mit beschleunigter Auslieferung der Inhalte, insbesondere für internationale Besucher. Sobald das CDN für die Website aktiv ist, kann im Cloudflare-Menü im Unterpunkt „Speed“ die Brotli-Komprimierung aktiviert werden.
Um sicherzugehen, dass Brotli aktiviert ist, kann die Website auf Gift of Speed darauf getestet werden.
Unnötige WordPress-Prozesse deaktivieren
Per Standardeinstellung werden bei WordPress verschiedene Prozesse im Hintergrund geladen, die für den Großteil der Websites nicht relevant sind. Dazu gehören Emojis, RSS Feeds, jQuery Migrate oder Dashicons. Sie werden dennoch bei jeder Seite mitgeladen und wirken sich so negativ auf die Ladezeit aus.
Mit einem Plugin wie Clearify können diese Prozesse deaktiviert werden. Zusätzlich kann das Plugin Embeds und Gravatars deaktivieren. Hier sollte jedoch sichergestellt werden, dass die wirklich nicht gebraucht werden. Wer hier falsche Einstellungen setzt, hat schnell Probleme im Frontend.
Plugins selektiv deaktivieren
Plugins wie Contact Form 7, Tickera oder Easy Table of Contents werden nur auf bestimmten Unterseiten gebraucht, laden jedoch oft auf der gesamten Website. Wer viele Plugins dieser Art nutzt, verliert so einiges an Ladezeit.
Durch ein Plugin wie Perfmatters oder den Plugin Organizer können installierte Plugins komplett oder auf bestimmten Unterseiten deaktiviert werden. Hier empfiehlt es sich zum Beispiel, Contact Form 7 lediglich auf der Kontaktseite laden zu lassen und nicht auf der Startseite. Oder Easy Table of Contents nur auf Artikeln und nicht auf Angebotseiten.
Beachtet aber, dass durch diese Plugins auch wichtige Prozesse deaktiviert werden können. Wird zum Beispiel das WordPress-Backbone deaktiviert, bricht das Frontend zusammen und die Website kann nicht mehr angezeigt werden. Daher sollte hier wirklich nur deaktiviert werden, was nicht gebraucht wird und natürlich nach jeder Änderung getestet werden.
Fazit
Ladezeit ist ein spannendes Thema. Website-Betreiber müssen den Spagat zwischen Leistung und Funktionalität machen, der Nutzer von heute fordert beides. Wer hier standhalten will, sollte zusätzlich zu Standardoptimierungen individuell für seine Website festlegen, wo Optimierungsbedarf besteht. Hier ist das selektive Deaktivieren von Plugins und unnötigen Hintergrundprozessen meist sinnvoll. Was und wo abgeschaltet werden sollte, ist von Website zu Website verschieden.
Wer bisher kein Caching für WordPress nutzt, wird durch Einsatz eines Cache Plugins die Ladezeit enorm verringern. Gehört zu den ersten Schritten wenn es um Optimierung geht.
Brotli wird wohl kaum von Hostern angeboten.
Gzip sollte natürlich aktiviert sein. Bringt schon gute Werte auch wenn es an Brotli nicht rankommt (nutze eigenen Server mit Brotli).
Auf jeden Fall sollten Bilder optimiert werden – bringt bei Nutzung von vielen Bilder eine hohe Einsparung an Ladegröße – z.B. mit TinyPNG oder auch einige Plugins.
Zum Thema „Pagespeed optimieren“ habe ich eine sehr umfangreiche Anleitung vor paar Monaten verfasst. Könnt ihr gerne mal anschauen und natürlich umsetzen:
https://holgerfreier.de/wordpress-pagespeed-guide/
Da hast du recht, Caching ist definitiv eines der Basics.
Brotli wird zwar nicht angeboten, aber wie beschrieben macht es Sinn bei WordPress Brotli über Cloudflare laufen zu lassen.
Freut mich sehr, dass dir der Beitrag gefällt.
Definitiv noch ein paar gute Infos dabei gewesen. Muss aber auch sagen, dass ich denke, dass Caching und so wenig externe Abfragen wie möglich, sowie Bildoptimierung schon 80% des Pagespeeds optimieren dürften. Vor allem reicht es nicht Bilder nur durch Tools komprimieren zu lassen, sondern sie sollten auch vor dem Hochladen oder notfalls in der WordPress Mediathek zugeschnitten werden. Wenn das Bild nur in 600x300px benötigt wird, macht es sehr viel aus, wenn man das Bild trotzdem in 1920px hochlädt :)
Man kann sicherlich den Artikel um ein paar Punkte ergänzen. Optimierung von CSS & JS, LazyLoad, WebP Bilder oder den Einsatz von SVG und so weiter. Ja, eine Webseite sollte schnell sein. Aber man sollte sich auch nicht verrückt machen. Um mal etwas zu pauschalisieren: wenn man bei beispielsweise 2 Sekunden liegt, ist man laut Sistrix schon unter den Top 50% bei deren ausgewerteten Webseiten. Das ist schon okay. Auch für den Nutzer der die Webseite besucht. Unsere Webseite liegt bei ca. 450ms. (Letzter Pingdom Test bei 427ms). Das ist natürlich besser, aber auch nicht die Spitze. Es gibt aber auch noch andere Faktoren, die wichtig sind für die Webseite und Nutzer. Und wenn man begrenzt Zeit hat, sollte man sich Prioritäten stecken und nicht versuchen die „100%“ im Pagespeed zu erreichen :-). Aber cooler Artikel, vorallem die Info mit Brotli. Damit hab ich mich selbst auch noch nicht auseinander gesetzt.