Seo

Functies voor Core Web Vitals-tactieken met HTMLRewriter van Cloudflare

Onze gids voor A/B-testen voor Core Web Vitals legde een reeks kleine stappen uit met twee services en een browserextensie om tests te schrijven voor frontend-codetactieken. Dertig jaar geleden kopieerden we de onbewerkte bron van een pagina om zoek-en-vervang-bewerkingen uit te voeren totdat we een facsimile van een pagina konden beheren die in een web-enabled map was geplaatst om dezelfde soort aanbevelingen te demonstreren.

Dat hoeven we niet meer te doen.

Twintig jaar geleden was het opzetten van een reverse proxy en het schrijven van software voor het uitvoeren van SEO beperkt tot een klein aantal bedrijven die de infrastructuur zelf bouwden en hosten. Cloudflare biedt ons nu een kant-en-klare oplossing. U kunt aan de slag met een gratis account. Gebruik Cloudflare's om de frontend-code te wijzigen HTMLRewriter() JavaScript-API.

De code is relatief eenvoudig te begrijpen.

Met Core Web Vitals is het de directheid, de waargenomen behoefte en de snelheid van het kunnen doorlopen van verschillende tests die uiteindelijk waarde tonen en echt indruk maken. Het fundamentele platform is voor u beschikbaar via de stappen die in onze gids worden beschreven. We zullen functies schrijven om alledaagse veranderingen aan te brengen, zodat je meteen kunt beginnen met het testen van echte tactieken.

HTMLRewriter()

Als je het hebt gevolgd, weet je misschien dat ons script de optie biedt om een ​​element vooraf te laden dat je kunt specificeren in een verzoekparameter voor LCP. We sturen een formulier terug wanneer de waarde ontbreekt, om het gemakkelijk te maken om uw referentie toe te voegen. Er is ook een tijdelijke aanduiding voor iets genaamd belang, die we ook zullen behandelen. Wat belangrijk is, is om te begrijpen wat we gaan doen.

De HTMLRewriter() API geeft ons de mogelijkheid om jQuery-achtige elementselectors te gebruiken om aan HTML-elementen in de onbewerkte paginabron te koppelen om JavaScript vanuit die positie uit te voeren. U kunt op krachtige manieren elementen, een hele groep elementen of zelfs het basisdocument wijzigen. U kunt bijvoorbeeld de titel van een pagina bewerken. In productie, jouw bewerking wordt de titel en wordt geïndexeerd bij Google en Bing.

Een complicatie die u zult tegenkomen, is dat u alleen de onbewerkte bron kunt bewerken, niet een gehydrateerd Document Object Model (DOM). Een snelle manier om de onbewerkte bron te bekijken, is met de ingebouwde weergavebronfunctionaliteit van de browser. Met Firefox markeert view-source bijvoorbeeld validatiefouten in het rood. Zelfs als browsers kapotte HTML "repareren", kan dit meestal worden opgelost met onze Worker.

Werkend binnen DevTools, biedt het tabblad "Bronnen" toegang tot onbewerkte bron. Gebruik voorkeursinstellingen om altijd een "mooie afdruk" -bron te gebruiken, die deze zal formatteren zodat u de code kunt scannen om naar optimalisaties te zoeken. Een andere voorkeurstip is een instelling om cache te omzeilen wanneer DevTools open is. Deze workflow helpt u op weg, zodat uw optimalisaties niet leiden tot referentiefouten.

Elementkiezers

Wanneer je iets ziet waarmee je het wilt repareren HTMLRewriter(), moet u de wijzigingen beperken en het element isoleren om te voorkomen dat u meer code wijzigt dan u van plan was. Gebruik de meest exclusieve selector die mogelijk is, wat heel gemakkelijk kan zijn als elementen unieke ID's hebben. Zoek anders een verklikkerbord, zoals een verwijzing naar een unieke locatie in href or src attributen.

U zult de mogelijkheid vinden om jokertekens en vim-achtige reguliere expressies in vim-stijl te gebruiken die overeenkomen met attribuutwaarden. U kunt ook meer dan één criterium opgeven, zelfs met dezelfde attribuutnaam. Gebruik je vim-krachten om overeenkomsten te beperken tot afzonderlijke elementen, of een groep elementen te matchen met bredere uitdrukkingen. Logica kan dan zorgen scheiden tussen veranderingen.

Voorbeeld overeenkomende met jokertekens "fonts.g" prefetch link-elementen om die te verwijderen voor: fonts.googleapis.com.

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

Voorbeeld met twee overeenkomsten voor de href attribuut, waardoor het een enkel bestand tussen vele wordt.

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

Het eerste voorbeeld hierboven gebruikt die jokertekenovereenkomst waarbij de tekenreeks "fonts.g" overal in de . kan verschijnen href attribuut van linkelementen. Het is een voorbeeld van een brede overeenkomst die aan meer dan één linkelement kan worden gekoppeld voor een geschikte actie, zoals het verwijderen van de eventueel overeenkomende elementen.

