SEO

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 den von Cloudflare HTMLRewriter() JavaScript-API.

Der Code ist relativ einfach zu verstehen.

Bei Core Web Vitals ist es die Unmittelbarkeit, der wahrgenommene Bedarf 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 Bedeutung, auf die wir ebenfalls eingehen werden. Was wichtig ist, ist zu verstehen, was wir tun werden.

Der HTMLRewriter() Die API gibt uns die Möglichkeit, Elementselektoren im jQuery-Stil zu verwenden, um sie an HTML-Elemente in der Rohseitenquelle 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 Ihre Bearbeitung wird der Titel und wird bei Google und Bing indiziert.

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.

Element-Selektoren

Wenn Sie etwas entdecken, das Sie reparieren möchten HTMLRewriter(), müssen Sie die Änderungen einschränken 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 Hinweis auf einen eindeutigen Ort in href or src Attribute.

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 mit zwei Übereinstimmungen für die href -Attribut, 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 diese Wildcard-Übereinstimmung, bei der die Zeichenfolge „fonts.g“ überall in der erscheinen kann href Attribut von Link-Elementen. 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, aber alles dazwischen haben kann. Dies ist nützlich, um ein einzelnes Element auszuwählen, das Teil eines Build-Systems ist, wobei es möglicherweise ein Versionierungs-Token-Verzeichnis für Browser-Cache-Busting gibt, das dynamisch benannt wird.

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. Sobald Sie ein Element oder eine Gruppe davon ausgewählt haben, erscheint das nächste Feld in HTMLRewriter().on() Anweisungen schreiben Sie einen Skriptblock. Sie können dies mit geschweiften Klammern tun. Sie können auf eine benannte Funktion verweisen. Oder man baut neu class Instanz für ein zuvor definiertes Objekt, was in diesem Zusammenhang Over-Engineering sein kann.

Wenn Sie auf Worker-Beispielcode stoßen, sehen Sie möglicherweise class Initialisierer. 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 wiederkommen class Konstrukteure, 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 auf remove() -Element-Methode, 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

Entsperren script elements 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!

Vorladen und dann mit einem onload -Attribut zum Ausführen von JavaScript, um es wieder von Preload zu Stylesheet zu ändern, ist der CSS-„Hack“, um zu entsperren, was ansonsten eine natürliche Renderblockierungsressource ist. Verwendung von JavaScript this Mit dem Schlüsselwort können Sie seine Eigenschaften ändern, einschließlich der rel Attribut (und die onload Attribut selbst). Das Muster hat auch einen Backfill für Nicht-JavaScript-Sitzungen.

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

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. Einmal geladen, die rel -Attribut wechselt 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 um HTMLRewriter() und testen Sie den Unterschied, indem Sie CSS-Blätter einzeln oder in Gruppen entsperren, je nach Ihrem Ansatz. Verwenden 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 überschreiben solche, die langsamer geladen werden. 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, das auszuführen removeAttribute() element-Methode für einen besser wiederverwendbaren Codeblock. 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ültig sein müssen alt Attribute. Der Test kann erkennen, wann der Text in in ist alt Attribute sind „unbeschreiblich“ oder vorhanden, aber leer. 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 der zu analysieren src Attribut.

Hier ist eine Funktion, die Text aus extrahiert img src Attribute zur Macht alt Text aus Dateinamen mit Bindestrichen.

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 dem Zustand auf Bildern, wo es keinen gibt alt Attributwert. Wenn es eine Wahrscheinlichkeit gibt, ist es src Attribut Dateiname getrennt 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.

Warum ist uns das wichtig?

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 gezeigt alt Attribute für Bilder. Unser Reverse-Proxy-Testbed dank Cloudflare schafft die Voraussetzungen für eine umfassende Kommunikation mit Entwicklern.

Verwandte Artikel

0 Kommentare
Inline-Feedbacks
Alle Kommentare anzeigen
Nach oben-Taste