Seo

A Core Web Vitals Tactics funkciói a Cloudflare HTMLRewriter segítségével

Útmutató az A/B teszteléshez a Core Web Vitals számára egy sor apró lépést ismertetett két szolgáltatással és egy böngészőbővítménnyel, amellyel teszteket lehet írni a frontend kód taktikájához. Harminc évvel ezelőtt egy oldal nyers forrását másoltuk a keresési és csereműveletek futtatásához, amíg nem tudtuk kezelni egy oldal fakszimiléjét, amely egy web-kompatibilis mappába került, hogy ugyanazokat az ajánlásokat mutassa be.

Ezt már nem kell tennünk.

A SEO lebonyolítására szolgáló fordított proxy létrehozása és írószoftver húsz évvel ezelőtti létrehozása olyan kis cégekre korlátozódott, amelyek maguk építették ki és üzemeltették az infrastruktúrát. A Cloudflare most kulcsrakész megoldást kínál számunkra. Ingyenes fiók használatával indulhat és futhat. A frontend kód módosításához használja a Cloudflare-t HTMLRewriter() JavaScript API.

A kód viszonylag könnyen érthető.

A Core Web Vitals segítségével az azonnaliság, az észlelt igény és a különböző teszteken való átfutás gyorsasága mutatja meg az értéket, és valóban lenyűgöz. Az alapvető platform az útmutatónkban ismertetett lépéseken keresztül érhető el. Függvényeket fogunk írni a közönséges változtatásokhoz, így azonnal elkezdheti a valódi taktikák tesztelését.

HTMLRewriter()

Ha figyelemmel kíséri, tudhatja, hogy a szkriptünk lehetőséget biztosít egy elem előtöltésére, amelyet megadhat az LCP kérési paraméterében. Ha az érték hiányzik, akkor visszaküldünk egy űrlapot, hogy megkönnyítsük a hivatkozás hozzáadását. Van egy helyőrző is az ún fontosság, amellyel szintén foglalkozni fogunk. Az a fontos, hogy megértsük, mit fogunk tenni.

A HTMLRewriter() Az API lehetővé teszi számunkra, hogy jQuery-stílusú elemválasztókat használjunk a nyers oldalforrás HTML-elemeihez való csatoláshoz, és a JavaScript futtatásához erről a lábról. Hatékony módon módosíthatja az elemeket, egy egész elemcsoportot vagy akár az alapdokumentumot. Szerkesztheti például egy oldal címét. A gyártásban az Ön szerkesztése válik a cím, és ez az, amit a Google és a Bing indexel.

Az egyik bonyodalom, amellyel találkozni fog, hogy csak nyers forrást szerkeszthet, hidratált dokumentumobjektum-modellt (DOM) nem. A nyers forrás megtekintésének egyik gyors módja a böngésző beépített nézetforrás funkciója. A Firefox esetében a view-source például pirossal kiemeli az érvényesítési hibákat. Még akkor is, ha a böngészők „kijavítják” a hibás HTML-kódot, ez általában kijavítható a dolgozónkkal.

A DevTools-on belül a „Források” lap hozzáférést biztosít a nyers forráshoz. Használja a preferenciabeállításokat a mindig „szép nyomtatott” forráshoz, amely formázza azt, így beolvassa a kódot az optimalizálás kereséséhez. Egy másik tipp a gyorsítótár megkerülésére, amikor a DevTools meg van nyitva. Ez a munkafolyamat segít Önnek, hogy az optimalizálás ne okozzon referenciahibákat.

Elemválasztók

Amikor észrevesz valamit, amit meg akar javítani HTMLRewriter(), akkor szűkíteni kell a változtatásokat, és el kell különíteni az elemet, hogy elkerülje a tervezettnél több kód módosítását. Használja a lehető legexkluzívabb választót, ami nagyon egyszerű lehet, ha az elemek egyedi azonosítókkal rendelkeznek. Ellenkező esetben keressen egy visszajelző táblát, például egy egyedi helyre való hivatkozást href or src attribútumok.

