So geht’s: Ladezeitenoptimierung für WordPress-Seiten

Zu unterscheiden sind dabei drei Bereiche: Optimierungen am Server, der Bilder und dem Theme:

1. Optimierungen am Server

Lange Ladezeiten von WordPress Seiten sind zu 80% auf die Verarbeitung des PHP-Codes zurückzuführen, die restliche Verzögerung auf die Datenbank.
Im Gegensatz zu PHP 5.6 bietet PHP 7 einen spürbaren Geschwindigkeitsvorteil. Noch besser ist es allerdings, wenn bei den Seitenaufrufen kein PHP ausgeführt wird. Daher setzt die PageSpeed Optimierung für WP auch bei der Vermeidung der Ausführung von PHP-Codes an; durch statische Seiten oder Caching.

Abbildung 1: Das Verarbeiten des PHP Codes ist für den größten Teil der serverseitigen Verzögerung verantwortlich. © Jan Thiel von https://wlwp.eu

Statische WordPress Seiten

Zahlreiche Unternehmen, Affiliates und Vereine nutzen WordPress nicht als interaktive Blogplattform, sondern als CMS. Funktionen wie Kommentare, Ping- und Trackbacks sind dabei deaktiviert, Seiteninhalte werden selten aktualisiert und neue Seiten fast nicht angelegt. Für solche Fälle ist das Plugin Simply Static interessant. Mit Simply Static werden statische Kopien der WordPress Seite angelegt und in einem Verzeichnis gespeichert. Bei Seitenaufrufen wird dadurch kein PHP Code verarbeitet und Anfragen an die Datenbank bleiben aus.

Mögliche Konfiguration: WP läuft auf einer Subdomain mit Verzeichnisschutz (oder lokal auf dem Rechner) und die Domain zeigt auf das Verzeichnis mit den statischen Kopien der WordPress Seite.

Caching

Alle anderen Seiten inklusive WooCommerce Shops setzen statt auf statische Seiten auf Caching (Anmerkung zu WooCommerce: Die Bereiche Cart, My Account und Checkout werden vom Caching ausgeschlossen). Dabei werden aus den Inhalten der Datenbank und dem PHP Code auf dem Server HTML Seiten erstellt und abgespeichert: Anstatt für jeden Seitenaufruf die HTML Seiten erneut zu erstellen, erhalten User die bereits erzeugte und gespeicherte HTML Seite.

Zum einen antwortet Dein Server dadurch schneller auf die Anfragen der User, zum anderen verkraftet er mehr Besucher, da nicht mehr für jeden Seitenaufruf die Datenbank abgerufen wird und der PHP Code läuft. Für die meisten WordPress-Seiten reicht eine einfache und solide Caching-Lösung wie Cache Enabler. Wer es gerne komplexer mag und alle Feinheiten optimieren möchte, kommt mit W3 total cache ans Ziel. Alternativ zu Plugins bieten spezialisierte WordPress Hoster Nginx Caching, das die Verwendung von WordPress-Erweiterungen unnötig macht.

Browser-Cache

Noch einen Schritt weiter geht das Browser-Caching. Hier werden statische Ressourcen beim erneuten Seitenaufruf nicht mehr beim Server angefragt, sondern viel schneller aus dem Browser-Cache des Users geladen. Das funktioniert mit beiden bereits vorgestellten Caching Plugins.

Gzip oder mod.deflate

Mittels gzip / deflate werden komprimierbare Seiteninhalte (HTML, CSS und JS) vor der Übertragung zwischen Server und User komprimiert, sodass weniger Daten übertragen werden. Aktivierung erfolgt hier wieder mittels .htaccess / (nginx: ngx_http_gzip_module, apache: mod_deflate) oder per Plugin.

keep-alive

Gerade Seiten mit HTTPS profitieren von keep-alive. Ohne keep-alive werden für alle Ressourcen einer Seite neue Verbindungen zwischen Server und User aufgebaut. Bei Seiten mit HTTPS dauert dies etwas länger, da vor jedem Verbindungsaufbau ein TLS-Handshake durchgeführt wird und Server und Browser sich auf die Verschlüsselung einigen. Mit keep-alive bleibt eine Verbindung zwischen Server und Browser offen und wird genutzt, um alle Ressourcen zu übertragen. Damit muss der TLS-Handshake nur einmal durchgeführt werden.

Abbildung 2: Nur ein TLS-Handshake für alle Ressourcen die vom Server ausgeliefert werden.

Requests reduzieren

