SEO

„Core Web Vitals“ taktikos funkcijos su „Cloudflare“ HTMLRewriter

Mūsų pagrindinio žiniatinklio gyvybinių funkcijų A/B testavimo vadove paaiškinta keletas nedidelių žingsnių naudojant dvi paslaugas ir naršyklės plėtinį, kad būtų galima parašyti sąsajos kodo taktikos testus. Prieš trisdešimt metų kopijuodavome neapdorotą puslapio šaltinį, kad vykdytume paieškos ir keitimo operacijas, kol galėtume tvarkyti puslapio faksimilę, įdėtą į aplanką su žiniatinkliu, kad pateiktume tokias pačias rekomendacijas.

Mes nebeturime to daryti.

Atvirkštinio tarpinio serverio nustatymas ir programinės įrangos rašymas SEO vykdymui prieš dvidešimt metų buvo apribotas nedaugeliu įmonių, kurios pačios sukūrė ir priglobė infrastruktūrą. „Cloudflare“ dabar mums siūlo galutinį sprendimą. Galite pradėti dirbti naudodami nemokamą paskyrą. Norėdami pakeisti sąsajos kodą, naudokite „Cloudflare's“. HTMLRewriter() JavaScript API.

Kodas yra gana lengvas suprasti.

Naudojant Core Web Vitals, betarpiškumas, suvokiamas poreikis ir greita galimybė atlikti įvairius testus galiausiai parodo vertę ir daro įspūdį. Pagrindinė platforma pasiekiama atlikus veiksmus, aprašytus mūsų vadove. Parašysime įprastų pakeitimų funkcijas, kad galėtumėte iš karto pradėti išbandyti tikrą taktiką.

HTMLRewriter()

Jei sekėte, galbūt žinote, kad mūsų scenarijus suteikia galimybę iš anksto įkelti elementą, kurį galite nurodyti LCP užklausos parametre. Kai trūksta reikšmės, grąžiname formą, kad būtų lengviau pridėti nuorodą. Taip pat yra vietos žymeklis tam, kuris vadinamas svarba, kurią taip pat aptarsime. Svarbiausia yra suprasti, ką ketiname daryti.

Šis HTMLRewriter() API suteikia mums galimybę naudoti jQuery stiliaus elementų parinkiklius, kad būtų galima pridėti prie HTML elementų neapdorotame puslapio šaltinyje ir paleisti JavaScript iš tos atramos. Galėsite galingais būdais modifikuoti elementus, visą elementų grupę ar net pagrindinį dokumentą. Pavyzdžiui, galite redaguoti puslapio pavadinimą. Gamyboje, jūsų redagavimas tampa pavadinimas ir tai indeksuojama „Google“ ir „Bing“.

Viena iš komplikacijų, su kuriomis susidursite, yra ta, kad galite redaguoti tik neapdorotą šaltinį, o ne hidratuotą dokumento objekto modelį (DOM). Vienas greitas būdas peržiūrėti neapdorotą šaltinį yra naršyklėje integruota rodinio šaltinio funkcija. Pavyzdžiui, naudojant „Firefox“ peržiūros šaltinis patvirtinimo klaidas paryškina raudonai. Net kai naršyklės „pataiso“ sugadintą HTML, dažniausiai tai gali būti ištaisyta su mūsų darbuotoja.

„DevTools“ skirtukas „Šaltiniai“ suteikia prieigą prie neapdoroto šaltinio. Naudokite pirmenybės nustatymus, kad visada būtų „gražiai spausdinamas“ šaltinis, kuris jį suformatuos, kad galėtumėte nuskaityti kodą ir ieškoti optimizavimo. Kitas patarimas yra nustatyti talpyklos apeiti, kai DevTools atidarytas. Ši darbo eiga padės jums, kad optimizuodami nebūtų nuorodų klaidų.

Elementų parinkikliai

Kai pastebite ką nors, ką norite taisyti HTMLRewriter(), turėsite susiaurinti pakeitimus ir izoliuoti elementą, kad nepakeistumėte daugiau kodo, nei ketinate. Naudokite išskirtinį įmanomą parinkiklį, kuris gali būti labai paprastas, kai elementai turi unikalius ID. Kitu atveju suraskite įspėjamąjį ženklą, pvz., nuorodą į unikalią vietą href or src atributai.

