Monatsarchiv August 2020

VonDr.-Ing. Erik Neitzel
Performance-Optimierung von WordPress-Seiten

Die Geschwindigkeit von Webseiten ist von zunehmender Bedeutung für die Rankings, die eine Webseite von Google zugewiesen bekommt. Um die Platzierungen der eigenen Webseite nachhaltig zu erhöhen und so ihre Sichtbarkeit zu steigern ist eine Performance-Optimierung von zunehmender Wichtigkeit. Warum ist das so und was kann man konkret tun?

Motivation für möglichst geringe Seitenladezeiten

Jeder Nutzer möchte die von ihm angewählten Webseiten in möglichst kurzer Zeit betrachten können. Google adressiert dieses Akzeptanz-Kriterium mit höheren Rankings für Webseiten, die über geringe Seitenladezeiten verfügen.

In einer BBC-Studie zeigte sich, dass mit jeder Sekunde zusätzlicher Wartezeit je 10% mehr der Nutzer die Seite vorzeitig verlassen. Dies ist schon im Desktop-Bereich ein grundsätzliches Thema.

Performance und Platzierungen

Geschwindigkeit und Platzierung

Spätestens jedoch mit der so starken Verbreitung von Mobilgeräten, welche nur noch über eine geringe Bandbreite verfügen, wird der Unterschied zwischen schnell und langsam ladenden Webseiten sehr deutlich.

Was also kann ein Webseiten-Betreiber oder gar SEO tun, um seine Webseite möglichst ohne Verlust von Funktionalität zügiger laden zu lassen? Dieser Frage nähern wir uns mit dem Fokus auf WordPress-Seiten in diesem Artikel genauer.

Was ist Performance?

Zunächst zum oft zitierten Begriff der Performance. Was bedeutet es genau? Streng genommen ist es ein Synonym für Leistung. Leistung wiederum ist in der Physik die verrichtete Arbeit in einer bestimmten Zeit.

Leistung = Arbeit / Zeit

Was sagt uns das?

Wie kann man die Performance grundsätzlich erhöhen?

Um die Performance einer Webseite zu steigern, könnte man demnach drei Dinge tun:

  1. Die zu verrichtende Arbeit verringern, damit weniger Arbeit pro Zeiteinheit verrichtet werden muss
  2. Die Infrastruktur-Ressourcen erhöhen, damit mehr Arbeit pro Zeiteinheit verrichtet werden kann
  3. Beide der vorgenannten

Tatsächlich kümmern wir uns als SEO sowohl um die Verringerung der zu verrichtenden Arbeit, als auch um die Erhöhung des Durchsatzes verrichteter Arbeit gleichermaßen.

Doch wie genau kann das von statten gehen? Hierzu ist ein Blick auf die einzelnen Komponenten einer Webseite im Allgemeinen und WordPress im Speziellen sinnvoll.

Die Architektur moderner Webseiten

Ein zeitgemäßer Webauftritt umfasst folgende Ebenen:

  1. Server-Hardware (CPU, Arbeitsspeicher, Festplatten)
  2. Webserver-Software (Apache, nginx, u.a.)
  3. PHP-Ebene (Einstellungen innerhalb der php.ini)
  4. Datenbank-Ebene (MySQL, Oracle, u.a.)
  5. Content Management System (CMS) (WordPress, Typo3, etc.)
  6. Plugins innerhalb des CMS (WooCommerce als Shop-System, etc.)
Performance-Ebenen

Web-Architektur-Modell mit CMS: Performance-Optimierung auf allen Ebenen

Die Ebene der Plugins können wir unterscheiden in:

  1. Plugins, die Funktionalität für den Besucher der Webseite bereitstellen (Shops, Umfragen, Foren, etc.)
  2. Plugins, die Funktionalität für den Betreiber der Webseite bereitstellen (SEO-Plugins, Browser Cache Plugins, Bild-Optimierungs-Plugins, etc.)

Letztere können einen Performance-Mehrwert bieten. Hierüber werden wir später noch genauer sprechen. Doch zunächst soll es uns darum gehen, was etwaige Performance-Plugins leisten und warum dies eine Verbesserung darstellt. Es wird aber gleichwohl auch automatisch deutlich, wo die Grenzen von Performance-Plugins liegen. So wird dir als SEO greifbarer, was für die nachhaltige Geschwindigkeitsverbesserung deiner Webseite notwendig ist.