Bis HTTP/2 ist die Anzahl der parallelen Verbindungen zwischen Server und Browser ein Flaschenhals, da deren Anzahl je nach Browser stark beschränkt ist.
Um dem entgegenzuwirken, wurden statische Elemente beispielsweise von Subdomains abgerufen, CSS und JavaSript-Dateien verkettet. Mit dem Standard HTTP/2 ist das nicht mehr notwendig, da zwischen Server und Browser weit mehr parallele Verbindungen aufgebaut werden können.

Verketten von CSS und JS

Wer CSS oder JS Dateien bequem über das WordPress Backend verketten möchte, dem hilft W3 total cache weiter. Als erstes wird auf der Unterseite General settings der Minify mode-Radiobutton von auto auf manual gestellt. Anschließend werden auf der Unterseite Minify die zu verkettenden Ressourcen hinterlegt.

Einfach geht das über den Test von webpagetest.org: Die unter Performance Review aufgeführten (nicht über CDN ausgelieferten) Ressourcen werden per Copy & Paste eingefügt und festgelegt, an welcher Stelle im Code sie eingebunden werden sollen.

Abbildung 3: Mit W3 total cache werden Javascript oder CSS Dateien verkettet und deren Position im Code bestimmt.

DNS-Prefetch, Preconnect und Subresource vs. selbst hosten

Extern bereitgestellte Ressourcen wie zum Beispiel Webfonts oder das Analytics-Tracking von Google verlangsamen die Ladezeit für Seitenbesucher zusätzlich, da neben dem DNS-Lookup der Seite auch die IP-Adressen der zuliefernden Server aufgelöst werden müssen. Dieser Prozess wird beschleunigt, indem dem Browser schon im HTML Head mitgeteilt wird, welche anderen Domains für die Darstellung der Seite benötigt werden - oder die Inhalte direkt selbst gehostet werden:

Abbildung 4: Caching und selbstgehostete Fonts sorgen für kurze Ladezeiten.

Bei den Fonts ist darauf zu achten, nur jene Schriftstärken zu laden, die auch im Theme verwendet werden (beziehungsweise bei Icon-Fonts nur jene Icons, die auch eingebunden sind).

Abbildung 5: Mit preconnect werden die nötigen Verbindungen zu anderen Servern frühzeitig aufgebaut.

Der Download externer Ressourcen wird beschleunigt, wenn die Verbindung zu den Servern frühzeitig aufgebaut wird. Dazu werden die Domains im Head der Seite mit dem Attribut preconnect eingebunden:

WordPress Hosting

Mittlerweile bieten fast alle deutschen Hoster ein "WordPress Hosting" an. In der Praxis bedeutet das lediglich, dass neben einer Datenbank und ausreichend PHP-Memory auch eine 1-Klick-Installation bereitgestellt wird. Spezielles WordPress-Hosting mit angepassten Sicherheitskonzepten, Performance-Anpassungen und bequeme Update-Services bieten: wlwp.eu und raidboxes.de.

Abbildung 6: Dieselbe WordPress Seite lädt auf einem dedizierten WordPress Hosting merklich schneller als im Shared Hosting.

Für Seiten, die User in Deutschland ansprechen, bietet es sich an in Deutschland oder näherer Umgebung zu hosten. Die größten deutschen Internetknoten liegen in Frankfurt und Karlsruhe, aber auch Hoster in Aachen können mit sehr kurzen Time to First Byte überzeugen. Letztendlich kommt es auf die jeweilige Anbindung des Rechenzentrums und die Serverkonfiguration an.

Content Delivery Network (CDN)

Ein CDN brauchen die wenigsten, und das Photon CDN von WordPress keiner, der Leser in Deutschland hat - denn deren Server stehen in USA und verlangsamen den Seitenaufbau für User aus Europa.

2. Optimierung der Bilder

In der Regel verursachen Bilder das größte Volumen auf einer Webseite und deshalb gilt ihnen besondere Aufmerksamkeit bei der Optimierung der Ladezeit. Hierfür können folgende Maßnahmen nützlich sein:

Bildmaße optimieren

Wer alleine an seinen Seiten arbeitet oder strikte Prozesse im Unternehmen etabliert hat, profitiert von Automatisierung. Anstatt Bilder vor dem Upload auf die korrekten Maße zu verkleinern, kann das auch WordPress direkt erledigen. Dazu wird das Plugin Imsanity einmalig mit den für das Theme relevanten Bildgrößen gefüttert und ab sofort werden alle neu hochgeladenen Bilddateien vor dem Abspeichern auf die korrekte Größe gerechnet. Das spart Arbeit und stellt sicher, dass dieser Schritt nicht "vergessen" wird.