Lehetőség van helyettesítő karakterek és „parancsmódú” vim-stílusú reguláris kifejezések használatára, amelyek megfelelnek az attribútumértékeknek. Egynél több feltételt is megadhat, akár azonos attribútumnévvel is. Használja vim képességeit, hogy egyes elemekre szűkítse az egyezéseket, vagy párosítsa az elemek egy csoportját szélesebb kifejezésekkel. A logika ezután szétválaszthatja az aggodalmakat a változtatások között.

Példa egyező helyettesítő karakteres „fonts.g” előletöltési hivatkozáselemekre a következőhöz tartozó elemek eltávolításához: fonts.googleapis.com.

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

Példa, amely két egyezést mutat be a href attribútumot, szűkítve egyetlen fájlra a sok közül.

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

A fenti első példa ezt a helyettesítő karakteres egyezést használja, ahol a „fonts.g” karakterlánc bárhol megjelenhet a fájlban href linkelemek attribútuma. Ez egy példa egy általános egyezésre, amely egynél több linkelemhez kapcsolódhat egy megfelelő művelethez, például az egyező elem(ek) eltávolításához, ha vannak ilyenek.

A fenti második példa bemutatja, hogyan választhat ki egy adott hivatkozási elemet, amely egy karakterlánccal kezdődik, és egy másik karakterlánccal végződik, de amelyek között bármi lehet. Ez akkor hasznos, ha egyetlen olyan elemet választ ki, amely egy felépítési rendszer részét képezi, ahol előfordulhat, hogy a böngésző gyorsítótár-bustingjához van egy dinamikusan elnevezett verziószámító token-könyvtár.

Link elemek

A linkelemek számos tulajdonságuk miatt sokrétűek. Így számos célt szolgálhatnak. Nem tévesztendő össze a hivatkozásokkal (mint a horgonyoknál), a linkelemek általában ott vannak, ahol gyorsan eltalálható teljesítménystratégiákat kezdünk keresni. Előfordulhat, hogy egyes előtöltési és előcsatlakozási hivatkozási elemek akadályozzák, vagy esetleg teljesen feleslegesek.

Egyszerre legfeljebb hat gazdagép csatlakozhat. Az első stratégia az lesz, hogy a legtöbbet hozza ki belőlük. Próbálja meg eltávolítani az összes prioritási hint linkelem utasítást, és tesztelje az eredményt. Ha az időzítések rossz irányba mennek, akkor egyesével adja hozzá őket, és tesztelje mindegyikük valódi hatását. Meg kell tanulnia a WebpageTest vízesés diagramjának alapos olvasását.

Ezt követően a taktika az erőforrás-betöltésre megy, ami szintén elég erősen, de nem kizárólagosan érinti a linkelemeket. Ezen a ponton szeretnénk megnézni a szkripteket is. Az erőforrások betöltésének sorrendje nagyon negatívan befolyásolhatja a dolgokat. Tesztágyunk tökéletes a vízesés-diagram leolvasásából nyert különféle taktikák kipróbálására. Tartsa nyitva a DevTools konzolfiókját, hogy munka közben ellenőrizze a hibákat.

Elemek eltávolítása

Az elemek eltávolítása rendkívül egyszerű. Miután kiválasztott egy elemet vagy azok csoportját, megjelenik a következő mező HTMLRewriter().on() utasítások közé ír egy script blokkot. Ezt helyben, göndör zárójelekkel teheti meg. Hivatkozhat egy elnevezett függvényre. Vagy építhetsz újat class példány egy korábban definiált objektumhoz, amely ebben az összefüggésben túlzott tervezés lehet.

Amikor találkozik minta Worker kóddal, láthatja class inicializálók. Csak a következő funkcióra van szükség az eltávolításhoz és az elemhez. Bármi, amit egy megnevezett osztályobjektummal csinálunk, elvégezhető egy egyszerű függvénnyel (objektummal), kevesebb kóddal, kevesebb hiba miatt, olvashatóbb szintaxissal és sokkal jobban taníthatóval. Újra meglátogatjuk class konstruktőrök, amikor a tartós tárgyakkal foglalkozunk.

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