Het tweede voorbeeld van hierboven laat zien hoe je een bepaald link-element kunt selecteren dat begint met een string en eindigt met een andere string, maar dat alles ertussen kan hebben. Dit is handig voor het selecteren van een enkel element dat deel uitmaakt van een buildsysteem waarbij er mogelijk een versiebeheertokendirectory is voor browsercache-busting die dynamisch wordt genoemd.

Elementen koppelen

Link-elementen zijn veelzijdig vanwege hun verschillende attributen. Ze kunnen dus verschillende doelen dienen. Niet te verwarren met links (zoals in ankers), linkelementen zijn meestal waar u op zoek gaat naar snelle prestatiestrategieën. Sommige preload- en preconnect-link-elementen kunnen in de weg zitten of misschien helemaal niet nodig zijn.

U krijgt maximaal zes hosts om tegelijkertijd verbinding te maken. Uw eerste strategie zal zijn om er het beste van te maken. Probeer alle instructies voor koppelingselementen met prioriteitshints te verwijderen en test het resultaat. Als de timing verkeerd gaat, voeg ze dan een voor een toe en test de echte impact van elk. U zult moeten leren hoe u de WebpageTest-watervalgrafiek diepgaand kunt lezen.

Hierna gaan de tactieken naar het laden van bronnen, waarbij ook koppelingselementen behoorlijk zwaar zijn, maar niet uitsluitend. Op dit punt willen we ook naar scripts kijken. De volgorde waarin resources worden geladen, kan de zaken zeer negatief beïnvloeden. Ons testbed is perfect om verschillende tactieken uit te proberen die zijn afgeleid van het lezen van de watervalgrafiek. Houd de consolelade van DevTools open om tijdens het werken op fouten te controleren.

Elementen verwijderen

Het verwijderen van elementen is buitengewoon eenvoudig te doen. Nadat u een element of een groep ervan hebt geselecteerd, wordt het volgende veld in HTMLRewriter().on() statements is waar u een scriptblok schrijft. U kunt dit op zijn plaats doen met accolades. U kunt verwijzen naar een benoemde functie. Of je kunt een nieuwe bouwen class bijvoorbeeld voor een eerder gedefinieerd object, dat in deze context over-engineering kan zijn.

Wanneer u een voorbeeld Worker-code tegenkomt, ziet u mogelijk: class initialen. Het enige dat echt nodig is om het element te verwijderen, is de volgende functie. Alles wat gedaan wordt met een benoemd klasseobject kan worden gedaan met een gewone functie (object) met minder code, voor minder bugs, met een beter leesbare syntaxis en veel leerbaarder. We komen terug class constructeurs wanneer we ons verdiepen in duurzame objecten.

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

In een notendop, dit blok definieert een variabele "el" met betrekking tot de elementinstantie en het codeblok roept de ingebouwde remove() element methode, die u gedetailleerd vindt in de bijbehorende documentatie. Allemaal HTMLRewriter() elementmethoden zijn beschikbaar voor gebruik met instanties van uw elementovereenkomsten. Het verwijderen van elementen is een van de eenvoudigere om te begrijpen.

Renderblokkeringsbronnen deblokkeren

ontstoppen script elementen is veel eenvoudiger dan het deblokkeren van stylesheetbronnen. Het toeval wil dat we een boolean-attribuut hebben om de browser te signaleren dat we een script asynchroon willen laden of helemaal uitstellen (voor als er inactieve tijd is). Dat is ideaal! Stylesheets, aan de andere kant, hebben een kleine "hack" nodig om ze te deblokkeren - ze vereisen wat inline Javascript.

In wezen veranderen we een verwijzing naar een stylesheet-linkelement in preload om het te deblokkeren. Maar dat verandert de aard van het link-element in een element waarbij de stijlregels niet worden toegepast. Preload downloadbronnen om ze op te slaan in de lokale cache, klaar voor wanneer nodig, maar dat is alles. DevTools waarschuwt u wanneer een bron vooraf is geladen en niet op de juiste manier wordt gebruikt - dan weet u dat u deze kunt verwijderen!

Vooraf laden en vervolgens een . gebruiken onload attribuut om JavaScript uit te voeren om het terug te veranderen van preload naar stylesheet is de CSS "hack" om te deblokkeren wat anders een natuurlijk renderblokkerende bron is. JavaScript gebruiken this trefwoord kunt u de eigenschappen ervan wijzigen, inclusief de rel attribuut (en de onload attribuut zelf). Het patroon heeft ook een aanvulling voor niet-JavaScript-sessies.

Hier is onze unblockCSS() functie die de strategie implementeert met behulp van kant-en-klare elementmethoden.

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 }); }});