Bilder komprimieren

Von den zahlreichen Bildkomprimierungsanbietern mit WordPress-Integration, wie Optimus oder EWWW Image Optimizer, erzielt keiner bessere Ergebnisse als das kostenpflichtige kraken.io. In Kombination mit Imsanity werden Bilder erst auf die korrekten Maße des Themes geschnitten, dann auf die verschiedenen Größen gerechnet (Vorschaubilder), via kraken.io optimiert und schließlich auf dem Server abgespeichert: Der perfekt automatisierte Workflow für optimierte Bilder in WordPress.

Responsive Images

Responsive Images funktionieren out-of-the-box mit WordPress nur mittelmäßig. Wer Perfektionist ist und einiges an Zeit investieren möchte, dem empfehle ich das ebook von Matthias Schwindt. Dort wird praxisnah erklärt, wie responsive und retina images mit WordPress umgesetzt werden können.

Lazy-load

Below the fold Bilder werden bei Bedarf per lazy-load nachgeladen. Dafür sind die Plugins Rocket Lazy Load und a3 Lazy Load, das auch Videos unterstützt, bewährt. Die Funktion lohnt sich nur bei vielen Bildern auf der Seite, wie es zum Beispiel bei One-Pagern häufig der Fall ist.

3. Optimierung des Theme

WordPress Themes sind oft mit unnötigen und nicht verwendeten Funktionen überladen. Das liegt zum einen an den mächtigen Frameworks wie Bootstrap, die nur in wenigen Fällen auf die tatsächlich verwendeten Funktionen und Klassen reduziert werden. Zum anderen an den Usern, die bei ihrer Kaufentscheidung immer mehr Features im Theme erwarten und am Ende doch nur die Hälfte der Funktionen nutzen.

Wie wenig Code tatsächlich genutzt wird, lässt sich mit https://unused-css.com/ in wenigen Schritten ermitteln. Dort kannst Du einfach die Sitemap-URL eingeben, damit alle Seiten geprüft werden. Wer Themes selbst erstellt und dabei auf Frameworks wie Bootstrap zurückgreift, kann den Code mit folgendem Customizer schlanker halten: http://getbootstrap.com/customize/

Statische Social Buttons

Neben den Datenschutzbedenken ist auch der negative Effekt auf die Seitenladezeit ein Problem vieler Social Buttons, die javascript laden. Schneller und datenschutzkonform können statische Sharing-Buttons wie hier bei fastwp beschrieben oder über ein Plugin wie Shariff Wrapper eingebunden werden.

Above the fold CSS

Für das critical path rendering wird das CSS, welches für den sichtbaren Bereich above the fold benötigt wird, im Head der Seite eingebunden und die restlichen Stylesheets im Body nachgeladen.

Beim Ermitteln des above the fold CSS hilft das kostenfreie Tool criticalpathcssgenerator oder die komfortablere Premiumvariante unter criticalcss.com.
Wer sich Aufwand beim Anpassen des Themes sparen möchte, bindet das kritische CSS über das Plugin Autoptimize ein, das auch als Caching-Plugin gute Dienste verrichtet.

Accelerated Mobile Pages (AMP)

Die Meinungen zu AMP gehen weit auseinander, dabei ist das Prinzip so simpel wie überzeugend: "Verzichte auf unnötige Funktionen und die unzähligen Trackingpixel - insbesondere bei mobilen Seiten."

Abbildung 7: Ressourcen von 44 Domains führen zu langen Ladezeiten.

Mit AMP wird die Seite auf den wesentlichen Inhalt reduziert. Dies kann sich sehr positiv auf die Seitenladezeit auswirken.

Wer AMP mit WordPress umsetzen möchte, setzt auf das offizielle AMP Plugin von Automattic und kann das Erscheinungsbild der AMP-Seite mit zwei Erweiterungen an die Farben des Themes anpassen: Glue for Yoast SEO & AMP (empfehlenswert für alle die WordPress SEO by Yoast nutzen) oder Pagefrog (das auch Facebook Instant Articles unterstützt). Wer noch mehr über AMP erfahren möchte, für den hat Philipp Roos hier im Magazin eine gute Übersicht parat.

Fazit

Die Ladezeit von WordPress-Seiten lässt sich mit Hilfe der oben aufgeführten Tipps auf ca. ein bis zwei Sekunden reduzieren. Dazu sind lediglich statische beziehungsweise gecachte Seiten, optimierte Servereinstellungen, komprimierte Bilder und ein schlankes Theme nötig.