Evoluzione delle tattiche di Core Web Vitals utilizzando Cloudflare e WebpageTest

Nella nostra guida alle tattiche di Core Web Vitals utilizzando Cloudflare e WebpageTest, abbiamo delineato i requisiti di base per l'utilizzo di Cloudflare come proxy inverso per testare le modifiche tattiche HTML con WebpageTest. La nostra versione del test è semplificata dal concetto originale di Patrick Meenan, che utilizza HTMLRewriter() per selezionare un elemento e modificare il codice.

Approfondiremo questo tutorial, ma se stai solo cercando lo script di Cloudflare Worker, puoi trovarlo qui.

La nostra prima puntata ha notato che non terrà il passo con i cambiamenti in Search Engine Land. L'LCP era codificato e ne avremmo avuto bisogno per interagire con una pagina dinamica e i suoi valori. Sebbene WebpageTest abbia, al momento della pubblicazione, il grafico a cascata più ben congegnato e più dettagli di quanto tu possa immaginare, non è il modo più veloce per ottenere risultati.

Faro dalla linea di comando

L'esecuzione del programma Lighthouse CLI (Command Line Interpreter) con le opzioni --extra-headers necessarie per il test ci consente di simulare anche le impostazioni standard per Core Web Vitals come abbiamo fatto con WebpageTest. Dovrai lavorare da un emulatore di terminale.

Il modo più semplice per installare Lighthouse è con NPM (Node Package Manager). Una volta installato, eseguire la seguente istruzione:

$ lighthouse https://sel.deckart.workers.dev \
--extra-headers "{\"x-host\":\"searchengineland.com\", \"x-bypass-transform\":\"false\"}" \
--form-factor=mobile \
--throttling.cpuSlowdownMultiplier=4 \
--only-categories=performance \
--view

L'evoluzione del nostro Testbed

Il nostro obiettivo è dimostrare un'evoluzione da un concetto originale per un banco di prova a un progetto adatto ai nostri eventi e articoli futuri. Il banco di prova non dovrebbe limitarsi all'esecuzione di valutazioni delle prestazioni; è proprio da lì che inizieremo. Ma deve funzionare abbastanza bene per un certo numero di situazioni con i siti Web e questo può rivelarsi piuttosto difficile. Forniremo metodi per aiutare.

Ad esempio, i siti utilizzano spesso percorsi relativi alle risorse delle risorse anziché assoluti (con protocollo HTTP e tutto). Forniremo un blocco che corrisponda a questi in modo che l'HTML funzioni generalmente. Dopo aver applicato questo, quando le cose continuano a non funzionare, cambiare i riferimenti problematici tra i nomi host del test e del soggetto del test spesso fa il trucco, anche per le violazioni delle policy CORS.

È qui che brilla davvero la bellezza di HTMLRewriter() di Cloudflare. Le risorse a livello di sito vengono generalmente caricate come elementi figlio HEAD della pagina. Con una corrispondenza flessibile come jQuery, anche una sintassi simile, possiamo selezionare elementi figlio di HEAD quando necessario. È possibile utilizzare i selettori XPath e le espressioni regolari. Manteniamo le cose semplici e cerchiamo percorsi relativi che iniziano con "/" per gli attributi src o href :

 return new HTMLRewriter() .on('link', { element: el => { const link_href = el.getAttribute('href'); if (link_href && link_href.startsWith('/')) { el.setAttribute('href', 'https://' + host + link_href); } } }) .on('script', { element: el => { const script_src = el.getAttribute('src'); if (script_src && script_src.startsWith('/')) { el.setAttribute('src', 'https://' + host + script_src); } } }) .on('img', { element: el => { const img_src = el.getAttribute('src'); if (img_src && img_src.startsWith('/')) { el.setAttribute('src', 'https://' + host + img_src); } } })