Dióhéjban ez a blokk egy „el” változót határoz meg az elempéldányra hivatkozva, és a kódblokk meghívja a beépített remove() elem módszer, amelyet részletesen a megfelelő dokumentációban talál. Minden HTMLRewriter() Az elemmetódusok elérhetők az elemegyezések példányaihoz. Az elemek eltávolítása az egyik legegyszerűbben megérthető.

A renderelést blokkoló erőforrások blokkolásának feloldása

feloldókulcsát script elemek sokkal könnyebb, mint a stíluslap-erőforrások feloldása. Szerencsére van egy logikai attribútumunk, amely jelzi a böngészőnek, hogy aszinkron módon szeretnénk betölteni egy szkriptet, vagy teljesen el akarjuk halasztani (ha tétlenség van). Ez ideális! A stíluslapokhoz viszont egy kis „feltörés” szükséges, hogy feloldják a blokkolást – némi beépített Javascript szükséges.

Lényegében a stíluslap hivatkozáselem-hivatkozását előtöltéssé alakítjuk a blokkolás feloldásához. Ez azonban megváltoztatja a hivatkozási elem természetét egy olyanra, ahol a stílusszabályok nem kerülnek alkalmazásra. Az Preload letölti az erőforrásokat, hogy a helyi gyorsítótárban tárolja őket, szükség esetén készenlétben, de ennyi. A DevTools figyelmezteti Önt, ha egy erőforrás előre van töltve, és nem használja megfelelően – ekkor tudja, hogy eltávolíthatja!

Előtöltés, majd an onload attribútum a JavaScript futtatásához az előtöltésről a stíluslapra való visszaállításhoz a CSS „hack” az egyébként természetesen renderelést blokkoló erőforrás blokkolásának feloldására. JavaScript használata this kulcsszó lehetővé teszi a tulajdonságainak megváltoztatását, beleértve a rel attribútum (és a onload magát az attribútumot). A mintának van egy háttérkitöltése a nem JavaScript-munkamenetekhez is.

Itt van a miénk unblockCSS() függvény, amely a stratégiát kész elem módszerekkel valósítja meg.

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

Válassza ki azokat a hivatkozáselem-stíluslap-hivatkozásokat, amelyek megjelenítést blokkolnak, és hívja meg rajtuk ezt a függvényt. Lehetővé teszi a böngésző számára, hogy megkezdje a stíluslap letöltését az előtöltéssel. Betöltés után a rel Az attribútum visszavált a stíluslapra, és a CSS-szabályok azonnal alkalmazásra kerülnek. Ha a módosítás után stílusproblémák lépnek fel, akkor egy vagy több lapot a normál kérési sorrendben kell betölteni.

A funkció újrafelhasználható kódblokkként működik. Váltsa át az elemkiválasztást a segítségével HTMLRewriter() és tesztelje a különbséget a CSS-lapok blokkolásának feloldása során, egyenként vagy csoportosan, az Ön megközelítésétől függően. Használja ki a taktikát egy átfogó stratégia eléréséhez, amely a lehető legnagyobb mértékben feloldja a blokkolást. Ne felejtse el azonban mindig keresni a CSS- és Script-erőforrások változásaiból eredő problémákat.

A forgatókönyv prioritásai

A stílusok betöltésének sorrendje összezavarhatja a tervezést. A váratlanul gyorsan betöltődő stíluslapszabályok felülírják a lassabban betöltött szabályokat. Figyelnie kell a szkriptek váltakozó sorrendben történő betöltése közben is, hogy azok kiértékelésre kerüljenek, és a dokumentum kiértékelésekor a memóriában maradjanak. A hivatkozási hibák több tucat vagy több száz parancsfájl hibává válhatnak.

