Hogyan lehet javítani a Google Core Web Vitals pontszámát?

(2020. augusztus 23.)

A következő korszak a weboldal teljesítményén

Pár hónapja dolgozom stratégiákról, amelyek célja a weblapok teljesítményének javítása a tulajdonomban lévő webhelyeken, és hogy őszinte legyek, ez egy igazán érdekes munka, amelyet megoszthatok veletek.

Megértem, hogy a weboldal teljesítményének fejlesztése nem új keletű. dolog és az emberek rengeteg ötlettel és trükkel álltak elő az oldal betöltési sebességének növelése érdekében. De most úgy tűnik, hogy ez már nem elég, és lépned kell a következő szintre !!

Mint nektek, tudnotok kell a SEO (Search Engine Optimization) fontosságáról, és a weblapok eredményeinek kihozása nemcsak a Google találatok első oldalán, hanem ugyanazon első oldal tetején is nagyon sok! Rövid történet – hadd szavatoljam, hogy a továbbiakban a Google Core Web Vitals lesz az egyik legnagyobb hozzájáruló a Google keresési eredmények SEO rangsorolásához.

Short & Egyszerű magyarázat a Google Core Web Vitals

Az ez év első negyedévében bemutatott Core Web Vitals a weblap gyorsaságához, reagálókészségéhez és vizuális stabilitásához kapcsolódó mérőszám.

A Google ezeket az alapvető webes vitálokként határozta meg:

  • Legnagyobb tartalmas festék : Az az idő, amely alatt az oldal fő tartalma betöltődik. Az ideális LCP-mérés 2,5 másodperc vagy gyorsabb.
  • Az első bevitel késleltetése : Az az idő, amely egy oldal interaktívvá válásához szükséges. Az ideális mérés kevesebb, mint 100 ms .
  • Halmozott elrendezéseltolás : A vizuális oldal tartalmának váratlan elrendezéseltolódása. Ideális mérés kisebb, mint 0,1 .

Ezt a mérőszettet arra tervezték, hogy segítsen a webhelytulajdonosoknak felmérni az általuk nyújtott felhasználói élményt a betöltés, az interaktivitás és a vizuális stabilitás terén.

Összességében az alábbiakban az oldal teljesítményét az alábbiak szerint rangsoroljuk.

Az oldal teljesítménymutatóinak figyelembe vett mérőszámok teljes listája.

A következő szakasz alapvetően az oldalbetöltési teljesítmény és a CWV-pontszámok javításának ötleteiről vagy módszereiről szól.

Tippek az alapvető webes Vitals-pontszámok javítására

