Optimierung der Frontend-Performance in WordPress

WordPress-Turbo: Wie löst man Performance-Probleme im Frontend?
2 Kommentare

Die Optimierung der Ladezeit einer Website ist seit vielen Jahren ein wichtiges Thema – und das zu Recht. Seien wir ehrlich, niemand mag langsame Websites. Auch die geduldigsten Menschen nicht, und Google schon gar nicht. Grund genug, an der WordPress-Performanceschraube zu drehen.

Man darf nicht vergessen, dass in Deutschland, vor allem in den ländlichen Gebieten, die Versorgung mit schnellen Internetzugängen alles andere als gut ist. Unterhält man sich mit Menschen aus dem ländlichem Raum, dann hört man zwar häufig auch über recht schnelle Verbindungen, aber es ist keine Seltenheit zu hören, dass Haushalte effektiv nur 2 Mbit zur Verfügung haben. Man kann sich gut vorstellen, wie spaßig es ist, eine 4+ MB große Seite aufzurufen, wenn einem maximal 250 kB/s Downloadgeschwindigkeit zur Verfügung stehen. Ein weiterer Faktor ist die mobile Nutzung. Auch hier ist die Versorgung mit schnellen Zugängen in vielen Fällen alles andere als zufriedenstellend, und das begrenzte Datenvolumen bei vielen Verträgen macht es um so interessanter, eine möglichst schlanke Website anzubieten.

Fasst man jetzt die gerade genannten Argumente zusammen, dann erkennen Sie, warum die Performanceoptimierung auch bei Ihren Projekten einen hohen Stellenwert haben sollte. Je länger Ihre Website braucht, um vollständig geladen zu werden, umso weniger Besucher werden auf Ihrer Website verweilen, umso weniger Leser werden Ihre Artikel lesen und in den sozialen Netzwerken teilen. Je länger die Website zum Laden braucht, umso höher ist übrigens auch die Abbruchrate bei Bestellprozessen.

Seit vielen Jahren gibt es widersprüchliche Aussagen darüber, ob und vor allem wie stark Google die Ladezeit als Rankingfaktor berücksichtigt. Wenn überhaupt wird sie eher als ein schwächerer Faktor berücksichtigt, daher sollte man bei der Optimierung der Ladezeiten nicht SEO als Hauptaugenmerk aufführen, sondern die höhere Verweildauer auf der Website und die höhere Conversion Rate im Shop. Sollte sich durch die Optimierung ergeben, dass man gegenüber den langsameren Konkurrenten besser positioniert ist, dann kann man diese Tatsache als zusätzliches Geschenk dankend entgegennehmen.

Ein solides Fundament erstellen

Ähnlich wie beim Hausbau sollte man sich auch bei der Ladezeitoptimierung zuerst auf die Grundlagen konzentrieren und ein solides Fundament erstellen. Viele Nutzer suchen zuerst nach irgendwelchen Caching-Plug-ins oder nach Plug-ins, die zum Beispiel JavaScript- und CSS-Dateien zusammenfassen, anstatt sich zuerst auf die einfachen und grundlegenden Maßnahmen zu konzentrieren, die eine vielfach bessere Einsatz-/Ergebnis-Ratio haben. Denn auch bei der Performanceoptimierung gilt das Pareto-Prinzip: Mit wenigen, einfachen Maßnahmen erreicht man einen Großteil der Verbesserung an der Ladezeit. Im Folgenden werde ich einige einfache Maßnahmen vorstellen, die eine große Wirkung entfalten können.

404er-Fehlermeldungen eliminieren

In den letzten Monaten konnte ich Rahmen der Performanceoptimierung an diversen Kundenwebsites zum wiederholten Mal feststellen, dass sich die 404er-Fehlermeldungen – die angeforderte Ressource wurde nicht gefunden (Abb. 1) – sehr negativ auf die Ladezeit der Website auswirken können.

Abb. 1: Eine nicht gefundene Datei erhöht die Ladezeit der Website um ein Vielfaches

Abb. 1: Eine nicht gefundene Datei erhöht die Ladezeit der Website um ein Vielfaches

Fehlfunktionen oder Fehleinstellungen am Theme oder in Plug-ins können dazu führen, dass eine Grafik, eine JavaScript- oder eine CSS-Datei im Quelltext referenziert aber nicht erzeugt wird, und so macht sich der Server auf die Suche nach der vom Browser angeforderten Datei, findet aber logischerweise nichts. Ich hatte Fälle, in denen die Website erst nach 25 Sekunden komplett geladen war, weil eine JavaScript-Datei nicht vorhanden war.

Das Tückische am Problem ist, dass man an der Funktionalität oder am Layout der Website nichts merkt, da die nicht gefundenen Dateien sehr häufig gar nicht notwendig sind.

Und was kann ich dagegen unternehmen?

Wenn sich durch die Einstellungen am Theme oder Plug-in das Problem nicht beheben lässt und auch die Dokumentation oder der Support keine Antwort gibt, dann können Sie sich immer noch mit „Trick 17b“ behelfen. Sie können einfach eine leere CSS- oder JavaScript-Datei oder eine ein Pixel große, transparente Grafik mit dem passenden Namen bereitstellen.

Diese Lösung mag auf den ersten Blick nicht elegant sein, sie löst allerdings auf jeden Fall das Problem mit der hohen Ladezeit. Damit dürften viele Nutzer absolut zufrieden sein, zumindest haben Sie aber Zeit gewonnen um sich um eine elegantere Lösung zu kümmern.

Daher ist es absolut sinnvoll, im Vorfeld etwas mehr Zeit zu investieren und sich auf einer Testinstallation das Plug-in oder das Theme etwas näher anzuschauen, um dieses Problem auf der späteren Liveseite auszuschließen.

Optimierung der Bilder

Seit vielen Jahren sehe ich meine Aussage in praktischer Arbeit immer wieder bestätigt: Eines der größten Potenziale in Bezug auf die Ladezeitoptimierung findet man bei den Bildern und Grafiken einer Website. Hier eine kurze Aufzählung der gängigen Fehler, die man auch im Jahr 2016 auf vielen Websites findet, ganz gleich ob sie von Agenturen oder von einem Hobbyisten umgesetzt wurden:

  1. Bilder werden nicht komprimiert bzw. für den Webeinsatz optimiert. Man kann sogar mit kostenlosen Tools, zum Beispiel IrfanView, Bilder in der Dateigröße ohne erkennbare Qualitätsverluste erheblich verkleinern.
  2. Es wird häufig das falsche Format gewählt. Grob gesagt kann man folgende Regel aufstellen: Für Bilder mit fotografischen Elementen und feinen Verläufen empfiehlt sich .jpg. Für Grafiken mit wenigen Farben oder Screenshots mit viel Text .gif oder, noch besser, das 8-Bit-.png. Für Formen und Logos ist .svg eine sehr gute Alternative.
  3. WordPress kann beim Hochladen Vorschaubilder in verschiedenen Größen erstellen. Einfach mal unter EINSTELLUNGEN | MEDIEN Es ist keine gute Idee, die großen Bilder in HTML zu skalieren, indem man kleinere Maße als Attributwerte angibt (Abb. 2).

Das gute an der Optimierung der Bilder ist, dass sie bereits von den Autoren und Redakteuren durchgeführt werden kann. Nach meiner Meinung gehört die Vorbereitung der Bilder für den Einsatz im Web zu einem guten redaktionellen Arbeitsablauf.

Bereits kostenlose Programme können einiges leisten, und man ist mit ihnen in der Lage, qualitativ gute, aber dennoch in der Dateigröße kleine Bilder und Grafiken zu bekommen. Es muss also nicht zwingend eine teure Grafiksuite her, um die Aufgabe zu meistern.

Wenn auf der Website viele Vorschaubilder zum Einsatz kommen, ist es sinnvoll, dafür auch richtige Vorschaubilder zu generieren – WordPress kann das. Es ist absolut nicht empfehlenswert, ein Foto in hoher Qualität mit den Maßen 1 920 x 1 200 und einer Dateigröße von 1,2 MB hochzuladen, es gleichermaßen im Beitrag und für die verschiedenen Vorschaubildformate zu nutzen und lediglich in HTML zu skalieren. Sie bekommen zwar eine visuell kleinere Grafik, aber dafür zu einem hohen Preis. Das bedeutet konkret, dass Ihr 120 x 120 Pixel Thumbnail eine Dateigröße von 1,2 MB verursacht. Haben Sie dann auf der Startseite acht solcher „Vorschaubilder“, dann kann Ihre Startseite mal locker 10 oder mehr MB „wiegen“. Falls Sie jetzt denken, ich übertreibe, dann muss ich Sie leider enttäuschen, solche oder ähnliche Szenarien sind mir einige Male begegnet. Daher gilt auch hier die Empfehlung: Testen Sie das Theme im Vorfeld ausführlich!

Abb. 2: Würde man die Vorschaugrafik in einem Bildbearbeitungsprogramm oder von WordPress erstellen lassen, dann wäre sie je nach Komprimierung nur 20 bis 30 KB groß

Abb. 2: Würde man die Vorschaugrafik in einem Bildbearbeitungsprogramm oder von WordPress erstellen lassen, dann wäre sie je nach Komprimierung nur 20 bis 30 KB groß

Komprimieren und verbessertes Cachen

Das Komprimieren von Textdateien während der Übertragung und das verbesserte Caching sind Maßnahmen, die einfach durchzuführen sind und in der Regel gute Ergebnisse liefern. Falls Ihr Webhoster nicht bereits die Komprimierung aktiviert hat, können Sie mit folgendem Codefragment in der .htaccess-Datei die Komprimierung von Textdateien aktivieren:

# Die Komprimierung aktivieren
<FilesMatch "\\.(js|css|html|htm|php|xml|svg)$">
  SetOutputFilter DEFLATE
</FilesMatch>

Da man bei einem üblichen redaktionellen Arbeitsablauf die Bilder bereits mit einem Bildbearbeitungsprogramm komprimiert und fürs Web optimiert hat, ist es hier nicht sinnvoll, auch die Bilder zu komprimieren; das würde nur unnötig die Serverressourcen in Anspruch nehmen. Lediglich .svg kann man von dieser Regel herausnehmen, da dieses Grafikformat auf XML – einem Textformat – basiert und somit im Gegensatz zu .jpg oder .png keine Pixel-, sondern eine Vektorgrafik ist.

Nachdem Sie die Komprimierung aktiviert haben, geht es darum, das Caching-Verhalten zu verbessern. Dieser zweite Block verpasst den Dateien im Cache eine zusätzliche Information, sodass der Server die Dateien aus dem Cache direkt lädt, ohne noch einmal mit dem Server zu kommunizieren und dadurch jeweils eine zusätzliche http-Anfrage zu produzieren. Im Fachjargon ausgedrückt: Man verhindert damit bedingte GET-Anfragen.

# cache
<FilesMatch "\.(ico|jpg|jpeg|png|gif|js|css|swf|svg|eot)$">
  ExpiresActive on
  ExpiresDefault "access plus 35 days"
  Header unset ETag
  FileETag None
</FilesMatch>

Sofern sich Dateien der Website, die den aufgezählten Dateitypen aus der zweiten Zeile entsprechen, im Browsercache befinden, so soll der Browser diese Dateien aus dem eigenen Cache laden, ohne vorher noch einmal mit dem Server zu kommunizieren. Das ist deswegen wichtig, weil die Ladezeit einer Website nicht nur die Gesamtgröße der referenzierten Quellen ausmacht, sondern auch die Anzahl der HTTP-Aufrufe, da Browser nur eine begrenzte Anzahl an Aufrufen gleichzeitig abarbeiten können. Die anderen Dateien müssen dann solange im Hintergrund warten. Daher konzentriert man sich bei der Performanceoptimierung nicht nur auf die Verringerung der übertragenen Dateigröße, sondern auch auf die Reduzierung der HTTP-Aufrufe.

In Abbildung 3 sehen Sie Auswirkung des zweiten Codeblocks bei einem wiederkehrenden Besucher, also einem Besucher, der bereits gecachte Dateien der Website im Browser hat.

Abb. 3: Verbessertes Caching im Einsatz; oben ohne den Code, darunter mit

Abb. 3: Verbessertes Caching im Einsatz; oben ohne den Code, darunter mit

Die oberen Codebeispiele verwende ich dort, wo Apache 2 als Webserver zum Einsatz kommt. Wird bei Ihnen nginx oder IIS von Microsoft eingesetzt, dann müssen Sie die entsprechende Dokumentation zu Rate ziehen.

WordPress-Plug-ins

Erst nachdem Sie die vorherigen Punkte abgearbeitet haben, lohnt es sich, sich Gedanken über Plug-ins zu machen, die Ihnen bei der Ladezeitoptimierung Ihrer Website helfen. In vielen Blogartikeln werden sehr unkritisch die zwei bekanntesten Caching-Plug-ins empfohlen: WP Super Cache und W3 Total Cache. Mal davon abgesehen, dass die beiden Plug-ins wahre Schwergewichte sind und eine recht lange Einarbeitungszeit benötigen, sind sie in der Vergangenheit auch unangenehm aufgefallen. Wie zum Beispiel im Fall von W3 Total Cache, bei dem auf eine massive Sicherheitslücke ein Patch folgte, der auf vielen Installationen große Probleme verursachte.

Schlankere und mindestens genauso leistungsfähige Alternativen wären Hyper Cache und Cachify. Falls es etwas kosten darf, dann wäre WP Rocket ein interessante Alternative.

Wenn Sie die Komprimierung und das verbesserte Caching, wie weiter oben beschrieben, auf Ihrem Webserver aktiviert haben, dann müssen Sie, wenn Sie sich für Hyper Cache entschieden haben, nur wenige Schritte durchführen. Damit das Plug-in arbeiten kann, müssen Sie die wp-config.php um den Eintrag define(‚WP_CACHE‘, true); erweitern und dafür sorgen, dass entweder der Ordner /wp-content/ beschreibbar ist, oder Sie erstellen manuell einen Ordner mit dem Namen cache innerhalb von /wp-content/.

Nach der Aktivierung des Plug-ins finden Sie unter EINSTELLUNGEN | HYPER CACHE (Abb. 4) die Möglichkeit, das Plug-in an die eigenen Bedürfnisse anzupassen und den Cache bei Bedarf auch zu leeren.

Abb. 4: Einstellungen von Hyper Cache

Abb. 4: Einstellungen von Hyper Cache

Dadurch, dass die Komprimierung und auch das verbesserte Caching bereits auf dem Server aktiv sind (siehe vorherigen Abschnitt), müssen wir jetzt lediglich die Zeit einstellen, die für die gecachten Seiten gelten soll. 96 Stunden sind in meinen Augen ein guter Wert.

Sobald jetzt Besucher auf Ihre Seite kommen, erzeugt Hyper Cache eine statische HTML-Variante der aufgerufenen Seiten und legt sie im Ordner /wp-content/cache/ ab. Diese Ausgaben werden dann den nachfolgenden Besuchern serviert, was viel schneller und ressourcenschonender vonstattengeht, als wenn der Webserver auch noch die Datenbank kontaktieren muss, um dieselben Inhalte auszugeben.

International PHP Conference

Migrating to PHP 7

by Stefan Priebsch (thePHP.cc)

A practical introduction to Kubernetes

by Robert Lemke (Flownative GmbH)

API Summit 2018

From Bad to Good – OpenID Connect/OAuth

mit Daniel Wagner (VERBUND) und Anton Kalcik (business.software.engineering)

Mit dem Einsatz weiterer Plug-ins in diesem Segment wäre ich vorsichtig. Wenn Sie die Bilder bereits im redaktionellem Arbeitsablauf für den Webeinsatz optimiert haben, dann ergibt es wenig Sinn, ein Plug-in zu installieren, das die Bilder optimiert. So ein Plug-in würde nur Ressourcen in Anspruch nehmen und wenig bis gar nichts erreichen.

Es gibt Plug-ins, die es Ihnen ermöglichen, mehrere JavaScript-Dateien oder mehrere CSS-Dateien zu jeweils einer Datei zusammenzufassen, um so HTTP-Aufrufe einzusparen. Meine Erfahrung ist die, dass man in viel zu wenigen Fällen positive Ergebnisse erreichen kann. Häufig greift diese Maßnahme nicht oder es gibt Fehlfunktionen an der Website.

