Seu

Funcions per a Core Web Vitals Tactics amb HTMLRewriter de Cloudflare

La nostra Guia de proves A/B per a Core Web Vitals va explicar una sèrie de petits passos amb dos serveis i una extensió del navegador per escriure proves de tàctiques de codi frontal. Fa trenta anys, copiaríem la font en brut d'una pàgina per executar operacions de cerca i substitució fins que poguéssim gestionar un facsímil d'una pàgina col·locada en una carpeta habilitada per a la web per demostrar el mateix tipus de recomanacions.

Això ja no ho hem de fer.

La configuració d'un servidor intermediari invers i d'escriptura de programari per fer SEO fa vint anys es limitava a un petit conjunt d'empreses que construïen i allotjaven la infraestructura. Cloudflare ens ofereix ara una solució clau en mà. Podeu posar-vos en marxa amb un compte gratuït. Per canviar el codi d'interfície, feu servir el de Cloudflare HTMLRewriter() API de JavaScript.

El codi és relativament fàcil d'entendre.

Amb Core Web Vitals, és la immediatesa, la necessitat percebuda i la rapidesa de poder passar per diferents proves el que finalment demostra valor i realment impressiona. La plataforma fonamental està disponible per a vostè a través dels passos que es descriuen a la nostra guia. Escriurem funcions per fer canvis habituals perquè pugueu començar a provar tàctiques reals immediatament.

HTMLRewriter()

Si ho heu seguit, potser sabeu que el nostre script ofereix l'opció de carregar prèviament un element que podeu especificar en un paràmetre de sol·licitud per a LCP. Tornem un formulari quan falta el valor, només per facilitar l'afegir la vostra referència. També hi ha un marcador de posició per a alguna cosa anomenada importància, que també tractarem. El que és important és entendre què farem.

L' HTMLRewriter() L'API ens ofereix la possibilitat d'utilitzar selectors d'elements d'estil jQuery per adjuntar-los a elements HTML a la font de la pàgina en brut per executar JavaScript des d'aquest punt de partida. Podreu modificar elements, tot un grup d'elements o fins i tot el document base de maneres potents. Podeu editar el títol d'una pàgina, per exemple. En producció, la teva edició es converteix en el títol i és el que s'indexa a Google i Bing.

Una complicació que trobareu és que només podeu editar la font en brut, no un model d'objectes de document (DOM) hidratat. Una manera ràpida de veure la font en brut és amb la funcionalitat de visualització de font integrada del navegador. Amb Firefox, la font de visualització destaca els errors de validació en vermell, per exemple. Fins i tot quan els navegadors "arreglen" HTML trencat, això normalment es pot solucionar amb el nostre treballador.

Treballant dins de DevTools, la pestanya "Fonts" proporciona accés a la font en brut. Utilitzeu la configuració de preferències per "imprimir bastant" sempre la font, que la formatearà perquè pugueu escanejar el codi per buscar optimitzacions. Un altre consell de preferència és una configuració per evitar la memòria cau quan DevTools està obert. Aquest flux de treball us ajudarà a mesura que avanceu perquè les vostres optimitzacions no generin errors de referència.

Selectors d'elements

Quan trobeu alguna cosa amb la qual voleu arreglar HTMLRewriter(), haureu de restringir els canvis i aïllar l'element per evitar alterar més codi del que voleu. Utilitzeu el selector més exclusiu possible, que pot ser molt fàcil quan els elements tenen identificadors únics. En cas contrari, busqueu un senyal revelador, com ara una referència a una ubicació única href or src atributs.

Trobareu la possibilitat d'utilitzar comodins i expressions regulars d'estil vim del "mode d'ordres" que coincideixen amb els valors dels atributs. També podeu proporcionar més d'un criteri, fins i tot amb el mateix nom d'atribut. Utilitzeu els vostres poders vim per restringir les coincidències a elements individuals o fer coincidir un grup d'elements amb expressions més àmplies. Aleshores, la lògica pot separar les preocupacions entre els canvis.

Exemple d'elements d'enllaç d'obtenció prèvia del comodí "fonts.g" que coincideixen per eliminar-los per a: fonts.googleapis.com.

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

Exemple que mostra dues coincidències per a href atribut, reduint-lo a un sol fitxer entre molts.

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

El primer exemple anterior utilitza aquesta concordança de comodí on la cadena "fonts.g" pot aparèixer a qualsevol part del fitxer href atribut dels elements d'enllaç. És un exemple d'una concordança àmplia que es pot adjuntar a més d'un element d'enllaç per a una acció adequada, com ara eliminar els elements que coincideixen, si n'hi ha.

