Ghidul tău pentru tacticile Core Web Vitals folosind Cloudflare și WebpageTest

Publicat: 2022-01-12

Una dintre cele mai bune modalități de a putea efectua modificări tactice la codul paginii web și de a îmbunătăți scorurile Core Web Vitals este să stabiliți o comparație, cum ar fi testarea A/B. În calitate de dezvoltator, puteți rula Lighthouse în mediul dvs. de dezvoltare local și puteți testa pe măsură ce faceți modificări. Este încă util să testați codul de producție, ceea ce trebuie să faceți oricum când nu sunteți dezvoltatorul.

Am folosit o stivă demonstrativă ingenioasă în Core Web Vitals Site Clinic tocmai în decembrie anul trecut, în SMX Build: SEO for Developers. Vom continua să-l folosim în cursul viitor SMX Master Class și de acum înainte cu seria noastră de postări SEO pentru dezvoltatori.

Iată cum să testați scorurile Core Web Vitals și modificările codului folosind Cloudflare Workers ca proxy invers și WebpageTest. Toate aceste servicii sunt gratuite și cu siguranță nu suntem primii care le folosesc. Patrick Meenan, dezvoltator WebpageTest, a gândit totul. Vom descrie cum să începem fără toate sarcinile grele.

Cloudflare și WebpageTest

Aplicația Cloudflare Workers ne oferă bancul nostru de testare proxy invers și codul de transformare folosind mediul proxy. În timp ce există un loc de joacă la cloudflareworkers.com, adresele URL fragmentate de la acea adresă ne împiedică să testăm fără un cont Cloudflare (cel gratuit funcționează). Nu aveți nevoie de un cont WebpageTest.

După ce aveți un cont Cloudflare, navigați la Lucrători și faceți clic pentru a crea un lucrător nou cu butonul Creați un serviciu. Aceasta va popula un exemplu de lucrător JavaScript cu un editor de UI pe care îl puteți accesa cu butonul Editare rapidă. Fiecare lucrător pe care îl creați primește o adresă URL unică. Îl puteți redenumi oricând. Am creat unul la: https://sel.deckart.workers.dev în acest scop.

Dacă navigați, observați cerința „antet x-host”. Cerința limitează cererile la testare. Folosim o extensie de browser pentru a modifica cererile, adăugăm antetul x-host necesar pentru a furniza script-ului gazda pe care dorim să o testăm. Să modificăm solicitările din browser, astfel încât să putem vizualiza pagina, vizualiza-sursa și să rulăm DevTools.

Navigați prin teste cu ModHeader

Vom folosi ModHeader care acceptă browserele majore. În cazul nostru, am instalat extensia Chrome și am adăugat două anteturi personalizate, așa cum se arată mai jos. Antetul x-host oferă gazda pe care vrem să o proxy pentru testul nostru, iar antetul x-bypass-transform activează și dezactivează transformarea, astfel încât să putem testa diferența.

Cu x-bypass-transform setată la o valoare „adevărată”, transformarea este dezactivată. Putem apoi vizualiza sursa pentru a căuta tactici de testat. Cu antetul x-host instalat, așa cum este descris mai sus, puteți naviga la adresa URL a lucrătorului și ar trebui să puteți vedea pagina de pornire a Search Engine Land, să vedeți codul sursă și să deschideți DevTools.

Configurați-vă propriul lucrător

Sarcina lucrătorului este să obțină valorile antetului și să proceseze cererile în consecință. Vom rezuma scriptul mai jos, lăsând afară câteva detalii care nu sunt importante în acest moment.

Adresele URL proxy care utilizează valoarea antetului x-host.
Transformați cererile care au o valoare de antet de acceptare cu „text/html” în șir.
Ocoliți transformarea când valoarea antetului x-bypass-transform este adevărată.
Transformați codul HTML atunci când antetul x-bypass-transform lipsește sau valoarea este falsă.

Dacă ați scris vreodată un bloc de cod cu flux de control condiționat, atunci aceste sarcini ar trebui să fie destul de ușor de imaginat scriindu-vă în JavaScript. Întrebarea mai interesantă devine atunci: Cum vom transforma HTML? Acolo este magia HTMLRewriter(). Copiați Gist-ul de bază al lucrătorului și înlocuiți-vă lucrătorul implicit cu sursa brută.

