Funktionen für Core Web Vitals Tactics mit dem HTMLRewriter von Cloudflare

Unser Leitfaden für A/B-Tests für Core Web Vitals erläuterte eine Reihe kleiner Schritte mit zwei Diensten und einer Browsererweiterung, um Tests für Frontend-Code-Taktiken zu schreiben. Vor dreißig Jahren kopierten wir die Rohquelle einer Seite, um Suchen-und-Ersetzen-Operationen auszuführen, bis wir ein Faksimile einer Seite verwalten konnten, die in einem webfähigen Ordner abgelegt war, um die gleichen Arten von Empfehlungen zu demonstrieren.

Wir müssen das nicht mehr tun.

Das Einrichten eines Reverse-Proxys und das Schreiben von Software für die Durchführung von SEO vor zwanzig Jahren war auf eine kleine Gruppe von Unternehmen beschränkt, die die Infrastruktur selbst aufgebaut und gehostet haben. Cloudflare stellt uns jetzt eine schlüsselfertige Lösung zur Verfügung. Sie können mit einem kostenlosen Konto loslegen. Verwenden Sie zum Ändern des Frontend-Codes die JavaScript-API HTMLRewriter() von Cloudflare.

Der Code ist relativ einfach zu verstehen.

Bei Core Web Vitals ist es die Unmittelbarkeit, das wahrgenommene Bedürfnis und die Schnelligkeit, verschiedene Tests durchlaufen zu können, die letztendlich den Wert zeigen und wirklich beeindrucken. Die grundlegende Plattform steht Ihnen über die in unserem Leitfaden beschriebenen Schritte zur Verfügung. Wir werden Funktionen für alltägliche Änderungen schreiben, damit Sie sofort mit dem Testen echter Taktiken beginnen können.

HTMLRewriter()

Wenn Sie mitverfolgt haben, wissen Sie vielleicht, dass unser Skript die Option bietet, ein Element vorab zu laden, das Sie in einem Anforderungsparameter für LCP angeben können. Wir geben ein Formular zurück, wenn der Wert fehlt, um das Hinzufügen Ihrer Referenz zu vereinfachen. Es gibt auch einen Platzhalter für etwas namens Wichtigkeit , das wir ebenfalls ansprechen werden. Was wichtig ist, ist zu verstehen, was wir tun werden.

Die HTMLRewriter() API gibt uns die Möglichkeit, Elementselektoren im jQuery-Stil zu verwenden, um sie an HTML-Elemente im Rohseitenquelltext anzuhängen, um JavaScript von diesem Standbein aus auszuführen. Sie können Elemente, eine ganze Gruppe von Elementen oder sogar das Basisdokument auf leistungsstarke Weise ändern. Sie können beispielsweise den Titel einer Seite bearbeiten. In der Produktion wird Ihre Bearbeitung zum Titel und wird bei Google und Bing indexiert.

Eine Komplikation, auf die Sie stoßen werden, besteht darin, dass Sie nur Rohquellen bearbeiten können, kein hydriertes Document Object Model (DOM). Eine schnelle Möglichkeit zum Anzeigen von Rohquellen ist die integrierte View-Source-Funktion des Browsers. Bei Firefox hebt view-source beispielsweise Validierungsfehler rot hervor. Selbst wenn Browser fehlerhaftes HTML „reparieren“, kann dies normalerweise mit unserem Worker behoben werden.

Beim Arbeiten in DevTools bietet die Registerkarte „Quellen“ Zugriff auf die Rohquelle. Verwenden Sie die Voreinstellungen, um die Quelle immer „hübsch zu drucken“, wodurch sie formatiert wird, sodass Sie den Code scannen können, um nach Optimierungen zu suchen. Ein weiterer Einstellungstipp ist eine Einstellung zum Umgehen des Caches, wenn DevTools geöffnet ist. Dieser Workflow hilft Ihnen dabei, damit Ihre Optimierungen nicht zu Referenzfehlern führen.

Elementselektoren

Wenn Sie etwas entdecken, das Sie mit HTMLRewriter() beheben möchten, müssen Sie die Änderungen eingrenzen und das Element isolieren, um zu vermeiden, dass mehr Code geändert wird, als Sie beabsichtigen. Verwenden Sie einen möglichst exklusiven Selektor, was sehr einfach sein kann, wenn Elemente eindeutige IDs haben. Suchen Sie andernfalls nach einem verräterischen Zeichen, z. B. einem Verweis auf einen eindeutigen Ort in href oder src -Attributen.

