5 lépés, amelyet megtehet (és meg kell tennie) az alapvető webes vitálok fejlesztése érdekében

Ezt már megerősítette Core Web Vitals 2021 májusában keresési rangsorolási tényezővé válik a … val Oldalélmény-frissítés. Ez azt jelenti, hogy bár a minőségi tartalom továbbra is a legfelsőbb, a SEO technikai oldala még nagyobb jelentőséget kap.

Tehát mit jelent ez és hogyan készülhet fel rá? Ebben a bejegyzésben bemutatjuk Önt a Core Web Vitals-on, majd öt lépést adunk meg, amelyek segítségével meggyőződhet arról, hogy webhelye megfelel-e ennek az algoritmus-frissítésnek:

1. Csökkentse a Javascript végrehajtását
2. Lusta terhelés végrehajtása
3. Optimalizálja és tömörítse a képeket
4. Adjon meg megfelelő méreteket a képekhez és beágyazásokhoz
5. Javítsa a szerver válaszidejét

Mik az alapvető webes vitálok?

A Core Web Vitals olyan oldalélmény-jelek, amelyek kiértékelik a webhely felhasználói élményét. Egyszerűen szólva ezek a jelek azt mérik, hogy a felhasználók milyen gyorsan tudnak majd interakcióba lépni az Ön weboldalával, és milyen eredményt kapnak. Ezek a jelek azt is mérik, hogy a felhasználók milyen könnyen navigálhatnak a webhelyen.

Ha javulsz felhasználói tapasztalat és általában jobbá teszi webhelyét, annál jobbak lesznek az oldalélményi pontszámai.

Kép forrása

Három alapvető Web Vitals háló van:

1. Legnagyobb tartalmas festék (LCP) méri, hogy a legnagyobb elem (képek, videók, animációk, szöveg stb.) milyen gyorsan tölthető be és jelenhet meg egy webhelyen.
2. Halmozott elrendezéseltolás (CLS) biztosítja, hogy a weboldal oldalai ne legyenek váratlan, zavaros mozgások nélkül, amelyek megzavarhatják a felhasználókat a tartalom fogyasztásában.
3. Első bemenet késleltetése (FID) megmutatja, hogy mennyire reagálnak a webhely oldalai, amikor a felhasználók először lépnek kapcsolatba velük. Azt is méri, hogy egy weboldal böngészője milyen gyorsan képes eredményt adni a felhasználók számára.

Az alábbi kép azt az időkeretet mutatja, amely azt jelzi, hogy az alapvető web-vitálok pontszáma jó – javításra szorul és gyenge. A következő bekezdésekben ismertetett tippek segítenek a webhelyek tulajdonosainak abban, hogy javítsák az alapvető webes értékeiket a rossztól a jóig.

Kép forrása

Most folytassuk a tippekkel!

5 tipp az alapvető webes vitálok fejlesztéséhez

Gyors tesztet kell lefuttatnia a webhely teljesítményének elemzéséről, hogy lássa, mennyire teljesít jól a webhelye az alapvető webes szempontok szempontjából. Ehhez használhatja a Google olyan eszközeit, mint a Search Console és az Page Speed ​​Insights, valamint más eszközöket, például a GTmetrix-et.

Ha különböző eszközökkel futtat teljesítményjelentéseket, érdemes összehasonlítani az eredményeket, és hatékonyabban fejleszteni az oldalát.

Kép forrása

1. Csökkentse a JavaScript (JS) végrehajtását

Ha a jelentés gyenge FID-pontszámot mutat, ez azt jelenti, hogy az oldal 300 milliszekundumnál hosszabb ideig lép kapcsolatba a felhasználókkal. Fontolja meg a JS végrehajtásának csökkentését és optimalizálását. Ez azt jelenti, hogy a böngésző végrehajtásának JS-kódja és az oldal között eltelt idő csökken.

Az is elengedhetetlen, hogy minél kevesebb memóriát használjon. Miért? Amikor webhelye kódja kéri a böngészőt, az új memóriát foglal magában, amely leállítja a JavaScript-et, és lelassíthatja az oldalt.

A Google szerint a végrehajtás csökkentésének egyik módja a fel nem használt JS elhalasztása.

Annak ellenőrzésére, hogy webhelyén van-e használatlan JavaScript:

Először lépjen a webhelyére, nyomja meg a jobb egérgombbal, és válassza az ‘Ellenőrzés’ lehetőséget.

• Ezután kattintson a ‘Források’ elemre, és keressen három pontot az alján. Hozzá kell adnia egy eszközt – ‘Coverage’. Miután hozzáadta, nyomja meg a betöltés funkciót.

Amikor a betöltés megtörtént, látni fogja, hogy mennyi JavaScript nincs használva a weboldalán.

Ha rájött a fel nem használt JS mennyiségére, el kell kezdeni csökkenteni. Az egyik módja a kódfelosztásnak. Ez azt jelenti, hogy egy JavaScript csomagot (az egyesített fájlokat egy kötegbe kell gyűjteni, hogy elkerüljük az oldal betöltéséhez túl sok HTTP kérést) kisebb darabokra kell szétválasztani.

2. Végezze el a lusta betöltést

Ha képeket jelenít meg a webhelyén, elengedhetetlen a megvalósítása lusta rakodás így webhelye UX és alapvető web vitalitási pontszáma nem sérül. A lusta betöltés lehetővé teszi a képek betöltését abban a pillanatban, amikor a felhasználók lefelé görgetnek az oldalon, és nem veszélyeztetik a webhelyét rakodási sebesség és eléri az LCP pontszámot egy csúcs szinten.

A lusta rakodás további előnyei:

• Webhelyének teljesítménye javulni fog.
• Korlátozni fogja a sávszélesség használatát.
• Az tud javítsa webhelye SEO-ját.
• Megtartja látogatóit az oldalon, és csökkenti a visszafordulási arányt.

A lusta betöltés a webhely javát szolgálja? Alapján HubSpot, a források szerint azoknál az oldalaknál, amelyek sok képet, animációt vagy videót (más néven nehéz elemeket) tartalmaznak, a lusta betöltést elengedhetetlennek kell tekinteni. Nincsenek azonban olyan meghatározott szabályok, amelyekre a lusta betöltést kellene végrehajtani. Tehát, ha a webhely LCP pontszáma gyenge, érdemes megfontolni a lusta betöltést, majd összehasonlítani az eredményeket a bevezetés előtt és után.

3. Optimalizálja és tömörítse a képeket

Egészen nyilvánvalóan hangzik, nem gondolja? Számos weboldal esetében azonban a legnagyobb elemek a képek. Tehát nagyon fontos optimalizálni őket, mert jelentősen könnyebbé teheti oldalát, javítva ezzel a betöltési sebességet, az LCP-pontszámot, az UX-t és a rangsor a keresőmotorokon.

A képek tömörítésével csökkentheti az oldal teljes méretét apró jpg és javítja az LCP eredményeit. Gondolhatja, hogy a képtömörítés rontja a minőséget vagy a felbontást. Nos, valójában csak nagyításkor láthatja a különbséget, vagy ha a képet nem megfelelő formátumban menti. Mindig próbáljon jpg formátumot használni fekvő képekhez, és png grafikákhoz. Használhat új generációs formátumokat is, például JPEG 2000, JPEG XR vagy WebP, de javasoljuk, hogy előzetesen végezzen néhány kutatást.

A tömörítés mellett egy másik fontos dolog az aktiválás Tartalom kézbesítési hálózat (CDN) a képekhez. A CDN a szerverek hálózata az egész világon, amely tárolja az Ön tartalmát. Mivel a szervereket sok különböző helyen terjesztik, a képek a felhasználókhoz legközelebb eső szerverről gyorsabban kerülhetnek kiszolgálásra.

4. Adjon meg megfelelő méreteket a képekhez és beágyazásokhoz

A 0,1 feletti CLS pontszámot rossznak jelzik, és általában olyan elemek okozzák, mint a képek, hirdetések vagy dimenziók nélküli beágyazások a CSS fájlba. Ha javítani szeretné a CLS pontszámát, akkor a méretek számítanak. A megfelelő szélesség és magasság beállításának fontossága segíti a böngészőt abban, hogy az elem betöltésekor a megfelelő helyet foglalja el az oldalon.

Például, ha egy kép mérete nem megfelelő méretű, általában később jelenik meg egy oldalon. Míg a felhasználó elfogyasztja a tartalom, hirtelen leeshet, mert a megfelelő méret nélküli kép nem tudott elég gyorsan betöltődni. Ebben az esetben a böngésző nem értette, mennyi hely szükséges az adott képhez.