Selecteer de stylesheet-referenties van het linkelement die renderblokkerend zijn en roep deze functie daarop aan. Hiermee kan de browser beginnen met het downloaden van de stylesheet door deze vooraf te laden. Eenmaal geladen, de rel attribuut schakelt terug naar stylesheet en de CSS-regels worden onmiddellijk toegepast. Als er na deze wijziging stijlproblemen optreden, moeten een of meer vellen in de normale aanvraagvolgorde worden geladen.

De functie fungeert als een herbruikbaar codeblok. Schakel uw elementselecties in met HTMLRewriter() en test het verschil door CSS-bladen één voor één of in groepen te deblokkeren, afhankelijk van uw aanpak. Gebruik de tactiek om een ​​algemene strategie te bereiken door zoveel mogelijk te deblokkeren. Denk er echter altijd aan om te zoeken naar problemen die het gevolg zijn van wijzigingen in CSS- en scriptbronnen.

Scriptprioriteiten

De volgorde waarin u stijlen laadt, kan het ontwerp verpesten. Onverwacht snel ladende stylesheet-regels overschrijven degenen die trager worden geladen. U moet ook letten op het laden van scripts in alternatieve volgorde, zodat ze worden geëvalueerd en in het geheugen aanwezig zijn wanneer het document wordt geëvalueerd. Referentiefouten kunnen oplopen tot tientallen of honderden scriptfouten.

De beste manier om op problemen te controleren, is door de consolelade te bekijken en trage netwerkverbindingen te simuleren. Dit kan problemen zodanig overdrijven dat ze duidelijk zouden moeten zijn in DevTools. Als scriptbronnen worden verwerkt met krachtigere CPU's en de kabelmodemsnelheid overschrijden, of sneller, is het mogelijk dat u een kritieke fout mist. Verzoeken worden ook mooi gespreid.

Hier is onze functie om attributen te wijzigen of toe te voegen, asynchrone en uitgestelde.

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

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

Als een script oorspronkelijk geen asynchrone of uitgestelde functie heeft, is het ongevaarlijk om de removeAttribute() element methode voor een meer herbruikbaar codeblok. Je kunt dit gerust negeren als je snel werkt aan een eenmalig project waarbij je dit inline zou kunnen schrijven in plaats van een functie aan te roepen die je eerder in het script hebt gedefinieerd.

Alt-attributen voor SEO

Zoals vermeld, was onze Guide to A/B Core Web Vitals-tactieken, door het ontwerp, bedoeld voor ons om een ​​volledig functionerend Edge Computing-testbed in gebruik te hebben om inhoud te demonstreren met toekomstige SEO voor ontwikkelaars-artikelen en toekomstige evenementen. Tijdens ons SMX West-evenement vorig jaar (2021), demonstreerden we het gebruik van Cloudflare Workers voor een website, waarmee we Lighthouse-vuurwerk bereikten (score 100 voor al zijn tests).

Er zijn veel dingen die op hun plaats moeten zijn om het vuurwerk te krijgen. Een belangrijk aspect is dat alle afbeeldingen geldig alt attributen. De test kan detecteren wanneer de tekst in in alt attributen zijn "onopvallend" of aanwezig, maar leeg. U hebt woorden nodig die weergeven wat er in de bijbehorende afbeelding staat. Een manier om dat te doen zou kunnen zijn om de bestandsnaam te ontleden uit de src attribuut.

Hier is een functie die tekst extraheert uit: img src attributen aan macht alt tekst van bestandsnamen met koppeltekens.

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

In een notendop, dit zoekt naar de toestand op afbeeldingen waar er geen alt Attribuutwaarde. Wanneer er een kans is, is het src attribuut bestandsnaam is afgebroken, zal het koppeltekens vervangen door spaties om te formuleren wat een geschikte waarde kan zijn. Deze versie zal in de meeste gevallen niet werken. Het vervangt geen slashes of het protocol en domein. Dit dient slechts als uitgangspunt.

Waarom we schelen

Het hebben van een testbed voor het uitproberen van verschillende Core Web Vitals Performance Optimization-tactieken is ongelooflijk indrukwekkend voor site-eigenaren. Je zou deze mogelijkheid in je arsenaal moeten hebben. Een lichte verhoging van de Google-ranglijst met goede scores is zowel meetbaar als grotendeels haalbaar voor de meeste sites door middel van tactieken die we zullen bespreken en demonstreren. Stem af voor een live optreden van 8 t/m 9 maart.

SEO-technici hebben al lang prestatieverbeteringen aanbevolen voor het rangschikken van zoekmachines. Het voordeel voor rankings is nog nooit zo duidelijk geweest. Google definieerde letterlijk de metrics en publiceert over hun effect. We hebben Cloudflare Workers om Edge SEO-remedies te implementeren, zoals hier wordt aangetoond met: alt attributen voor afbeeldingen. Ons reverse proxy-testbed dankzij Cloudflare vormt de basis voor rijke communicatie met ontwikkelaars.

Gerelateerde artikelen

0 Comments
Inline feedbacks
Bekijk alle reacties
Terug naar boven knop