Sie werden die Möglichkeit finden, Platzhalter und reguläre Ausdrücke im „Befehlsmodus“ im vim-Stil zu verwenden, die mit Attributwerten übereinstimmen. Sie können auch mehr als ein Kriterium angeben, sogar mit demselben Attributnamen. Verwenden Sie Ihre Vim-Kräfte, um Übereinstimmungen auf einzelne Elemente einzugrenzen oder eine Gruppe von Elementen mit breiteren Ausdrücken abzugleichen. Die Logik kann dann Bedenken zwischen Änderungen trennen.

Beispiel passender Platzhalter „fonts.g“ Prefetch-Link-Elemente zum Entfernen dieser für: fonts.googleapis.com.

 .on(`link[rel="dns-prefetch"][href*="fonts.g"]`, removeEl())

Beispiel, das zwei Übereinstimmungen für das href -Attribut zeigt, wodurch es auf eine einzelne Datei unter vielen eingegrenzt wird.

 .on('link[href^="https://example.com/static/version"][href$="/print.css"]', unblockCSS())

Das erste obige Beispiel verwendet diesen Wildcard-Match, bei dem die Zeichenfolge „fonts.g“ überall im href -Attribut von Link-Elementen erscheinen kann. Dies ist ein Beispiel für eine weitgehende Übereinstimmung, die mit mehr als einem Link-Element verbunden werden kann, um eine entsprechende Aktion auszuführen, z. B. das Entfernen der übereinstimmenden Elemente, falls vorhanden.

Das zweite Beispiel von oben zeigt, wie Sie ein bestimmtes Link-Element auswählen können, das mit einer Zeichenfolge beginnt und mit einer anderen Zeichenfolge endet, zwischen denen aber alles stehen kann. Dies ist nützlich, um ein einzelnes Element auszuwählen, das Teil eines Build-Systems ist, wobei es möglicherweise ein dynamisch benanntes Versionierungs-Token-Verzeichnis für Browser-Cache-Busting gibt.

Link-Elemente

Link-Elemente sind aufgrund ihrer verschiedenen Attribute facettenreich. Somit können sie einer Reihe von Zwecken dienen. Nicht zu verwechseln mit Links (wie in Ankern), Link-Elemente sind normalerweise der Ausgangspunkt, an dem Sie nach schnell schlagenden Performance-Strategien suchen. Einige Preload- und Preconnect-Link-Elemente können tatsächlich im Weg stehen oder völlig unnötig sein.

Sie können nur maximal sechs Hosts gleichzeitig verbinden. Ihre erste Strategie wird es sein, das Beste aus ihnen zu machen. Versuchen Sie, alle Anweisungen für Linkelemente mit Prioritätshinweisen zu entfernen, und testen Sie das Ergebnis. Wenn die Timings in die falsche Richtung gehen, fügen Sie sie nacheinander wieder hinzu und testen Sie die tatsächliche Auswirkung jedes einzelnen. Sie müssen lernen, wie man das WebpageTest-Wasserfalldiagramm eingehend liest.

Anschließend geht es um das Laden von Ressourcen, was auch ziemlich stark, aber nicht ausschließlich, Link-Elemente beinhaltet. An dieser Stelle wollen wir uns auch Skripte ansehen. Die Reihenfolge, in der Ressourcen geladen werden, kann sich sehr negativ auf die Dinge auswirken. Unser Testbed ist perfekt, um verschiedene Taktiken auszuprobieren, die sich aus dem Lesen des Wasserfalldiagramms ergeben haben. Lassen Sie das Konsolenfach von DevTools geöffnet, um während der Arbeit nach Fehlern zu suchen.

Elemente entfernen

Das Entfernen von Elementen ist außergewöhnlich einfach. Nachdem Sie ein Element oder eine Gruppe davon ausgewählt haben, schreiben Sie im nächsten Feld in HTMLRewriter().on() Anweisungen einen Skriptblock. Sie können dies mit geschweiften Klammern tun. Sie können auf eine benannte Funktion verweisen. Oder Sie können eine neue class für ein zuvor definiertes Objekt erstellen, was in diesem Zusammenhang möglicherweise ein Over-Engineering ist.

Wenn Sie auf Worker-Beispielcode stoßen, sehen Sie möglicherweise class . Alles, was wirklich benötigt wird, um ein Element zu entfernen, ist die folgende Funktion. Alles, was mit einem benannten Klassenobjekt getan wird, kann mit einer einfachen Funktion (Objekt) mit weniger Code, für weniger Fehler, mit besser lesbarer Syntax und weitaus lernbarer gemacht werden. Wir werden auf class zurückkommen, wenn wir uns mit Durable Objects befassen.

 element: (el) => { el.remove(); }