Rasite galimybę naudoti pakaitos simbolius ir „komandų režimo“ vim stiliaus reguliariąsias išraiškas, atitinkančias atributų reikšmes. Taip pat galite pateikti daugiau nei vieną kriterijų, net naudodami tą patį atributo pavadinimą. Naudokite savo vim galias, kad susiaurintumėte atitikmenis iki atskirų elementų arba suderintumėte elementų grupę su platesnėmis išraiškomis. Tada logika gali atskirti rūpesčius tarp pakeitimų.

Pavyzdys, atitinkantis pakaitos simbolio „fonts.g“ išankstinio gavimo nuorodos elementus, kad būtų pašalinti šie: fonts.googleapis.com.

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

Pavyzdys, rodantis dvi atitiktis href atributas, susiaurindamas jį vienu failu tarp daugelio.

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

Pirmajame aukščiau pateiktame pavyzdyje naudojama pakaitos simbolių atitiktis, kai eilutė „fonts.g“ gali būti bet kurioje vietoje href nuorodos elementų atributas. Tai plačios atitikties pavyzdys, kuris gali būti prijungtas prie daugiau nei vieno nuorodos elemento, kad būtų atliktas tinkamas veiksmas, pvz., būtų pašalintas (-i) atitinkantis (-i) elementas (-ai), jei toks yra.

Antrame aukščiau pateiktame pavyzdyje parodyta, kaip galite pasirinkti konkretų nuorodos elementą, kuris prasideda eilute ir baigiasi kita eilute, bet gali turėti bet ką. Tai naudinga pasirenkant vieną elementą, kuris yra kūrimo sistemos dalis, nes gali būti dinamiškai pavadintas versijų atpažinimo atpažinimo katalogas, skirtas naršyklės talpyklos išjungimui.

Nuorodų elementai

Nuorodų elementai yra daugialypiai dėl kelių jų atributų. Taigi jie gali būti naudojami įvairiems tikslams. Negalima painioti su nuorodomis (kaip inkaruose), nuorodų elementai paprastai yra ten, kur pradedate ieškoti greitų efektyvumo strategijų. Kai kurie išankstinio įkėlimo ir išankstinio prijungimo nuorodų elementai iš tikrųjų gali trukdyti arba visai nebūtini.

Vienu metu galite prisijungti ne daugiau kaip šešis pagrindinius kompiuterius. Jūsų pirmoji strategija bus kuo geriau išnaudoti juos. Pabandykite pašalinti visus prioritetinių užuominų nuorodos elemento teiginius ir patikrinkite rezultatą. Jei laikas neteisingas, pridėkite juos po vieną ir patikrinkite tikrąjį kiekvieno iš jų poveikį. Turėsite išmokti nuodugniai perskaityti „WebpageTest“ krioklio diagramą.

Po to taktika pereina į išteklių įkėlimą, kuris taip pat apima gana daug nuorodų elementų, bet ne tik. Šiuo metu norime pažvelgti ir į scenarijus. Išteklių įkėlimo tvarka gali labai neigiamai paveikti dalykus. Mūsų bandomoji vieta puikiai tinka išbandyti įvairias taktikas, nustatytas skaitant krioklio diagramą. Laikykite DevTools konsolės stalčių atidarytą, kad dirbdami patikrintumėte, ar nėra klaidų.

Elementų pašalinimas

Elementų pašalinimas yra ypač paprastas. Pasirinkę elementą arba jų grupę, kitas laukas HTMLRewriter().on() teiginiai yra vieta, kur rašote scenarijaus bloką. Tai galite padaryti vietoje su garbanotomis petnešomis. Galite nurodyti pavadintą funkciją. Arba galite pastatyti naują class anksčiau apibrėžto objekto pavyzdys, kuris šiame kontekste gali būti pernelyg sudėtingas.

Kai pamatysite pavyzdinį darbuotojo kodą, galite pamatyti class inicializatoriai. Viskas, ko tikrai reikia norint pašalinti ir elementą, yra ši funkcija. Viskas, kas daroma su pavadintu klasės objektu, gali būti padaryta naudojant paprastą funkciją (objektą), naudojant mažiau kodo, kad būtų mažiau klaidų, lengviau skaitoma sintaksė ir kur kas lengviau išmokyti. Apsilankysime dar kartą class konstruktoriai, kai gilinamės į patvarius objektus.

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

Trumpai tariant, šis blokas apibrėžia kintamąjį „el“, atsižvelgdamas į elemento egzempliorių, o kodo blokas iškviečia įtaisytąjį remove() elemento metodas, kurį išsamiai rasite atitinkamuose dokumentuose. Visi HTMLRewriter() elementų metodus galite naudoti su elementų atitikmenų egzemplioriais. Elementų pašalinimas yra vienas iš paprasčiausių dalykų.

Atblokuoti pateikimo blokavimo ištekliai

Atblokavimas script elementų yra daug lengviau nei atblokuoti stiliaus lapo išteklius. Jei pasisektų, turime loginį atributą, skirtą naršyklei signalizuoti, kad norime asinchroniškai įkelti scenarijų arba visiškai jį atidėti (kai yra neveikos laikas). Tai idealu! Kita vertus, stilių lapus reikia šiek tiek „nulaužti“, kad jie būtų atblokuoti – jiems reikia tam tikro „Javascript“.

Iš esmės paverčiame stiliaus lapo nuorodos elemento nuorodą į išankstinį įkėlimą, kad ją atblokuotume. Tačiau tai pakeičia nuorodos elemento pobūdį į tokį, kuriame stiliaus taisyklės nebus taikomos. Išankstinis įkėlimas atsisiunčia išteklius, kad saugotų juos vietinėje talpykloje, paruoštas prireikus, bet viskas. DevTools įspėja, kai išteklius yra iš anksto įkeltas ir netinkamai naudojamas – tada žinote, kad galite jį pašalinti!

Iš anksto įkeliant ir tada naudojant an onload atributas, skirtas paleisti „JavaScript“, kad būtų grąžintas išankstinis įkėlimas į stiliaus lentelę, yra CSS „nulaužimas“, skirtas atblokuoti tai, kas kitu atveju yra natūraliai atvaizduojamas blokuojantis šaltinis. Naudojant JavaScript this raktinis žodis leidžia pakeisti jo savybes, įskaitant rel atributas (ir onload pati savybė). Šablonas taip pat turi užpildymą ne JavaScript seansams.

Štai mūsų unblockCSS() funkcija, kuri įgyvendina strategiją naudojant paruoštus elementų metodus.

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

Pasirinkite nuorodos elemento stiliaus lapo nuorodas, kurios blokuoja pateikimą, ir iškvieskite šią funkciją. Tai leidžia naršyklei pradėti atsisiųsti stiliaus lapą iš anksto jį įkeliant. Įkėlus, rel atributas persijungia atgal į stiliaus lapą ir CSS taisyklės bus nedelsiant taikomos. Jei po šio pakeitimo kyla stiliaus problemų, vieną ar daugiau lapų reikia įkelti įprasta užklausos tvarka.

Funkcija veikia kaip daugkartinio naudojimo kodo blokas. Perjunkite elementų pasirinkimą naudodami HTMLRewriter() ir išbandykite skirtumą atblokuodami CSS lapus po vieną arba grupėmis, atsižvelgiant į jūsų požiūrį. Pasinaudokite taktika, kad pasiektumėte bendrą strategiją, atblokuojančią tiek, kiek galite. Tačiau visada nepamirškite ieškoti problemų, kylančių dėl CSS ir scenarijaus išteklių pakeitimų.

Scenarijaus prioritetai

Stilių įkėlimo tvarka gali sugadinti dizainą. Netikėtai greitai įkeltos stilių lentelės taisyklės perrašys lėčiau įkeliamas taisykles. Taip pat turite žiūrėti įkeldami scenarijus alternatyvia tvarka, kad jie būtų įvertinti ir išliktų atmintyje, kai vertinamas dokumentas. Nuorodų klaidos gali padidėti iki dešimčių ar šimtų scenarijaus klaidų.