Tehát a képeltolódás elkerülése érdekében korábban lefoglalhat egy helyet, ahol a képet meg kell jeleníteni. Ez a fajta művelet elkerüli az elrendezés elmozdulását, ha azt képernyőn kívül tölti be.

Győződjön meg arról, hogy a beágyazáshoz megfelelő méreteket is beállított, mint például a behelyezéskor videók a YouTube-ról a webhelyére. Alapértelmezés szerint a videó a hátuljáról rendben lehet, de szuper nagynak vagy elrontottnak tűnik a kezelőfelületen. Ebben az esetben van egy probléma a dimenziókkal, és meg kell változtatnia őket.

Az alábbiakban részletes útmutatást talál a beágyazás megtalálásához egy Youtube-videóhoz. Tudja meg, hogyan változtathatja meg a méreteket, és győződjön meg arról, hogy a kiválasztott videó jól néz ki a webhelyén.

A megjeleníteni kívánt YouTube-videó átméretezése:

Nyissa meg a videót a Youtube-on, amelyet hozzá szeretne adni a webhelyéhez. Ezután keresse meg a megosztás gombot, és válassza a <> Beágyazás lehetőséget.

Ezt követően az összes információ megjelenik, beleértve a méreteket is. Most be kell másolnia a kódot a webhelye háttérbe, és meg kell változtatnia a webhelyének megfelelő szélességgel és magassággal.

5. Javítsa a szerver válaszidejét

A Google azt mondja: „Minél hosszabb ideig tart egy böngésző tartalom fogadása a szerverről, annál hosszabb ideig tart bármi megjelenítése a képernyőn. A gyorsabb szerver válaszideje közvetlenül javítja az egyes oldalbetöltési mutatókat, beleértve az LCP-t is.”

A legfontosabb, hogy a szerver hosszú válaszideje negatívan befolyásolhatja nemcsak az Önét SEO hanem UX is.

A kiszolgáló válaszidejének méréséhez használja a Time to First Byte (TTFB) lehetőséget, amely azonosítja azt az időpontot, amikor a felhasználó webböngészője megkapja az oldal tartalmának első bájtját.

Mielőtt azonban elkezdené, gyűjtse össze az adatokat a szerver jelenlegi teljesítményével, hogy megértse, hogyan áll. Miután elkészítette a jelentést, íme néhány tipp, amelyek segítenek Önnek:

• Ellenőrizze, hogy milyen gyors a webtárhelye.
• Használjon CDN-t a webhelyéhez.
• Ellenőrizze a beépülő modulokat. Miért? Azért, mert mindegyik csatlakoztat további súlya van az oldalának, amely negatívan befolyásolhatja webhelye teljesítményét. Csak a szükségeseket hagyja meg.

A Google javasolja a szerver válaszideje 600 milliszekundum alatt van.

Javítsa az alapvető webes vitálokat ezen öt tipp segítségével

Annak ellenére, hogy a Core Web Vitals csaknem három hónap múlva fog forogni, létfontosságú, hogy már dolgozzon azok fejlesztésén. Mivel a vitálokról szóló jelentések rendelkezésre állnak, használja a fent említett eszközöket, és hasonlítsa össze webhelye eredményeit a hibák kijavítása előtt és után.

Ne feledje, hogy webhelye hátulja kéz a kézben működik, ezért mindenképpen optimalizálja a hátlapot, hogy a legjobb felhasználói élményt nyújtsa a betöltési sebesség, a vizuális stabilitás és a interaktivitás. Segítene az is, ha nem felejtene el a Google meglévő keresési jeleiről – mobilbarát, biztonságos böngészés, HTTPS, tolakodó közbeiktatott irányelvek.

A GTmetrix kijelenti: ” Elsődleges háttéroptimalizálásként a TTFB csökkentése kiegészítheti a front-end fejlesztését, hogy jelentősen javítsa a teljesítményt. „

A szerzőről

Agnese Rapule szenvedélyes tartalommarketing-szakember a Setupad, bevételszerzési platform kiadók számára. Általában az automatizált hirdetések, a bevételszerzés, a SEO és a tartalommarketing témaköreivel foglalkozik. Egy másik szenvedélye a művészet – különösen a festészet. Követheted őt tovább Twitter vagy LinkedIn.