Kurz gesagt definiert dieser Block eine Variable „el“ in Bezug auf die Elementinstanz und der Codeblock ruft die eingebaute Methode remove() des Elements auf, die Sie ausführlich in der entsprechenden Dokumentation finden. Alle HTMLRewriter() Elementmethoden stehen Ihnen zur Verwendung mit Instanzen Ihrer Elementübereinstimmungen zur Verfügung. Das Entfernen von Elementen ist eine der einfacher zu verstehenden.

Entsperren von renderblockierenden Ressourcen

Das Entsperren von script ist viel einfacher als das Entsperren von Stylesheet-Ressourcen. Wie es der Zufall will, haben wir ein boolesches Attribut, um dem Browser zu signalisieren, dass wir ein Skript asynchron laden oder es ganz verschieben möchten (für Leerlaufzeiten). Das ist ideal! Stylesheets hingegen brauchen einen kleinen „Hack“, um sie zu entsperren – sie erfordern etwas Inline-Javascript.

Im Wesentlichen wandeln wir eine Stylesheet-Link-Element-Referenz in Preload um, um sie zu entsperren. Aber das ändert die Art des Link-Elements dahingehend, dass die Stilregeln nicht angewendet werden. Preload lädt Ressourcen herunter, um sie im lokalen Cache zu speichern, bereit, wenn sie benötigt werden, aber das war es auch schon. DevTools warnt Sie, wenn eine Ressource vorab geladen und nicht sinnvoll verwendet wird – dann wissen Sie, dass Sie sie entfernen können!

Das Vorabladen und anschließende Verwenden eines onload -Attributs zum Ausführen von JavaScript, um es wieder vom Vorabladen in das Stylesheet zu ändern, ist der CSS-„Hack“, um zu entsperren, was ansonsten eine natürliche Renderblockierungsressource ist. Wenn Sie das Schlüsselwort this von JavaScript verwenden, können Sie seine Eigenschaften ändern, einschließlich des rel -Attributs (und des onload Attributs selbst). Das Muster hat auch einen Backfill für Nicht-JavaScript-Sitzungen.

Hier ist unsere unblockCSS() Funktion, die die Strategie mit vorgefertigten Elementmethoden implementiert.

 const unblockCSS = () => ({ element: (el) => { el.removeAttribute('media'); el.setAttribute('rel', 'preload'); el.setAttribute('as', 'style'); el.setAttribute('onload', "this.onload=null;this.rel='stylesheet';this.media='all'"); el.after(` `, { html: true }); }});

Wählen Sie die Link-Element-Stylesheet-Referenzen aus, die renderblockierend sind, und rufen Sie diese Funktion für sie auf. Es ermöglicht dem Browser, mit dem Herunterladen des Stylesheets zu beginnen, indem er es vorab lädt. Nach dem Laden wechselt das rel Attribut zurück zu stylesheet und die CSS-Regeln werden sofort angewendet. Wenn nach dieser Änderung Stilprobleme auftreten, müssen ein oder mehrere Blätter in der normalen Anforderungsreihenfolge geladen werden.

Die Funktion fungiert als wiederverwendbarer Codeblock. Schalten Sie Ihre Elementauswahl mit HTMLRewriter() um und testen Sie den Unterschied, indem Sie CSS-Blätter einzeln oder in Gruppen entsperren, je nach Ihrem Ansatz. Nutzen Sie die Taktik, um eine Gesamtstrategie zu erreichen, die so viel wie möglich freigibt. Denken Sie jedoch immer daran, nach Problemen zu suchen, die sich aus Änderungen an CSS- und Skriptressourcen ergeben.

Skriptprioritäten

Die Reihenfolge, in der Sie Stile laden, kann das Design vermasseln. Unerwartet schnell ladende Stylesheet-Regeln werden durch träge geladene überschrieben. Sie müssen auch beim Laden von Skripten in wechselnder Reihenfolge darauf achten, dass sie ausgewertet werden und im Speicher resident sind, wenn das Dokument ausgewertet wird. Referenzfehler können zu Dutzenden oder Hunderten von Skriptfehlern führen.

