Bilder, PHP und weitere Geschwindigkeitsgewinne

Modul 6: Geschwindigkeit · Lesezeit: 9 Minuten

Lernziel: Nach dieser Lektion können Sie die grössten verbleibenden Geschwindigkeitsgewinne umsetzen und deren Wirkung messen.

Kernbegriffe: Bildoptimierung, WebP und AVIF, Lazy Loading, das LCP-Bild, fetchpriority, PHP-Version, Datenbank aufräumen (Revisionen, Transients, Autoload), WP-Cron, echter Cron, DISABLE_WP_CRON, externe Schriftarten, Heartbeat

Arbeiten Sie in der richtigen Reihenfolge

Nach einem Seiten-Cache (Lektion 6.2) bringen diese Massnahmen den grössten Nutzen, ungefähr in der Reihenfolge von Aufwand im Verhältnis zur Wirkung:

1. Bilder in Ordnung bringen;
2. eine aktuelle PHP-Version;
3. weniger externe Bestandteile und schwere Plugins;
4. eine aufgeräumte Datenbank;
5. geplante Aufgaben über einen echten Cron.

Messen Sie vor und nach jedem Schritt (Lektion 6.1), sonst wissen Sie nicht, was geholfen hat. Und gehen Sie jeweils nur einen Schritt auf einmal an.

Bilder: der grösste Gewinn im Browser

Auf den meisten Seiten machen Bilder den grössten Teil dessen aus, was ein Besucher herunterlädt. Was Sie in Lektion 4.4 gelernt haben, zahlt sich hier aus:

• Richtige Grösse: Laden Sie nicht grösser hoch als nötig und lassen Sie WordPress über srcset kleinere Formate anbieten.
• Komprimierung und Format: WebP ist bei gleicher Qualität meist deutlich kleiner als JPEG; AVIF oft noch kleiner. Ein Plugin kann vorhandene Bilder umwandeln und die kleinere Version an Browser ausliefern, die das unterstützen. Prüfen Sie, ob die Umwandlung auf Ihrem eigenen Server stattfindet oder bei einem externen Dienst.
• Lazy Loading, aber nicht für alles. WordPress versieht Bilder automatisch mit loading="lazy", ausser dem ersten grossen Bild ganz oben. Dieses Bild ist oft das LCP-Element (Lektion 6.1): der grösste Inhaltsblock, den der Besucher als Erstes sieht. Wird es lazy geladen, wartet der Browser gerade damit, und Ihr LCP verschlechtert sich. WordPress versieht den LCP-Kandidaten daher oft mit fetchpriority="high", damit der Browser ihn als Erstes abruft.

<img src="hero-1536x864.webp" width="1536" height="864"
     fetchpriority="high" alt="Werkplaats met fietsen op een rij">
<img src="team-768x512.webp" width="768" height="512"
     loading="lazy" alt="Het team voor de winkel">

Eine Falle: Manche Themes, Seiten-Baukästen und Optimierungs-Plugins setzen Lazy Loading auch auf das erste Bild, oder laden das grosse Bild als Hintergrund über CSS (das wird erst später erkannt). In PageSpeed Insights sehen Sie beim Punkt LCP, welches Element das ist und ob es lazy geladen wird.

PHP: kostenlose Geschwindigkeit

Jede neue Hauptversion von PHP ist schneller als die vorherige, und WordPress-Websites profitieren davon direkt, ohne dass Sie etwas an Ihrer Website ändern müssen. Ausserdem erhalten alte Versionen keine Sicherheitsupdates mehr (Lektion 8.4). Wenn Sie wechseln, prüfen Sie, ob Ihre Plugins und Ihr Theme die neue Version unterstützen, und tun Sie das am besten zuerst in Staging.

Schauen Sie sich bei den PHP-Einstellungen auch an:

• OPcache: ist bei den meisten Hostern standardmässig aktiviert. Eine Folge: Es kann etwas dauern, bis PHP eine geänderte PHP-Datei in der neuen Version verwendet.
• memory_limit: zu niedrig verursacht Fehler bei umfangreichen Seiten; sehr hoch macht Ihre Website nicht schneller.

Externe Bestandteile und schwere Plugins

Jeder Bestandteil eines anderen Anbieters bedeutet eine zusätzliche Verbindung und eine zusätzliche Wartezeit: Schriftarten eines externen Dienstes, ein eingebettetes Video, ein Chat-Widget, Tracking-Codes, Social-Media-Buttons, eine Karte. Fragen pro Bestandteil:

• Ist es nötig? Ein Video, das fast niemand abspielt, kann auch als Bild mit einem Link erscheinen.
• Geht es lokal? Schriftarten können Sie meist auf Ihrem eigenen Server ablegen (mit einem Plugin oder über theme.json bei einem Block-Theme). Das spart eine Verbindung und ist besser für Ihre Privatsphäre (Lektion 9.3).
• Geht es später? Ein Chat-Widget oder Video kann erst nach einem Klick laden.

Bei Plugins hilft Messen mit X-Ray (bei Hosting mit CloudLinux) oder mit einem Plugin wie Query Monitor (vorübergehend aktivieren, nur für Administratoren sichtbar). Diese zeigen, welches Plugin die meisten Datenbankabfragen oder Zeit kostet.

Die Datenbank aufräumen

Eine Datenbank wächst durch Dinge, die Sie nicht sehen:

• Revisionen (Lektion 4.1): jede gespeicherte Version jeder Seite. Begrenzen Sie sie mit WP_POST_REVISIONS und räumen Sie alte auf.
• Spam- und Papierkorb-Kommentare sowie Beiträge im Papierkorb.
• Transients: temporäre Daten von Plugins in wp_options, die manchmal nicht aufgeräumt werden.
• Autoload: Optionen in wp_options mit aktiviertem autoload werden bei jeder Anfrage auf einmal geladen. Plugins, die Sie längst entfernt haben, hinterlassen dort manchmal grosse Datenmengen. Website-Zustand (Lektion 5.4) warnt, wenn die Autoload-Daten sehr gross sind.
• Log-Tabellen von Plugins (Statistiken, Sicherheitsprotokolle, E-Mail-Protokolle), die nie geleert werden.

Aufräumen können Sie mit einem Aufräum-Plugin, mit WP-CLI (wp transient delete --expired, wp post delete $(wp post list --post_type=revision --format=ids) --force), oder mit der Optimierungsfunktion von phpMyAdmin für die Tabellen selbst. Immer zuerst ein Backup. Entfernen Sie nichts, von dem Sie nicht wissen, was es ist.

Geplante Aufgaben: WP-Cron

WordPress hat Aufgaben, die zu einem bestimmten Zeitpunkt ausgeführt werden müssen: einen geplanten Beitrag veröffentlichen, auf Updates prüfen, ein Backup-Plugin arbeiten lassen. Das nennt sich WP-Cron. Standardmässig läuft WP-Cron nicht nach der Uhr, sondern bei einem Besuch: Bei jeder Seitenanfrage prüft WordPress, ob eine Aufgabe ansteht. Zwei Nachteile:

• Bei wenig Besuchern laufen Aufgaben zu spät (ein geplanter Beitrag erscheint erst beim nächsten Besuch danach).
• Bei vielen Besuchern wird sehr häufig geprüft, und eine aufwendige Aufgabe kann gerade die Seite eines Besuchers verlangsamen.