Die Ebenen der Performance-Optimierung

Analog zu den Architektur-Ebenen weiter oben können wir folgende Ebenen zur Erhöhung der Performance einziehen:

  1. Server-Hardware-Optimierung: Erhöhung der Ressourcen des Webservers (CPU mit höherer Taktrate und/oder mehreren Kernen, größerer Arbeitsspeicher, schnellere Festplatten, beispielsweise Solid State Drives)
  2. Webserver-Optimierung: Aktivierung von Modulen und Optionen auf Webserver-Ebene (später erläutert)
  3. PHP-Optimierung: Einstellungen innerhalb der php.ini (beispielsweise Aktivierung von Transfer-Kompression, u.a.)
  4. Datenbank-Ebene: Nutzung von Möglichkeiten zur Durchsatz-Erhöhung von Datenbankoperationen (beispielsweise Vorhalten einer Read Replica)
  5. CMS-Ebene: Etablierung eines schlanken Themes / Templates
  6. Plugin-Ebene: Deaktivierung aller nicht benötigten CMS-Plugins, Nutzung von Performance-Plugins, korrekte Einstellungen innerhalb aller Optimierungsplugins

Die höhere Ebene beeinflusst hierbei stets alle darunter liegenden mit. Daraus ergibt sich automatisch, dass Performance-Plugins lediglich auf CMS-Ebene greifen können und Operationen oberhalb des CMS nicht beschleunigen können. Beispielsweise kann ein Plugin nicht für die Erhöhung von Server-Ressourcen sorgen oder fehlkonfigurierte Server- oder PHP-Einstellungen ausgleichen, da ein jedes Plugin selbst auf sie angewiesen ist, um zu funktionieren.

Plugins sind in direktem Sinne von der korrekten Grundkonfiguration des Gesamtsystems abhängig. Anschließend können Plugins für die Optimierung dessen sorgen, was als Webseite an den Nutzer ausgeliefert wird. Es lohnt sich daher eine Optimierung auf allen vorbezeichneten Ebenen, um die Ladezeit der eigenen Seite effektiv zu verringern. Plugins allein genügen nicht.

Wir werden nun auf die einzelnen Optimierungsebenen im Detail eingehen.

Die Auswahl performanter Server-Infrastruktur

Zunächst liefert schon die Bezeichnung der ersten Optimierungsebene die Begründung dafür, weshalb Webseiten, insbesondere komplexe CMS wie WordPress, nicht auf fremd gehosteten Servern wie wordpress.com angemietet werden sollten.

Auch wenn man hier schnell zu einem Ergebnis kommt und wenig Konfigurationsarbeit leisten muss, liegt genau darin eben der Nachteil: man hat anschließend keinerlei Einfluss auf die Konfiguration.

Wer keinen Server in seinem Arbeitszimmer hinstellen oder einen aufwändig zu betreuenden Root-Server anmieten möchte, dem sei ein Mittelweg empfohlen. Das Mieten eines gut ausgestatteten Managed-Servers muss nicht teuer sein. Die Firma Hetzner liefert hier sehr günstige und hoch performante Server-Tarife. Auch im Anschluss lassen sich diverse Anpassungen an der Server- und PHP-Konfiguration vornehmen.

Konkrete Empfehlung

Es empfiehlt sich ein Server mit mindestens folgenden Hardware-Charakteristika:

  • CPU beispielsweise Intel® Xeon® E5-1650 v2 Hexa-Core
  • Arbeitsspeicher mindestens 64 GB DDR3 ECC
  • Festplatte beispielsweise 2 x 500 GB SSD
  • Netzwerk: 1 GBit/s-Port Anbindung mit garantierter Bandbreite

Die Optimierung der Webserver-Umgebung

Auf Ebene des Webservers empfehlen sich eine Reihe von Ausstattungsmerkmalen und Erweiterungen, welche die Auslieferung des vom Webserver an den Browser des Clients gesendeten Daten verringern und beschleunigen können.

Konkrete Empfehlung