Der beste Weg, um nach Problemen zu suchen, besteht darin, die Konsolenschublade zu beobachten und langsame Netzwerkverbindungen zu simulieren. Dies kann Probleme bis zu dem Punkt übertreiben, an dem sie in DevTools offensichtlich sein sollten. Wenn Skriptressourcen mit leistungsstärkeren CPUs verarbeitet werden und über Kabelmodemgeschwindigkeit oder schneller geladen werden, ist es möglich, dass Sie einen kritischen Fehler übersehen. Anfragen werden ebenfalls gut verteilt.

Hier ist unsere Funktion zum Ändern oder Hinzufügen von asynchronen und zurückgestellten Attributen.

 const makeAsyncJS = () => ({ element: (el) => { el.removeAttribute("defer"); el.setAttribute("async", "async"); } });

 const makeDeferJS = () => ({ element: (el) => { el.removeAttribute("async"); el.setAttribute("defer", "defer"); } });

Wenn ein Skript ursprünglich nicht über async oder defer verfügt, ist es harmlos, die removeAttribute() für einen besser wiederverwendbaren Codeblock auszuführen. Sie können dies ignorieren, wenn Sie schnell an einem einmaligen Projekt arbeiten, bei dem Sie dies möglicherweise inline schreiben, anstatt eine Funktion aufzurufen, die Sie zuvor im Skript definiert haben.

Alt-Attribute für SEO

Wie bereits erwähnt, war unser Leitfaden für A/B-Core-Web-Vitals-Taktiken so konzipiert, dass wir ein voll funktionsfähiges Edge-Computing-Testbed haben, das in Betrieb ist, um Inhalte mit zukünftigen SEO-Artikeln für Entwickler und zukünftigen Veranstaltungen zu demonstrieren. Während unserer SMX West-Veranstaltung im vergangenen Jahr (2021) haben wir die Verwendung von Cloudflare Workers für eine Website demonstriert und ein Lighthouse-Feuerwerk erreicht (100 Punkte in allen Tests).

Es gibt viele Dinge, die vorhanden sein müssen, um das Feuerwerk zu bekommen. Ein wichtiger Aspekt ist, dass alle Bilder gültige alt Attribute haben müssen. Der Test kann erkennen, ob der Text in alt -Attributen „unbeschreiblich“ oder vorhanden, aber leer ist. Sie benötigen Wörter, die darstellen, was auf dem zugehörigen Bild zu sehen ist. Eine Möglichkeit, dies zu tun, könnte darin bestehen, den Dateinamen aus dem src -Attribut zu analysieren.

Hier ist eine Funktion, die Text aus img src -Attributen extrahiert, um alt -Text aus Dateinamen mit Bindestrichen zu aktivieren.

 const img_alt = element.getAttribute('alt'); const img_src = element.getAttribute('src'); if (!img_alt) { element.setAttribute('alt', img_src.replace('-', ' ')); }

Kurz gesagt, dies sucht nach der Bedingung für Bilder, bei denen kein alt Attributwert vorhanden ist. Wenn die Wahrscheinlichkeit besteht, dass der Dateiname des src -Attributs mit Bindestrichen versehen ist, werden Bindestriche durch Leerzeichen ersetzt, um zu formulieren, was ein geeigneter Wert sein könnte. Diese Version funktioniert in den meisten Fällen nicht. Es ersetzt keine Schrägstriche oder das Protokoll und die Domäne. Dies dient lediglich als Ausgangspunkt.

Testen Sie auf bessere Leistung und größere Sichtbarkeit

Ein Testbed zum Ausprobieren verschiedener Core Web Vitals Performance Optimization-Taktiken zu haben, ist für Websitebesitzer unglaublich beeindruckend. Sie sollten diese Fähigkeit in Ihrem Agenturarsenal haben. Ein leichter Google-Ranking-Boost mit guten Ergebnissen ist sowohl messbar als auch weitgehend erreichbar für die meisten Websites durch Taktiken, die wir besprechen und demonstrieren werden. Schalten Sie ein für eine Live-Performance vom 8. bis 9. März.

SEO-Techniker empfehlen seit langem Leistungsverbesserungen für das Suchmaschinenranking. Der Vorteil für Rankings war noch nie so deutlich. Google hat die Metriken buchstäblich definiert und veröffentlicht über ihre Wirkung. Wir haben Cloudflare-Mitarbeiter, die Edge-SEO-Maßnahmen implementieren, wie hier mit alt -Attributen für Bilder gezeigt. Unser Reverse-Proxy-Testbed dank Cloudflare schafft die Voraussetzungen für eine umfassende Kommunikation mit Entwicklern.