El segon exemple de dalt mostra com podeu seleccionar un element d'enllaç concret que comenci amb una cadena i acabi amb una altra cadena, però que pot tenir qualsevol cosa entre. Això és útil per seleccionar un únic element que forma part d'un sistema de compilació pel qual pot haver-hi un directori de testimoni de versions per a la destrucció de la memòria cau del navegador que s'anomena dinàmicament.

Elements d'enllaç

Els elements d'enllaç tenen múltiples facetes en virtut dels seus diversos atributs. Per tant, poden servir per a diversos propòsits. No s'ha de confondre amb els enllaços (com a les àncores), els elements d'enllaç solen ser on comenceu a buscar estratègies de rendiment ràpides. Alguns elements d'enllaç de precàrrega i preconnexió poden ser realment innecessaris o potser totalment innecessaris.

Només teniu un màxim de sis amfitrions per connectar-vos simultàniament. La teva primera estratègia serà aprofitar-les al màxim. Proveu d'eliminar totes les declaracions d'element d'enllaç d'hint de prioritat i proveu el resultat. Si els temps van malament, afegiu-los un a un i comproveu l'impacte real de cadascun. Haureu d'aprendre a llegir en profunditat el gràfic de la cascada WebpageTest.

Després d'això, les tàctiques es dirigeixen a la càrrega de recursos, que també implica força elements d'enllaç, però no exclusivament. En aquest punt, volem mirar també els guions. L'ordre en què es carreguen els recursos pot afectar les coses de manera molt negativa. El nostre banc de proves és perfecte per provar diverses tàctiques obtingudes de la lectura del gràfic de la cascada. Mantingueu obert el calaix de la consola de DevTools per comprovar si hi ha errors mentre treballeu.

Eliminació d'elements

Eliminar elements és excepcionalment senzill de fer. Un cop hàgiu seleccionat un element, o un grup d'ells, el camp següent HTMLRewriter().on() declaracions és on escriu un bloc d'script. Podeu fer-ho al seu lloc amb tirants arrissats. Podeu fer referència a una funció anomenada. O pots construir-ne un de nou class exemple per a un objecte definit anteriorment, que en aquest context pot ser una enginyeria excessiva.

Quan trobeu un codi de treball de mostra, és possible que ho vegeu class inicialitzadors. Tot el que realment es necessita per eliminar i l'element és la funció següent. Qualsevol cosa que es faci amb un objecte de classe amb nom es pot fer amb una funció senzilla (objecte) utilitzant menys codi, per a menys errors, amb una sintaxi més llegible i molt més ensenyable. Tornarem a visitar class constructors quan aprofundim en els objectes duradors.

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

En poques paraules, aquest bloc defineix una variable "el" en referència a la instància de l'element i el bloc de codi crida la funció integrada. remove() mètode element, que trobareu detallat a la documentació corresponent. Tots HTMLRewriter() Els mètodes d'element estan disponibles per utilitzar-los amb les instàncies de les coincidències dels vostres elements. Eliminar elements és un dels més senzills d'entendre.

Desbloqueig de recursos de bloqueig de renderització

Desbloqueig script elements és molt més fàcil que desbloquejar recursos del full d'estil. Per sort, tenim un atribut booleà per indicar al navegador que volem carregar un script de manera asíncrona o ajornar-lo del tot (per quan hi hagi temps d'inactivitat). Això és ideal! Els fulls d'estil, d'altra banda, necessiten una mica de "pirateig" per desbloquejar-los: requereixen una mica de Javascript en línia.

Bàsicament, convertim una referència d'element d'enllaç de full d'estil en precàrrega per desbloquejar-la. Però això canvia la naturalesa de l'element d'enllaç a un en què les regles d'estil no s'aplicaran. Precarrega els recursos de descàrrega per emmagatzemar-los a la memòria cau local, a punt per quan sigui necessari, però ja està. DevTools us avisa quan un recurs es carrega prèviament i no s'utilitza adequadament; és llavors quan sabeu que podeu eliminar-lo!

Precàrrega i després utilitzant un onload L'atribut per executar JavaScript per tornar-lo a canviar de precàrrega a full d'estil és el "pirateig" CSS per desbloquejar el que d'altra manera és un recurs de bloqueig de representació natural. Utilitzant JavaScript this paraula clau us permet canviar les seves propietats, inclosa la rel atribut (i el onload atribut en si). El patró també té un emplenament per a sessions que no són JavaScript.

Aquí és el nostre unblockCSS() funció que implementa l'estratègia utilitzant mètodes d'elements preparats.

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