Es empfiehlt sich ein Webserver mit folgender Software-Ausstattung:

  • Apache mit Möglichkeit für folgende Erweiterungen: mod_http2, mod_deflate, mod_brotli sowie mod_pagespeed
  • PHP5 und PHP7
  • MySQL mit verwalteter Backup-Funktionalität oder wahlweise Nutzung externer Datenbanksysteme wie dem Relational Database Services (RDS) der Amazon Web Services (AWS)
  • SSH-Zugang
  • Integrierte Backup-Funktionalität für Backup des Webspaces

Die Auswahl optimaler PHP-Einstellungen

Eng verwoben mit der Ebene des Webservers ist die auf dem Server genutzte Erweiterung des Hypertext Precompilers, kurz PHP, welche für die dynamische Generierung von HTML-Output auf Basis von Rechen- und Datenbankoperationen zuständig ist.

Die Charakteristika der PHP-Ebene lassen sich beispielsweise über die php.ini konfigurieren. Auch die auf dem Server laufenden PHP-Skripte selbst können einige Einstellungen verändern.

Es empfiehlt sich die Aktivierung folgender PHP-Erweiterungen, um grundliegende Funktionalitäten bereit zu stellen, welche die Ausführung der PHP-Skripte beschleunigen oder die über sie generierte Datenmenge verringern kann.

Konkrete Empfehlung

Die Aktivierung folgender Erweiterungen ist anzuraten:

  • APCu
  • OPcache

Weitere server- und PHP-seitige Anpassungen sind sinnvoll, welche die Ebene des über den Server ausgelieferten Contents betreffen. Hierauf soll jedoch erst weiter unten eingegangen werden.

Die Optimierung der Datenbank-Umgebung

Auf Ebene des Datenbanksystems gilt es, die später durch das CMS gelesenen (und unter Umständen durch den Besucher des CMS-Frontends geschriebenen) Datenbestände performant zugreifbar zu machen.

Konkrete Empfehlung

Es empfiehlt sich die Nutzung von Möglichkeiten zur Durchsatz-Erhöhung von Datenbankoperationen, beispielsweise durch Vorhalten einer Read Replica. Diese kann beispielsweise in gehobenen Infrastrukturen wie dem Relational Database Services (RDS) der Amazon Web Services (AWS) als Option hinzu gebucht werden.

Ferner sind selbst erstellte Skripte so zu entwickeln, dass unnötige Zugriffe auf die Datenbank unterbleiben. Das Übertragen von PHP-rechenintensiven Auswertungen in das Datenbanksystem kann wiederum einen Performance-Vorteil bedeuten, da sich die Datenmenge verringert, die aus der Datenbank gelesen und anschließend aufbereitet werden muss.

WordPress Performance-Tuning

Ein Content Management System wie WordPress dient im Wesentlichen der Bereitstellung der Funktion zur Trennung von Layout und Content einer Webseite oder eines Blogs.

Egal welche Inhalte (Texte, Bilder, Videos, etc.) dein Blog hat, er kann durch Auswahl oder Entwicklung eines anderen Themes stets vollkommen unterschiedlich dargestellt werden (neue Farbgebung, neue Position von Menüs, Widgets, Sidebars, Header, Footer, Favicon und vieles mehr).

Diese Trennung von Layout und Content ist eine sehr wichtige Grundvoraussetzung im Kampf gegen Performance-Einbußen. So kannst Du Optimierungen am Theme vornehmen, ohne deine Inhalte in Gefahr zu bringen.

Was dennoch passieren kann ist jedoch, dass Du durch Fehl-Anpassungen deines Themes die Darstellung deines Contents negativ beeinflusst.

Auch wenn wir gleich auf Plugins und ihre mächtigen Möglichkeiten zur Performance-Optimierung eingehen werden, so sei an dieser Stelle bereits gesagt, dass der unachtsame Umgang mit den Einstellungen von Performance-Plugins grundsätzlich eher Nachteile bei sowohl der Geschwindigkeit als auch der Darstellung des Themes haben kann.

Aus diesem Grund wollen wir nachfolgend lieber einmal “zu Fuß” beschreiben, welche konkreten Handlungen Vorteile bei der zügigen Auslieferung einer Webseite haben können und warum. Folgendes Video kann dir an dieser Stelle als zusätzliche Motivation und Informationsquelle darüber dienen, warum solche Anpassungen wichtig sind, und wie Du sie durchführen kannst.