Besser: Schalten Sie WP-Cron bei Besuchen aus und lassen Sie es durch einen echten Cronjob des Servers alle fünf oder zehn Minuten ausführen. In wp-config.php (oberhalb von „Das war's, Schluss mit Bearbeiten"):

define( 'DISABLE_WP_CRON', true );

Und im Cron-Bildschirm Ihres Hosting-Panels eine Aufgabe, alle 10 Minuten:

*/10 * * * *  /usr/local/bin/php /home/gebruiker/domains/example.com/public_html/wp-cron.php >/dev/null 2>&1

Der Pfad zu PHP und zu Ihrer Website unterscheidet sich je nach Hoster; schauen Sie in die Anleitung Ihres Panels. Oder verwenden Sie WP-CLI: wp cron event run --due-now. Prüfen Sie anschliessend in Website-Zustand, dass keine geplanten Aufgaben im Rückstand sind.

Heartbeat und der Adminbereich

Das Dashboard von WordPress kommuniziert, solange es geöffnet ist, alle 15 bis 60 Sekunden mit dem Server (der Heartbeat): für automatisches Speichern, um zu melden, dass jemand anders denselben Beitrag bearbeitet, und für Benachrichtigungen. Lassen Sie zehn Tabs mit dem Dashboard den ganzen Tag geöffnet, sind das Tausende Anfragen. Schliessen Sie Tabs, die Sie nicht nutzen. Manche Cache-Plugins können den Heartbeat verlangsamen; ihn ganz auszuschalten ist nicht nötig und zerstört das automatische Speichern.

Zusammenfassung

• Nach dem Seiten-Cache: Bilder, PHP-Version, externe Bestandteile und Plugins, Datenbank, Cron. Messen Sie vor und nach, jeweils einen Schritt auf einmal.
• Lazy Loading für alles ausser dem grossen Bild ganz oben; das erhält besser fetchpriority="high".
• Eine neuere PHP-Version ist kostenlose Geschwindigkeit, sofern Ihre Plugins mitkönnen.
• Räumen Sie Revisionen, Transients, Spam und grosse Autoload-Daten auf, immer mit einem Backup.
• Stellen Sie WP-Cron mit DISABLE_WP_CRON und einer Aufgabe in Ihrem Panel auf einen echten Cronjob um.

Quiz

Aufgabe

Aufgabe A6.3: Lazy Loading und Formate auf Ihrer Startseite. Geben Sie die Adresse Ihrer Website ein. Das Programm liest die Startseite und prüft die Bilder: Hat das erste grosse Bild kein loading="lazy" (und idealerweise fetchpriority="high"), haben die weiter unten liegenden Bilder Lazy Loading, und welcher Anteil der Bilder ist WebP oder AVIF?

Aufgabe D6.3: Vorher und nachher. Messen Sie eine Seite Ihrer Website dreimal in PageSpeed Insights (mobil) und notieren Sie den mittleren LCP, INP (oder den Labwert Total Blocking Time, falls keine Felddaten vorliegen), CLS und die TTFB aus Aufgabe A6.1. Setzen Sie anschliessend eine Verbesserung aus dieser Lektion um (Bilder, PHP-Version, einen externen Bestandteil entfernen, Datenbank aufräumen oder ein echter Cron). Messen Sie erneut dreimal und notieren Sie die neuen Werte. Beschreiben Sie, was Sie getan haben und ob der Unterschied grösser ist als die übliche Schwankung zwischen Messungen.

Weiterführende Informationen

Diese Artikel beschreiben die Schritte in den Panels von WebOké; in anderen Panels funktionieren sie ähnlich.

• DirectAdmin Anleitung 14.1: Die PHP-Version auswählen (Select PHP version)
• DirectAdmin Anleitung 12.7: Eine Datenbank prüfen, reparieren und optimieren
• DirectAdmin Anleitung 15.1: Cronjobs: Aufgaben automatisch ausführen lassen
• Cronjob oder Aufgabe erstellen (und was zu tun ist, wenn sie nicht ausgeführt wird)
• DirectAdmin Anleitung 17.4: X-Ray: langsame Seiten aufspüren
• WP-Cron mit dem System-Cron verknüpfen (developer.wordpress.org, Englisch): https://developer.wordpress.org/plugins/cron/hooking-wp-cron-into-the-system-task-scheduler/
• Lazy Loading und LCP (web.dev, Englisch): https://web.dev/articles/lcp-lazy-loading