A problémák ellenőrzésének legjobb módja a konzolfiók figyelése és a lassú hálózati kapcsolatok szimulálása. Ez olyan mértékben eltúlozhatja a problémákat, hogy nyilvánvalónak kell lenniük a DevToolsban. Ha a szkript-erőforrásokat nagyobb teljesítményű CPU-k segítségével dolgozzák fel, és kábelmodemsebességgel vagy gyorsabban terhelik, előfordulhat, hogy kihagy egy kritikus hibát. A kérések is szépen el vannak osztva.

Itt van a függvényünk, amely megváltoztatja vagy hozzáadja az aszinkron és elhalasztott attribútumokat.

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

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

Ha egy szkript eredetileg nem rendelkezik aszinkronnal vagy késleltetéssel, akkor ártalmatlan futtatni a removeAttribute() elem módszer egy újrafelhasználhatóbb kódblokkhoz. Ezt nyugodtan figyelmen kívül hagyhatja, ha gyorsan dolgozik egy egyszeri projekten, ahol esetleg ezt írja be, ahelyett, hogy egy, a szkriptben korábban meghatározott függvényt hívna meg.

Alt attribútumok a SEO-hoz

Amint már említettük, az A/B Core Web Vitals taktikáinak útmutatója a tervezés során arra szolgált, hogy egy teljesen működő Edge Computing tesztlapot hozzunk létre és fusson, hogy a jövőbeli SEO fejlesztőknek cikkekkel és jövőbeli eseményekkel demonstrálhassuk a tartalmat. A tavalyi (2021-es) SMX West rendezvényünkön bemutattuk a Cloudflare Workers használatát egy webhelyen, amivel Lighthouse tűzijátékot értünk el (100 pontot ért el az összes teszten).

Sok mindent meg kell tenni a tűzijáték eléréséhez. Az egyik fontos szempont, hogy minden képnek érvényesnek kell lennie alt attribútumokat. A teszt képes észlelni, hogy mikor kerül be a szöveg alt Az attribútumok „nem leírhatóak”, vagy jelen vannak, de üresek. Olyan szavakra van szüksége, amelyek a társított képen láthatókat ábrázolják. Ennek egyik módja lehet a fájlnév elemzése a src tulajdonság.

Itt van egy funkció, amely kivonja a szöveget img src a hatalomnak tulajdonítja alt szöveg fájlnevekből kötőjellel.

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

Dióhéjban ez azokon a képeken keresi a feltételt, ahol nincs alt attribútum értéke. Amikor van rá esély src attribútum fájlnév kötőjellel van ellátva, a kötőjeleket szóközökre cseréli, hogy megfogalmazza, mi lehet a megfelelő érték. Ez a verzió az esetek többségében nem működik. Nem helyettesíti a perjeleket, illetve a protokollt és a tartományt. Ez csupán kiindulópontként szolgál.

Miért érdekel?

A Web Vitals különféle teljesítményoptimalizálási taktikáinak tesztelése hihetetlenül lenyűgöző a webhelytulajdonosok számára. Ennek a képességnek rendelkeznie kell az ügynökség arzenáljában. A Google-rangsorok enyhe javulása jó pontszámokkal mérhető és nagyrészt elérhető a legtöbb webhelyen olyan taktikák révén, amelyeket megbeszélünk és bemutatunk. Hangoljon élő előadásra március 8-9.

A SEO technikusok régóta javasolják a teljesítmény javítását a keresőmotorok rangsorolásához. A rangsorolás előnyei még soha nem voltak ilyen egyértelműek. A Google szó szerint meghatározta a mutatókat, és közzéteszi a hatásukat. A Cloudflare Workers munkatársai az Edge SEO-javítások megvalósítására szolgálnak, amint az itt látható alt attribútumok a képekhez. A Cloudflare-nek köszönhetően fordított proxy tesztrendszerünk megalapozza a fejlesztőkkel való gazdag kommunikációt.

Kapcsolódó cikkek

0 Hozzászólások
Inline visszajelzések
Az összes hozzászólás megtekintése
Vissza a lap tetejére gombra