Az alábbiakban bemutatunk néhány módszert ez segített javítani a Core Web Vitals pontszámaimat, valamint javította az oldal teljes teljesítményét is.

  1. A böngésző és a CDN gyorsítótárának hatékony kihasználása (javítja a FID-t és az LCP-t)
    Ez egy nagyon egyszerű jóváhagyás ch a FID és LCP pontszámok javításához. Győződjön meg arról, hogy az statikus eszközök CDN-ről vannak kiszolgálva (ha annak AWS-je, akkor a Cloudfront-ban tárolhatja). Ez azt eredményezi, hogy az erőforrások gyorsan bejutnak a böngészőkbe. A második idõterhelés javítása érdekében gyõzõdjön meg arról, hogy az ügyféloldalon elért eszközök tárolódnak-e a böngészõjében.
    cache-control: max-age=120 – azt jelenti, hogy a visszaküldött erõforrás 120-ra érvényes. másodpercig, amely után a böngészőnek újabb verziót kell kérnie.
    A dinamikus oldalait is tárolhatja. CDN-je az alkalmazás viselkedése alapján megfelelő TTL értékkel.
  2. Pontos méretattribútumok vagy dimenziók beállítása a médiához és a hirdetésekhez (javítja a CLS-t)
    Ez nagyon fontos a CLS-pontszámok javításához. Győződjön meg arról, hogy megfelelő height:XXpx; width: YYpx beállítása van a képre vagy bármilyen médiacímkére. Ez megint nagyon fontos, legalábbis a hajtás feletti alkatrészek esetében. Ennek egyik rövidítése: ha kifogytál az ötletből, hogy megkapd a kép pontos magasságát, beállíthatod úgy, hogy height:auto;, ami nagyon segített nekem. A médián kívül, ha webhelye hirdetéseket jelenít meg, győződjön meg arról, hogy megfelelő méretű hirdetéshelyeket állított be megfelelő méretekkel, mivel az oldal összetevőinek felfelé vagy lefelé tolásával biztosan csökken a CLS pontszám. Így figyelje a hirdetéseket is!
  3. Lusta töltse be a jobb felbontású képeket az eszköz típusa alapján (javítja az LCP-t)
    Ez valóban gyors győzelem az Ön számára! A világon sok olyan Lazy csomag van, amelyet a weboldalán használhat arra, hogy lustán betöltse az összes képet.Ez csökkenti az oldal teljes tömegét és betöltési idejét az oldal megjelenítéséhez a böngészőben. Egy másik fontos dolog az, hogy az eszköz típusa alapján előre definiálja a betölteni kívánt kép felbontását. Nem szabad ugyanazokat a felbontású képeket tölteni különböző eszköztípusokba.
  4. Hatékonyan használja az SSR-t és a CSR-t a weboldalán (javítsa a FID & LCP)
    Tudnia kell, hogy a Google népszerűsíti és bátorítja a szerveroldali (SSR) oldalakat a jó SEO-értékek megszerzéséhez. Ideális esetben azonban kompromisszum a SEO Vs oldalterhelési teljesítményével. Ha az oldal tartalma szempontjából túl nagy, és ha úgy dönt, hogy az egész oldalt megjeleníti a szerveren, akkor biztosan több időbe telik az egész oldal, valamint az oldal betöltése. A hosszú történet rövid – az én javaslatom az, hogy jobb, ha SSR-renderelést hajtunk végre a hajtás felett megjelenő oldal-összetevők számára, és a többi komponenst a hajtás alatt megjelenő kliens oldalról rendereljük. Ily módon a felhasználó betölti az oldalt a hajtás fölé, és az oldal többi része aszinkron módon teszi vissza a felhasználói élményt.
  5. Kód használata Az & felosztásával az eszközöket darabokra kell bontani (javul a FID & LCP)
    Mindig nem jó ötlet, hogy hatalmas (100Kb felett hatalmas) eszközök (különösen JS fájlok) legyenek az alkalmazásában. Tehát jobban használja a csomagokat, mint például a „webpack”, a nehéz eszközök kis darabokra bontására, amelyek aszinkron módon töltik be az eszközeit a böngészőbe (ha engedélyezi a h2 protokollt). A kódfelosztási funkciókat is felhasználhatja az oldal összetevőinek felosztására fájlok szétválasztására, ahelyett, hogy egyetlen HTML fájlba csomagolja.
  6. Az összes statikus eszköz tömörítése Brotli-tömörítéssel (javítja az LCP-t)
    Javaslom, hogy a Brotli segítségével tömörítse a statikus eszközeit, ami sokkal jobb ko megjelenítési arány a piac többi könyvtárához képest. Ugyanakkor ne feledje, hogy ha nagyobb tömörítési arányú Brotli-t használ, az mindenképpen megnöveli az építkezés és a csomagolás idejét a DevOps csővezeték útján. Számomra jól esett, hogy feláldoztam az alkalmazás készítésének idejét, mivel az oldalbetöltési teljesítmény szempontjából jobb értéket kapok.
  7. Optimalizálja az API kérést és válasz tartalma (javítja a FID & LCP-t)
    Ez nagyon fontos, hogy figyelembe vegyük, mivel itt minden bájt számít, amikor oldal teljesítményét. Bízom benne, hogy nem fogja megbánni, hogy visszalépett és ellenőrizte az API kéréseit & az oldal feltöltése érdekében. Győződjön meg arról, hogy csak azokat az adatokat kapja vissza, amelyekre az oldalához szüksége van Egy másik buta dolog, amit esetleg hibázhat, az, hogy az API-hívásait önmagában belsőleg hívja meg, ahelyett, hogy bármilyen nyilvános végpontot használna vagy az interneten keresztül – mert ez mindig költséges az idő szempontjából, amikor ha az API-t ugyanabban az alhálózatban vagy legalább ugyanabban a hálózatban tárolja, akkor az interneten keresztül hívja meg az API-kat!
  8. Csökkentse az oldal / dokumentum teljes számát méret (javítja az LCP-t)
    Ideális esetben, ha a céloldala nehéz (minden> 80 KB-os oldalt nehéznek kategorizálnék), ez mindenképpen rosszul járul hozzá az LCP-pontszámhoz mivel ez arányosan növeli az oldal beolvasási és letöltési sebességét. Tehát győződjön meg arról, hogy a kiszolgáló oldala nem kap nagy mennyiségű felhasználatlan adatot, és csak az oldal megjelenítéséhez szükséges adatokat töltse be.
  9. NEXT-GEN képformátumok használata (javítja az LCP-t)
    A JPEG 2000, a JPEG XR és a WebP olyan képformátumok, amelyek kiváló tömörítési és minőségi jellemzőkkel rendelkeznek a régebbi JPEG-hez képest, PNG megfelelői. A képek ilyen formátumban történő kódolása JPEG vagy PNG helyett azt jelenti, hogy gyorsabban töltődnek be, és kevesebb mobiladatot fogyasztanak. Bármilyen eszközt használhat a piacon a képek NEXT-GEN formátumú képekké konvertálásához, vagy akár futásidejű képszolgáltatást is készíthet, amely valós idejű képkonvertálást képes végrehajtani JPEG-ből WebP-be, és a böngészőben szolgál.
  10. A natív böngésző által támogatott betűtípusokra való visszalépés engedélyezése (javítja a FID-t)
    Bizonyított, hogy a betűtípusok valóban csökkentheti a teljesítmény pontszámát, ha a böngésző késik az alkalmazásában használt egyéni betűtípus betöltésével, kivéve, ha az alapértelmezett betűtípus, amelyet a böngésző támogat. Ebben az esetben a gyors győzelem az, ha tartalék megközelítést alkalmaz a betöltésben betűtípusa a böngésző által alapértelmezés szerint támogatott betűtípusokkal. Az alábbiakban bemutatunk egy kódrészletet arról, hogy más betűtípusokkal hogyan lehet tartalék megközelítést alkalmazni.
@font-face { 
font-family: “Open Sans Regular” "Helvetica", "Arial", sans-serif;
font-weight: 400;
font-style: normal;
src: url(“fonts/OpenSans-Regular-BasicLatin.woff2”) format(“woff2”); font-display: swap;
}

Az összes fenti tipp fokozatosan megvalósítható az alkalmazásban, és ismételten, amint azt már említettük, mielőtt a Core Web Vitals pontszámai valódi felhasználóból alakultak volna ki adatok és már nem a „Lab” adatokból. Így időbe telik, hogy tükrözze a pontszámának javulását, ami többnyire 28 napos idő. Továbbra is használhatja a Google PageSpeed eszközét – https://developers.google.com/speed/pagespeed/insights/ a CWV-pontszámok megszerzéséhez.

Remélem, hogy segít és sok sikert kíván a munkáihoz! Sziasztok!

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük