Új Chrome API: Javítsd a Core Web Vitals-t JavaScript oldalaidon!

A Google Chrome legújabb verziója, a Chrome 139, egy innovatív API-t vezet be, amely célja a Core Web Vitals, azaz a web teljesítményének alapvető mutatóinak pontosabb mérése, különösen az egyoldalas alkalmazások (SPA) esetében. Ezek az alkalmazások nagyon népszerűek a felhasználói élmény fokozása érdekében, azonban sokszor kihívások elé állítják a teljesítménymérő eszközöket, mivel gyakran nem indítanak el teljes oldalletöltéseket, amikor a tartalom frissül. Ennek következtében a Core Web Vitals metrikák, mint például a Largest Contentful Paint (LCP) vagy a Cumulative Layout Shift (CLS), nem mindig tükrözik pontosan az oldal valós teljesítményét.

Miért fontos ez a SEO szempontjából?

A Core Web Vitals mérése kritikus fontosságú a SEO szempontjából, mivel ezek a mutatók közvetlenül befolyásolják a rangsorolási tényezőket a Google keresőmotorjában. Az egyoldalas alkalmazások gyorsaságát és interaktivitását sokan előnyben részesítik, de a nehézkes teljesítménymérések miatt sok esetben nem kapják meg a megérdemelt figyelmet a SEO elemzések során. A Chrome új Soft Navigations API-ja pontosan ezt a problémát hivatott orvosolni. Az API képes észlelni a lágy navigációkat, vagyis azokat az interakciókat, amikor a felhasználó egy linkre kattint, de az oldal nem frissül teljesen.

Ennek a megoldásnak a bevezetése új lehetőségeket teremt a webfejlesztők számára, hogy jobban megértsék, hogyan teljesítenek az oldalaik a felhasználók valós környezetében. Azok a webhelyek, amelyek a React, Angular vagy Vue keretrendszerekre épülnek, mostantól képesek lesznek jobban nyomon követni, hogy a látogatók hogyan interakcióba lépnek az alkalmazásokkal, és ezáltal javítani az élményt.

Hogyan működik az új API?

A Chrome Soft Navigations API-ja a beépített heuristikákat használja a lágy navigációk észlelésére. Például, amikor a felhasználó rákattint egy linkre, a weboldal URL-je frissül, és a DOM (Document Object Model) láthatóan megváltozik, ami festést indít el. Amikor ezek a feltételek teljesülnek, a Chrome ezeket navigációs eseményként kezeli a teljesítménymérés során, akkor is, ha nem történt meg a teljes oldalletöltés.

Az API új metrikákat vezet be, például az interaction-contentful-paint-t, amely lehetővé teszi a Largest Contentful Paint mérését lágy navigáció után, továbbá bemutatja a navigationId-t, amely a teljesítménybejegyzésekhez kapcsolódik, így a metrikák specifikus navigációkhoz rendelhetők. Továbbá bővítések történnek a layout shift, az eseményidőzítés és az INP (Interaction to Next Paint) terén is, hogy ezek a lágy navigációkon is működjenek.

Hogyan próbálhatod ki?

A Chrome 139 verzióban a fejlesztők már most tesztelhetik ezt a funkciót. Két lehetőség áll rendelkezésre: helyi tesztelés a chrome://flags/#soft-navigation-heuristics oldal aktiválásával, vagy egy origin trial keretében, ahol egy tokent adhatnak hozzá az oldalukhoz meta tag vagy HTTP fejléc formájában a valós felhasználói adatok gyűjtéséhez. A Chrome ajánlja az „Advanced Paint Attribution” flag aktiválását a legteljesebb adatok érdekében.

Fontos megjegyezni, hogy a Chrome Soft Navigations API-ja még kísérleti fázisban van, és Barry Pollard, a projekt vezetője hangsúlyozta, hogy a metrikák nem biztos, hogy támogatottak régebbi Chrome verziókban vagy más böngészőkben. A jövőbeli fejlesztések során, ha a kísérlet sikeresnek bizonyul, a metrikák beépülhetnek a Chrome nyilvános teljesítményjelentéseibe is.

Mit mond a szakértő?

Megkérdeztük Császár Viktort, a SEO szakértőt, hogy mit gondol a Chrome új kezdeményezéséről. Szerinte ez a lépés forradalmasíthatja a weboldalak teljesítménymérését, különösen a JavaScript-alapú alkalmazások esetében. „A lágy navigációk pontos mérése lehetőséget ad arra, hogy a fejlesztők jobban optimalizálják az oldalaikat, és ez közvetlen hatással lesz a SEO teljesítményre is. Az API bevezetése segíthet abban, hogy a weboldalak valós teljesítménye jobban tükröződjön a Google algoritmusának értékelésében. Érdemes lesz figyelemmel kísérni a változásokat, és kihasználni az új lehetőségeket.” További információkat Császár Viktor weboldalán találhatsz: csaszarviktor.hu.

Forrás: SearchEngineJournal.com