Configurarea WebpageTest pentru comparații

Scriptul de lucru de bază efectuează o singură transformare. Preîncărcând imaginea LCP, am respins cererea de câteva locuri în coadă. Acest lucru a luat timpul de încărcare a LCP mobil de la peste 5 secunde la mai puțin de 4, o îmbunătățire de aproximativ 500 ms. Pentru a reproduce acest lucru, scriptul nostru trebuie să țină pasul cu modificările. Ideea este să vă pregătiți pentru teste cu SEO pentru dezvoltatori și pentru propria dvs. muncă.

Acum că putem face modificări A/B în browser, cum am folosit WebpageTest pentru a obține diferența dintre scoruri? Obținem referințe ale elementelor LCP ca parte a diagramei detaliate cu cascadă, care este cea mai utilă hartă a noastră pentru a vizualiza efectele schimbărilor noastre tactice. Ne uităm la ordinea cererii și intenționăm să schimbăm ordinea în care se încarcă resursele pentru a îmbunătăți viteza.

Punctul nostru de plecare va fi WebpageTest cu adresa URL (și nu proxy invers). Acest lucru se datorează faptului că adresele URL Cloudflare Worker au condiții diferite față de furnizorul de gazdă de origine. De exemplu, gazda poate funcționa folosind protocolul HTTP/1.1 mai vechi, în timp ce Cloudflare face upgrade la HTTP/2 ca parte a serviciului său. Acest prim raport WebpageTest ar trebui folosit pentru dezvoltarea tacticilor.

În continuare, vom rula un test scriptat la WebpageTest pentru a furniza anteturile personalizate necesare pentru testarea A/B a modificărilor noastre folosind URL-ul proxy invers. Pentru a simula condițiile Core Web Vitals, WebpageTest are un buton ușor de găsit. Este bine să utilizați acest lucru pentru testul inițial. Va trebui să editați setările la testele ulterioare, iar pagina cu butonul Core Web Vitals nu are interfața de utilizare pentru asta.

În schimb, utilizați testul implicit pentru pagina de pornire și puneți adresa URL de origine în câmpul de introducere a testului. Schimbați meniul derulant al browserului pentru a selecta „Motorola G (gen 4).” Deschideți dialogul Setări avansate și modificați meniul derulant Conexiune pentru a selecta „4G (9 Mbps, 170 ms RTT).” Faceți clic pe fila „Avansat” și căutați câmpul Anteturi personalizate unde vom adăuga următoarele antete.

Nu vom ocoli transformările în acest moment, așa că setăm valoarea false. Continuând mai departe, trebuie să scriem testul astfel încât WebpageTest să ignore faptul că punem https://searchengineland.com în câmpul de testare și, în schimb, va prelua de la proxy-ul nostru invers, care este necesar, astfel încât testul să poată schimba corect gazda în documentul HTML de bază. Comutați la fila Script și adăugați următoarele.

Veți dori să înlocuiți toate șirurile URL pentru a se potrivi cu propriile dvs. teste după ce v-ați configurat cu Cloudflare. Rulând testul scriptat, veți putea obține coada de solicitări lovitură cu lovitură cu timpi și detalii mai mult decât suficiente pentru a dezvolta tactici pentru îmbunătățirea Core Web Vitals cu aproape orice pagină web. Majoritatea paginilor web sunt ușor de proxy, dar kilometrajul dvs. poate varia.

De ce ne pasă

Core Web Vitals este un factor de clasare Google User Experience. S-ar putea să nu fie cel mai puternic impuls pentru clasarea dvs. lângă, să zicem, optimizarea titlurilor paginilor. Google a spus că îți va îmbunătăți clasamentul în funcție de scorurile tale. Ei au declarat că nu aveți nevoie de toate elementele vitale pentru a nota Bun pentru a vă bucura de beneficiu. Scorul tău optim este 90+ și odată ce ai atins pragul, un scor mai mare de 90 nu este mai bun decât 90 în sine.