Ausgangszustand als Optimierungsreferenz erfassen

Im Zuge der Optimierung für Performance auf CMS-Ebene steht stets die Frage im Raum: was kann ich weg lassen? Um diese Frage zu beantworten ist natürlich wichtig zu klären: was lädt bislang überhaupt mit? Hier kannst Du folgende Tools nutzen:

  1. https://tools.pingdom.com
  2. https://www.webpagetest.org
  3. Google PageSpeed Insights
  4. SERPBOT Performance Checker
  5. GTMetrix

Ist der derzeitige Performance-Status deiner Webseite einmal erfasst, kannst Du dich an die Beschleunigung von Theme und Content deiner WordPress-Seite machen.

Beschleunigung des WordPress-Themes

Manuelle Maßnahmen zur Anpassungen deines Themes sind von hier an insbesondere folgende:

  1. Nutze nur die Cascading Style Sheet (CSS)-Definitionen, die zur Darstellung deiner Webseite zwingend notwendig sind. Besonders komplexe Funktions-Plugins wie WooCommerce oder OptimizePress legen Unmgenen neuer Stil-Definitionen fest, die nicht zwangsläufig benötigt werden. Dünne daher zumindest die Stil-Definitionen deines genutzten Themes aus so weit Du kannst.
    Achtung: Nutze daher stets die Funktion zur Erstellung von Child-Themes, um dein Basis-Theme nicht zu gefährden und wartbar zu machen. Andernfalls kannst Du keine Updates mehr für dein Basis-Theme durchführen oder verlierst alle Anpassungen wieder, die Du vorgenommen hast.
  2. Lade nur Skripte (wie JavaScript), die Du auch tatsächlich benötigst. Oft laden Themes prophylaktisch Skripte mit, die Theme-Funktionalitäten bereitstellen, die Du nicht zwangsläufig aktiviert hast. Beispiele sind Slider, komplexere Kontaktformulare oder Video-Player. Um Skripte nicht zu laden, die bislang geladen werden, kannst Du in die functions.php deines Themes gehen und bestimmten Skripten explizit das Laden verbieten. Siehe hierzu die Funktionen wp_deregister_script und wp_deregister_style
  3. Theme-Dateien (wie CSS- und Skript-Dateien) sind statisch und ihre Auslieferung kann durch Caching auf Server- und Browser-Ebene beschleunigt werden. Für die Browser-Ebene sollte ein Cache-Validator angegeben werden.
  4. Minifiziere alle CSS- und Skript-Dateien. Zeilenumbrüche, Absätze, Kommentare, Tabulatoren und Leerzeichen sind für die Ausführung nicht benötigte Daten und verlangsamen die Auslieferung. Hierzu kannst Du beispielsweise https://www.minifier.org/ oder https://csscompressor.com/ oder https://jscompress.com/ verwenden.
  5. Kombiniere verstreute CSS-Dateien und Skript-Dateien zu je einer zentralen Datei, um unnötigen Anfrage-Overhead zu reduzieren.
  6. Einige Skripte können versetzt geladen werden. Dies sollte vorsichtig passieren, da die Funktionalität deiner Webseite unter Umständen eingeschränkt werden kann, wenn voneinander abhängige Skripte zu spät geladen wurden.
  7. Kleine CSS-Definitionen und Skriptinhalte sollten inline (innerhalb des HTML-Codes) definiert werden, um unnötige Netzwerk-Anfragen und Datei-Ladezeiten zu reduzieren.
  8. Verwende zur Auslieferung statischer Dateien wie CSS- und Skript-Dateien nach Möglichkeit ein Content Delivery Network (CDN). Hier kommt beispielsweise Amazon CloudFront der AWS in Frage.