Geriausias būdas patikrinti, ar nėra problemų, yra stebėti konsolės stalčių ir imituoti lėtus tinklo ryšius. Tai gali perdėti problemas tiek, kad jos turėtų būti akivaizdžios „DevTools“. Jei scenarijaus ištekliai apdorojami naudojant galingesnius CPU ir apkraunamas per kabelinio modemo greitį arba greičiau, gali būti, kad praleisite kritinę klaidą. Prašymai taip pat gražiai paskirstomi.

Čia yra mūsų funkcija, keičianti arba pridedant asinchronizavimo ir atidėjimo atributus.

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

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

Jei scenarijus iš pradžių neturi asinchronizavimo arba atidėjimo, jį paleisti nekenksminga removeAttribute() elemento metodas, skirtas daugkartiniam kodo blokui. Galite to nepaisyti, jei greitai dirbate su vienkartiniu projektu, kuriame galbūt rašote šį tekstą, o ne iškviečiate funkciją, kurią anksčiau apibrėžėte scenarijuje.

Alt atributai SEO

Kaip minėta, mūsų „A/B Core Web Vitals“ taktikos vadovas buvo sukurtas tam, kad būtų sukurta ir paleista visiškai veikianti „Edge Computing“ bandomoji sistema, kad parodytume turinį su būsimais SEO kūrėjams straipsniuose ir būsimuose renginiuose. Per savo SMX West renginį praėjusiais metais (2021 m.) pademonstravome, kad svetainėje naudojame „Cloudflare Workers“ ir pasiekėme „Lighthouse“ fejerverkus (visuose bandymuose surinkome 100 balų).

Norint gauti fejerverkų, reikia daug dalykų. Vienas svarbus aspektas yra tai, kad visi vaizdai turi galioti alt atributai. Testas gali nustatyti, kada tekstas įvedamas alt atributai yra „neapibūdinami“ arba esami, bet tušti. Jums reikia žodžių, vaizduojančių tai, kas yra susijusiame paveikslėlyje. Vienas iš būdų tai padaryti gali būti išanalizuoti failo pavadinimą iš src atributas.

Čia yra funkcija, kuri ištraukia tekstą img src atributai valdžiai alt tekstas iš failų pavadinimų su brūkšneliais.

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

Trumpai tariant, tai ieškos sąlygos vaizduose, kuriuose jos nėra alt atributo vertė. Kai yra tikimybė, kad src atributo failo pavadinimas yra brūkšneliu, jis pakeis brūkšnelius tarpais, kad suformuluotų, kas gali būti tinkama reikšmė. Ši versija daugeliu atvejų neveiks. Jis nepakeičia pasvirųjų brūkšnių arba protokolo ir domeno. Tai yra tik atskaitos taškas.

Kodėl mums tai rūpi

Svetainių savininkams nepaprastai įspūdinga turėti bandymų lauką, skirtą išbandyti įvairias „Core Web Vitals“ našumo optimizavimo taktikas. Šią galimybę turėtumėte turėti savo agentūros arsenale. Nedidelis „Google“ reitingo padidėjimas su gerais balais yra išmatuojamas ir iš esmės pasiekiamas daugumoje svetainių taikant taktiką, kurią aptarsime ir parodysime. Prisijunkite prie gyvo pasirodymo kovo 8–9 d.

SEO technikai jau seniai rekomendavo pagerinti paieškos sistemos reitingavimą. Reitingavimo pranašumai niekada nebuvo tokie aiškūs. „Google“ tiesiogine prasme apibrėžė metrikas ir skelbia apie jų poveikį. Mes turime „Cloudflare Workers“, kad įdiegtų Edge SEO priemones, kaip parodyta čia alt vaizdų atributai. Mūsų atvirkštinio tarpinio serverio bandomoji sistema, sukurta naudojant „Cloudflare“, sudaro sąlygas turtingam bendravimui su kūrėjais.

Susiję straipsniai

0 komentarai
Inline atsiliepimai
Peržiūrėti visus komentarus
Atgal į viršų mygtukas