Das WordPress Core Performance Team hat zwei Plugins veröffentlicht, die Webseiten mit neuen Technologien beschleunigen, die URLs vorab rendern, bevor ein Benutzer auf einen Link klickt, und das Lazy-Loading von Bildern beschleunigen.
WordPress Core Performance-Team
Das WordPress Core Performance Team ist für die Koordination mit den verschiedenen WordPress Core-Entwicklungsteams verantwortlich, um die Leistung zu verbessern und auch an Projekten zu arbeiten, die sich direkt auf die Verbesserung der WordPress-Kernleistung auswirken.
Der ursprüngliche Plan für das Performance-Team bestand aus:
- Leitung der Arbeitsgruppenbildung
- Koordinierung der anfänglichen Verwaltungsaufgaben (Slack-Channel, wöchentliche Treffen, Planung der Nominierungen repräsentativer Arbeitsgruppen usw.)
- Erstellen Sie ein Leitbild für das Team
- Koordinieren Sie die anzugehenden Bereiche
- skizzieren Sie den Umfang und die Roadmap
WordPress-Leistungs-Plugins
Einige der Leistungsverbesserungen von WordPress werden zunächst in Plugins getestet, bevor sie anschließend in eine zukünftige Version von WordPress integriert werden.
Benutzer, die die Plugins herunterladen, können die ersten auf der Welt sein, die die Verbesserungen der Webseitengeschwindigkeit nutzen und davon profitieren, und es wird erwartet (gehofft), dass diejenigen, die die Plugins verwenden, auch Feedback zu ihren positiven und negativen Erfahrungen geben.
Das erste und beliebteste vom Performance Team veröffentlichte Plugin ist das Performance Lab-Plugin, das fünf Module enthält, die je nach Benutzeranforderungen aktiviert oder deaktiviert werden können.
Die aktuellen Module des Performance Lab Plugins sind:
- Dominante Farbbilder:
Integriert die Unterstützung zum Speichern der dominanten Farbe neu hochgeladener Bilder und zum Erstellen eines Platzhalterhintergrunds dieser Farbe. - WebP-Support-Gesundheitscheck:
Fügt eine WebP-Unterstützungsprüfung im Site Health-Status hinzu. - WebP-Uploads:
Erstellt WebP-Versionen für neue JPEG-Bild-Uploads, sofern dies vom Server unterstützt wird. - Gesundheitscheck für in die Warteschlange gestellte Assets:
Fügt eine CSS- und JS-Ressourcenprüfung im Site Health-Status hinzu. - Integritätsprüfung automatisch geladener Optionen:
Fügt eine Prüfung auf automatisch geladene Optionen im Site Health-Status hinzu
Zwei neue Performance-Plugins
Die beiden brandneuen Plugins, die heute angekündigt wurden, sind:
- Automatische Größenanpassung für verzögert geladene Bilder
- Spekulationsregeln
Die beiden Plugins verbessern die Leistung auf zwei unterschiedliche Arten, was bedeutet, dass sie beide verwendet werden können, um die meisten Verbesserungen zu erzielen.
Neues WordPress-Plugin zur automatischen Größenanpassung
Lazy-Loading ist eine Technik zur Leistungsoptimierung, die das Laden unkritischer Bilder verzögert (pausiert), um die Seitenladezeiten zu verbessern. Bilder, die zum Rendern des sichtbaren Teils der Webseite erforderlich sind, werden zuerst geladen, während diejenigen, die nicht erforderlich sind, zurückgestellt werden, bis der Benutzer einen Bildlauf durchführt und die Bilder benötigt werden.
Dieses Plugin integriert ein neues HTML-Attribut für verzögertes Laden namens „sizes=“auto“, das das Attribut „sizes“ für verzögert geladene Bilder mithilfe von „srcset“ auf „auto“ setzt und das Herunterladen von Bildern beschleunigt, die wann benötigt werden Der Benutzer scrollt auf der Seite nach unten.
Das Attribut „sizes=“auto“ für Bilder ist Teil der Spezifikation für responsive Bilder in HTML, bezieht sich jedoch nicht speziell auf Lazy-Loading. Stattdessen wird das Attribut „sizes“ mit srcset verwendet, um dem Browser die Bildgrößenabmessungen bereitzustellen, die zum Anzeigen des Bilds in verschiedenen Ansichtsfenstergrößen erforderlich sind. Der Browser ist dann in der Lage, die am besten geeignete Bildquelle aus dem Srcset auszuwählen.
Neues Plugin für WordPress-Spekulationsregeln
Das Speculation Rules-Plugin nutzt die Speculation Rules-API, um die Ressourcen von Webseiten herunterzuladen, die ein Benutzer wahrscheinlich anfordern wird. Das Plugin „Spekulationsregeln“ sagt im Wesentlichen voraus, dass eine Seite angefordert wird, und beginnt mit dem Vorrendern der Webseite, bevor ein Benutzer auf einen Link klickt.
Die offizielle Plugin-Beschreibung erklärt:
„Verwendet standardmäßig die Speculation Rules API, um verknüpfte URLs beim Hover vorab zu rendern.“
Die Speculation Rules API ist eine Funktion, die die Leistung beim Surfen im Internet verbessern soll, indem Webseiten dem Browser Hinweise auf mögliche Links geben können, auf die ein Benutzer klicken könnte, um zu einer anderen Webseite zu navigieren. Der Browser kann dann Ressourcen vorab abrufen oder vorrendern, basierend auf der Wahrscheinlichkeit, dass ein Website-Besucher auf einen Link klickt, um zu einer neuen Webseite zu navigieren.
Auf der Mozilla-Entwicklerseite für die Speculation Rules API wird Folgendes erklärt:
„Die Speculation Rules API soll die Leistung für zukünftige Navigationen verbessern. Es zielt eher auf Dokument-URLs als auf bestimmte Ressourcendateien ab und ist daher für mehrseitige Anwendungen (MPAs) statt für einseitige Anwendungen (SPAs) sinnvoll.
Die Speculation Rules API bietet eine Alternative zur weit verbreiteten Funktion und soll die veraltete, nur für Chrome verfügbare Funktion ersetzen. Es bietet viele Verbesserungen gegenüber diesen Technologien sowie eine ausdrucksstärkere, konfigurierbare Syntax zur Angabe, welche Dokumente vorab abgerufen oder vorgerendert werden sollen.“
Die Plugin-Implementierung erfordert die Verwendung von mindestens Chrome 121. Benutzer, die eine Website mit einem anderen Browser besuchen, der die Speculation Rules API nicht unterstützt, sind davon in keiner Weise betroffen, die Webseite wird wie gewohnt gerendert.
Laut der Plugin-Dokumentation:
„Standardmäßig ist das Plugin so konfiguriert, dass es WordPress-Frontend-URLs vorab rendert, wenn der Benutzer mit der Maus über einen relevanten Link fährt. Dies kann über den Abschnitt „Spekulationsregeln“ weiter unten angepasst werden Einstellungen > Lesen.
Mithilfe eines Filters können bestimmte URL-Pfade vom Prefetching und Prerendering ausgeschlossen werden (siehe Abschnitt „FAQ“). Alternativ können Sie die CSS-Klasse „no-prerender“ zu jedem Link hinzufügen (
<a>Tag), das nicht vorgerendert werden sollte.“
Lesen Sie mehr über die neuen WordPress-Performance-Plugins und laden Sie sie hier herunter:
WordPress-Plugin zur automatischen Größenanpassung für Lazy-Loaded-Bilder
WordPress-Plugin für Spekulationsregeln
Ausgewähltes Bild von Shutterstock/Haali