Seleccioneu les referències del full d'estil de l'element d'enllaç que bloquegen la representació i crideu-hi aquesta funció. Permet que el navegador comenci a descarregar el full d'estil carregant-lo prèviament. Un cop carregat, el rel l'atribut torna al full d'estil i les regles CSS s'apliquen immediatament. Si es produeixen problemes d'estil després d'aquest canvi, s'han de carregar un o més fulls en l'ordre de sol·licitud normal.

La funció actua com un bloc de codi reutilitzable. Commuta les seleccions d'elements utilitzant HTMLRewriter() i prova la diferència desbloquejant els fulls CSS d'un en un o en grups, segons el teu enfocament. Utilitzeu la tàctica per aconseguir una estratègia global de desbloqueig tant com pugueu. Tanmateix, recordeu sempre de buscar problemes derivats dels canvis als recursos CSS i Script.

Prioritats del guió

L'ordre en què carregueu els estils pot alterar el disseny. Les regles del full d'estil de càrrega ràpida inesperada sobreescriuran les que s'han carregat més lentament. També heu de mirar mentre carregueu els scripts en ordre alternatiu perquè s'avaluïn i siguin residents a la memòria quan s'avaluï el document. Els errors de referència poden arribar a desenes o centenars d'errors d'script.

La millor manera de comprovar si hi ha problemes és mirar el calaix de la consola i simular connexions de xarxa lentes. Això pot exagerar els problemes fins al punt que haurien de ser evidents a DevTools. Si els recursos de l'script es processen amb CPU més potents i es carreguen a la velocitat del mòdem per cable, o més ràpid, és possible que us perdeu un error crític. Les sol·licituds també estan ben espaiades.

Aquí teniu la nostra funció canviant, o afegint, sincronitzant i diferint atributs.

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

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

Si una seqüència de comandaments originalment no té sincronització o diferit, és inofensiu executar el fitxer removeAttribute() mètode d'element per a un bloc de codi més reutilitzable. Podeu ignorar-ho amb seguretat si esteu treballant ràpidament en un projecte únic en el qual podríeu estar escrivint-ho en línia en lloc de cridar una funció que heu definit anteriorment a l'script.

Atributs alternatius per a SEO

Com s'ha esmentat, la nostra Guia de tàctiques A/B Core Web Vitals estava pensada, per disseny, perquè tinguéssim un banc de proves d'Edge Computing completament funcional per demostrar contingut amb futurs articles de SEO per a desenvolupadors i esdeveniments futurs. Durant el nostre esdeveniment SMX West l'any passat (2021), vam demostrar l'ús de Cloudflare Workers per a un lloc web, aconseguint focs artificials Lighthouse (puntuació de 100 en totes les seves proves).

Hi ha moltes coses que s'han de posar al seu lloc per aconseguir els focs artificials. Un aspecte important és que totes les imatges han de ser vàlides alt atributs. La prova pot detectar quan entra el text alt els atributs són "no descriptius" o presents, però buits. Necessites paraules que representin el que hi ha a la imatge associada. Una manera de fer-ho podria ser analitzar el nom del fitxer des del fitxer src atribut.

Aquí hi ha una funció que extreu text img src atributs al poder alt text dels noms de fitxer amb guions.

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

En poques paraules, això buscarà la condició a les imatges on no n'hi ha alt valor d'atribut. Quan hi ha una probabilitat src El nom del fitxer d'atribut està guionat, substituirà els guions per espais per formular el que pot ser un valor adequat. Aquesta versió no funcionarà en la majoria dels casos. No substitueix les barres inclinades ni el protocol i el domini. Això només serveix com a punt de partida.

Per què ens importa?

Tenir un banc de proves per provar diverses tàctiques d'optimització del rendiment de Core Web Vitals és increïblement impressionant per als propietaris del lloc. Hauríeu de tenir aquesta capacitat a l'arsenal de la vostra agència. Un lleuger augment de la classificació de Google amb bones puntuacions és mesurable i en gran mesura assolible per a la majoria de llocs mitjançant tàctiques que discutirem i demostrarem. Sintonitza una actuació en directe del 8 al 9 de març.

Els tècnics de SEO fa temps que recomanen millores de rendiment per a la classificació dels motors de cerca. El benefici per als rànquings mai ha estat tan clar. Google va definir literalment les mètriques i publica sobre el seu efecte. Tenim treballadors de Cloudflare per implementar remeis de SEO Edge, com es demostra aquí alt atributs de les imatges. El nostre banc de proves de proxy invers en virtut de Cloudflare estableix l'escenari per a una comunicació rica amb els desenvolupadors.

Articles Relacionats

답글 남기기

이메일 주소는 공개되지 않습니다.

Torna al botó superior