Stiamo sfruttando la potenza (e l'economicità) dell'Edge Computing per condurre test davvero utili. Modifica l'intestazione della richiesta x-host per caricare diversi siti nel banco di prova e apri DevTools. Potrebbero non essere necessarie trasformazioni, ma il tuo chilometraggio varierà. L'esperienza del frontend ti dà un'idea.

I blocchi di commento come gli interruttori falliranno e richiederanno un po' di sperimentazione (che potrebbe essere tutto ciò di cui hai bisogno). Ad esempio, alcuni riferimenti alle risorse possono essere scritti senza i due punti HTTP. Dovresti scrivere un altro condizionale per verificare i percorsi in cui href o src iniziano con "//" e quindi modificare il valore dell'elemento selezionato nello script. Cerca di finire senza errori della console che il sito reale non ha.

Il faro ti dà LCP

È relativamente facile recuperare i riferimenti LCP utilizzando Lighthouse, PageSpeed ​​Insights o WebpageTest. Presumendo che l'LCP si qualifichi per il precaricamento, come quando non è un <div> o un <p> e quando non è già stato precaricato, fornisci al nostro script il valore href tramite la struttura 'query param' dell'URL (o restituisci l'HTML con un form) per verificare le modifiche ai tempi LCP di una pagina con il precaricamento.

La maggior parte dei professionisti SEO tecnici è a portata di mano nel modificare i parametri delle query di richiesta per elaborare cose diverse nei programmi lato server, come i risultati di ricerca di Google. Utilizzando la stessa interfaccia, il nostro script precaricherà l'LCP utilizzando il percorso che applichi nel valore del parametro "lcp" e lo passerà a una funzione chiamata addPreloadAfter() per l'interpolazione dell'HTML per il test.

 async function handleRequest(request) { const { searchParams } = new URL(request.url); let lcpHref = searchParams.get("lcp"); return new HTMLRewriter() .on('title', addPreloadAfter(lcpHref)) .transform(newResponse); }

La funzione addPreloadAfter() prende il nostro valore "lcpHref" da searchParams.get() e lo elabora come "href" per creare HTML.

 const addPreloadAfter = (href) => ({ element: (el) => { el.after(`<link rel="preload" href="${href}" />`, { html: true }); } });

Notare l'opzione "html: true"? Questa è un'impostazione di opzione richiesta da Cloudflare per la sicurezza quando si utilizzano i metodi API di Workers con HTMLRewriter() che scrivono HTML. Vorrai imparare le sue capacità e i suoi vincoli per la codifica dei tuoi test.

KV di Cloudflare

Se mai faremo qualcosa di remotamente interessante, abbiamo bisogno di un modo per archiviare dati persistenti tra le esecuzioni di script. Fortunatamente, Cloudflare offre anche un piccolo meccanismo di archiviazione dei dati chiamato KV che possiamo associare ai nostri lavoratori per memorizzare un piccolo campo " value " di dati, accessibile dalla sua " key ". È sorprendentemente facile da comprendere e implementare. Per dimostrare come usarlo, scriveremo un piccolo contatore di visite.

 const counter = parseInt(await KV.get('counter') || 0); if (!host || counter > 1000) { return new Response('hit limit exceeded or x-host missing', {status: 403}); } else { await KV.put("counter", counter + 1); }

Trova la voce del menu di navigazione KV sotto Lavoratori.

Dopo aver creato uno spazio dei nomi ("SEL" è utilizzato nell'esempio sopra), utilizzare l'interfaccia utente del dashboard KV per creare la prima chiave (" counter " nel caso precedente) e assegnare un value iniziale . Una volta impostato, torna alla dashboard Worker per l'interfaccia richiesta per associare il nostro nuovo spazio dei nomi KV con Cloudflare Workers in modo che possano accedere alle chiavi e ai valori memorizzati associati.

Associa gli spazi dei nomi KV ai lavoratori

Scegli il lavoratore con cui vuoi associare e fai clic sul suo menu Impostazioni per trovare il sottomenu per Variabili (direttamente in Generale). Si noti che è possibile definire variabili di ambiente, associazioni di oggetti durevoli (che esploreremo in una puntata futura) e infine associazioni di spazi dei nomi KV. Fare clic su Modifica variabili e aggiungere la variabile che si desidera utilizzare nello script.

Nel caso seguente, puoi vedere la nostra variabile ' KV ' con nome ridondante che useremo nello script di lavoro associato, quello da cui abbiamo navigato. Il nostro uso di ' KV ' è stato chiamato a scopo illustrativo. Selezionalo dal menu a discesa, salvalo e sarai immediatamente in grado di utilizzare la tua variable nello script. Crea tutte le combinazioni di script e spazi dei nomi KV che desideri.

Il trucco è ricordarsi di associare una variabile che si desidera utilizzare nel Worker. È così flessibile che all'inizio puoi sentirti libero di sgranocchiare e fare un pasticcio. Probabilmente sarai in grado di organizzarlo in qualcosa di coeso in un secondo momento, che è esattamente ciò che desideri per essere in grado di creare prototipi di applicazioni o creare microservizi da utilizzare nelle tue applicazioni.

Dopo aver ottenuto il servizio KV e aver impostato i valori iniziali, torna a Worker e apri la "Modifica rapida" incorporata. Sostituisci quello che c'è con questo succo aggiornato, che include il contatore delle visite e tutto il resto scritto in questo post. Fai clic su "Salva e distribuisci" e dovresti avere il servizio attivo e funzionante al tuo URL demo di Workers pubblicamente disponibile.

Perché ci preoccupiamo

La nostra guida originale aveva lo scopo di stuzzicare l'appetito, entusiasmarti per iniziare ed entusiasta per un apprendimento più prezioso. Per fornire ciò, abbiamo una piattaforma gratuita e una combinazione di codice che è abbastanza semplice da capire da sola, insieme a un processo che dovrebbe essere abbastanza facile da seguire e ottenere un risultato del test.

La standardizzazione dei test dei siti Web per dimostrare la SEO agli sviluppatori non dovrebbe richiedere la comprensione del codice quando puoi copiare e incollare script in Cloudflare, seguire i passaggi e testare determinate tattiche SEO. I test di Core Web Vitals sono affidabili quanto quello che otterremo per migliorare i punteggi delle prestazioni RUM (Real User Metrics) per aumentare le classifiche, dato quanto dipendono dalle metriche.

Vuoi più SEO per gli sviluppatori? Unisciti a noi per la formazione SMX Master Class, guidata da Detlef Johnson, dall'8 al 9 marzo 2022.