Hilfreiche Tools und ein paar abschließende Worte

Es gibt Unmengen an hilfreichen Werkzeugen, die Sie bei der Performanceoptimierung unterstützen. Das erste hilfreiche Tool ist der Browser. So bietet neben Chrome von Google auch der Mozilla Firefox sehr nützliche Entwicklertools. Ich persönlich bin sehr von den Werkzeugen in der Firefox Developer Edition angetan. Die erste und die dritte Abbildung aus diesem Artikel stammen aus den Entwicklertools dieser speziellen Firefox-Version.

Um herauszufinden wie es um die Ladezeit Ihrer Website steht, eignen sich Dienste wie GTmetrix und Pingdom sehr gut. Um nachzusehen, ob eine bestimmte Website Komprimierung (Gzip, Deflate) aktiv hat, kann man GIDZipTest nutzen.

Ein weiterer nützlicher Dienst ist PageSpeed Insights von Google. Aber hier bin ich der gleichen Meinung wie der Autor dieses Blogartikels: Die Hinweise dieses Tools sollte man sich zwar zu Herzen nehmen, sie aber nicht blind und ohne nachzufragen – und vor allem – ohne abzuwägen befolgen. Speziell der Hinweis „JavaScript- und CSS-Ressourcen, die das Rendering blockieren“, den das Tool häufig bemängelt, ist im Nachhinein so gut wie gar nicht zu lösen.

Viel wichtiger als die kritiklose Befolgung allgemein gehaltener Tipps egal welches Tools, ist es zu beobachten, ob eine konkrete Maßnahme auch wirkliche Verbesserung an der Ladezeit gebracht hat und ob die durchgeführte Maßnahme auch ein sinnvolles Kosten-Nutzen-Verhältnis hat: wie viel Zeit/Geld kostet mich diese Maßnahme, muss ich auf eine wichtige oder eher weniger wichtige Funktionalität verzichten etc.?

Und zu guter Letzt wollte ich Sie darauf hinweisen, dass manch eine Maßnahme, wie zum Beispiel das Caching, so nützlich sie auch sind, in der Praxis auch den einen oder anderen Nachteil mit sich bringen.

Sollten Sie sich zum Beispiel wundern, warum eine Änderung am Footer, Sidebar oder Header der Website nicht bei den Besuchern ankommt, schauen Sie einfach, ob Sie den Cache der Website auch wirklich geleert haben oder ob Sie es nur vorhatten –bevor Sie anfangen an den eigenen Fähigkeiten zu zweifeln.

Entwickler Magazin

Entwickler Magazin abonnierenDieser Artikel ist im Entwickler Magazin erschienen.

Natürlich können Sie das Entwickler Magazin über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist das Entwickler Magazin ferner im Abonnement oder als Einzelheft erhältlich.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

2 Kommentare auf "WordPress-Turbo: Wie löst man Performance-Probleme im Frontend?"

avatar
400
  Subscribe  
Benachrichtige mich zu:
Sören
Gast

Eine super Zusammenfassung, mir ist neu das auch Ressourcen der Webseite eine 404-Fehlermeldung erzeugen können.Meiner Erfahrung kann mit einer ordentlichen Komprimierung von Bildern einiges an erreichen. Ich habe auch mit einer akutellen PHP Version viel erreicht, ein Beispiel habe ich auch hierhttps://www.onlinesolutionsgroup.de/blog/ladezeiten-optimieren/ gefunden

Rolf
Gast

Hallo Vladimir, deine Zusammenfassung bringt es perfekt auf den Punkt. Mit diesen Hinweisen kann man seine WordPress Seiten sehr gut optimieren. Zu erwähnen wäre noch das nutzen eine CDN sofern man die Mittel dafür hat. Auch das Optimieren der Bilder über ein Plugin wie ShortPixel Image Optimizer ist sehr zu empfehlen. Sowie weiteres Optimieren über Autoptimize bringt sehr viel. MFG

X
- Gib Deinen Standort ein -
- or -