Beschleunigung der Auslieferung des Contents

  1. Liefere Bilder in der Größe aus, in der sie auch dargestellt werden. Es gibt keinen Grund ein Bild mit höherer Auflösung auszuliefern als letztlich für ihre Darstellung erforderlich ist. Die letztlich dargestellte Bildgröße sollte zudem explizit im <img>-Tag definiert werden.
  2. Lade nur die Bilder automatisch, die durch Scrollen des Nutzers in den Viewport des Browsers gelangen. Im Normalfall laden sämtliche Bilder einer Seite vollständig bis zum letzten Bild. Dies verlangsamt besonders bei großen Bilddateien das Laden der Webseite enorm. Hier möchtest Du unter Umständen ein Plugin nutzen; hierzu kommen wir gleich.
  3. Optimiere alle in deinen Artikeln verwendeten Bilder durch Kompressionsverfahren, ohne an sichtbarer Qualität einbußen zu müssen. Hierzu kannst Du beispielsweise tinyjpg.com oder ezgif.com verwenden.
  4. Verwende zur Auslieferung deiner Bild-Dateien nach Möglichkeit ein Content Delivery Network (CDN). Hier kommt beispielsweise Amazon CloudFront der AWS in Frage.

Plugin-Tipps für WordPress

Viele der zuvor erwähnten Funktionen werden durch verschiedene Plugins stark vereinfacht, die hier nachfolgend näher beschrieben werden sollen.

Doch zunächst ein Wort zu Plugins im Allgemeinen. Es gilt: Je weniger, desto besser. Wird ein Plugin nicht zwingend benötigt, deaktiviere es. (Aus Sicherheitsgründen solltest Du es sogar löschen.)

Einige der Daten der Plugins, die übrig bleiben, gehören im Regelfall ebenso optimiert wie das Theme, das Du verwendest. Doch an dieser Stelle möchten wir dir nicht empfehlen, Änderungen an deinen Plugins vorzunehmen.

Vielmehr solltest Du diese Aufgabe einem weiteren Plugin überlassen, das speziell zur Optimierung von Performance konzipiert ist. Darin gilt es weise Einstellungen zu wählen und nach jedem Schritt zu testen, ob deine Seite sich visuell und funktionell noch so verhält, wie Du es erwartest.

Konkrete Empfehlung

Es empfiehlt sich der Einsatz eines der folgenden Performance-Plugins:

  1. WP Fastest Cache
  2. W3 Total Cache
  3. Pagespeed Ninja
  4. u.v.m.

Denke bitte daran, dass insbesondere die Manipulation von Skripten (beispielsweise zeitversetztes Laden, aber auch schon das Minifizieren des Quellcodes) dazu führen kann, dass bestimmte Funktionen deiner Seite sich nicht mehr so verhalten wie gedacht.

Du solltest daher unbedingt nicht nur auf optische Veränderungen prüfen, sondern nach jeder neuen Einstellung auch sämtliche Funktionen noch einmal testen (beispielsweise die Durchführung eines Bestellvorgangs in deinem Shop-System). Denke hier daran, den Seiten-Cache sowie deinen eigenen Browser-Cache vor jedem Test zurück zu setzen, da Du sonst einen veralteten Stand prüfst.

Das Performance-Fazit

Eine umfängliche Performance-Optimierung von WordPress-basierten Webseiten sollte aufgrund der Komplexität der zugrunde liegenden Technologien auf mehreren Ebenen geschehen. Von der infrastrukturellen über die Webserver- und Datenbank-Ebene bis hin zur Ebene der Optimierung von Theme und Content gibt es verschiedene Möglichkeiten. Hierbei gilt es einerseits, die vom System zu verrichtende Arbeit zu verringern, und andererseits die Möglichkeiten des Systems, die übrige Arbeit zu verrichten, zu erhöhen.

Nur ein Teil dieser Aufgaben kann von Performance-Plugins bewerkstelligt werden. Die jeweiligen Plugins sind schließlich auf die Möglichkeiten, Einschränkungen und vorhandenen Einstellungen des zugrunde liegenden Systems angewiesen. Um nicht zu viel Energie in die Aufbereitung von Theme und Content zu stecken, empfiehlt sich ihr Einsatz jedoch. Hier sollte jedoch stets ein Vergleich von vor und nach der Optimierung gefahren werden, um die Effektivität der Änderungen nachzuvollziehen.

Keinesfalls darf jedoch ein Funktionstest der Webseite nach erfolgter Optimierung fehlen. Sowohl die optischen Elemente einer Webseite als auch ihre Funktionen selbst sind anfällig für Fehler durch inkonsistente Optimierungen. Wir wünschen dir viel Erfolg bei deinem Optimierungsprojekt und stehen dir bei Rückfragen sofort zur Verfügung.blank