Core Web Vitals optimalizálás: Gyorsítsa fel weboldalát

Mi az a Core Web Vitals és miért fontos?

A Core Web Vitals a Google által 2020-ban bevezetett teljesítménymutatók összessége, amelyek a felhasználói élmény három kulcsfontosságú aspektusát mérik: a betöltési sebességet, az interaktivitást és a vizuális stabilitást. Ezek a metrikák 2021 óta hivatalos rangsorolási tényezők a Google keresőjében, ami azt jelenti, hogy közvetlen hatással vannak weboldalának keresőoptimalizálására.

Ha Ön vállalkozóként szeretné, hogy weboldala jól szerepeljen a Google találati listáján, nem elég csupán jó tartalmat készíteni. A technikai teljesítmény legalább ugyanolyan fontos. A Core Web Vitals optimalizálása nem csupán egy technikai feladat – ez egy üzleti befektetés, amely közvetlenül befolyásolja az ügyfélszerzést és az árbevételt.

A három Core Web Vitals metrika részletesen

LCP – Largest Contentful Paint (Legnagyobb tartalmi elem megjelenése)

Az LCP azt méri, mennyi idő alatt jelenik meg a képernyőn a legnagyobb látható tartalmi elem – ez általában egy kiemelt kép, videó, vagy egy nagy szöveges blokk. A Google szerint az ideális LCP érték 2,5 másodperc alatt van. Ha az Ön weboldalán ez az érték 4 másodpercnél nagyobb, az már gyengének minősül.

Az LCP különösen fontos, mert a felhasználók az első benyomásukat az alapján alakítják ki, milyen gyorsan jelenik meg számukra a fő tartalom. Egy lassú LCP azt az érzést kelti, hogy az oldal lassú vagy megbízhatatlan, ami növeli a visszafordulási arányt.

INP – Interaction to Next Paint (Interakciótól a következő megjelenítésig)

Az INP 2024 márciusában váltotta fel a korábbi FID (First Input Delay) metrikát. Míg a FID csak az első interakciót mérte, az INP az oldal teljes életciklusa során figyelemmel kíséri az összes felhasználói interakciót – kattintásokat, érintéseket, billentyűleütéseket –, és a legrosszabb válaszidőt veszi alapul. Az ideális INP érték 200 ezredmásodperc alatt van.

Ez a metrika különösen fontos az e-kereskedelmi weboldalaknál és az interaktív webalkalmazásoknál, ahol a felhasználók gyakran kattintanak gombokra, szűrőkre és menüelemekre.

CLS – Cumulative Layout Shift (Kumulatív elrendezés-eltolódás)

A CLS azt méri, mennyire stabil vizuálisan a weboldal betöltődés közben. Ha betöltés közben elemek ugrálnak a képernyőn – például egy későn betöltődő hirdetés eltolja a szöveget –, az rossz felhasználói élményt nyújt. A jó CLS érték 0,1 alatt van.

A CLS-problémák különösen bosszantóak a mobilfelhasználók számára, akik gyakran tapasztalják, hogy egy gombra szeretnének kattintani, de az utolsó pillanatban az oldal elcsúszik, és véletlenül egy hirdetésre vagy rossz linkre kattintanak.

Hogyan mérhetjük a Core Web Vitals metrikákat?

A mérés az első lépés az optimalizálás felé. Számos ingyenes eszköz áll rendelkezésre:

• Google PageSpeed Insights – A legkézenfekvőbb eszköz, amely valós felhasználói adatokat (CrUX) és laboratóriumi teszteket egyaránt biztosít. Egyszerűen adja meg weboldalának URL-jét, és azonnal megkapja az eredményeket.
• Google Lighthouse – A Chrome böngészőbe épített fejlesztői eszköz, amely részletes jelentést készít az oldal teljesítményéről, hozzáférhetőségéről és SEO-járól.
• Google Search Console – A Core Web Vitals jelentés megmutatja, mely oldalain vannak problémák, és hogyan változnak az értékek idővel.
• WebPageTest – Haladó felhasználók számára, különböző böngészőkből és helyszínekről futtatható tesztek.
• Chrome DevTools Performance panel – Valós idejű teljesítményelemzés fejlesztők számára.

Javasoljuk, hogy rendszeresen, legalább havonta ellenőrizze weboldalának Core Web Vitals értékeit, és figyelje a trendeket a Search Console-ban.

LCP optimalizálás: A betöltési sebesség javítása

Az LCP javítása általában a legnagyobb hatású optimalizálás, amit elvégezhet. Íme a legfontosabb lépések:

Képek optimalizálása

A legtöbb weboldalon a legnagyobb tartalmi elem egy kép. A képoptimalizálás ezért kulcsfontosságú:

• Használjon modern képformátumokat, mint a WebP vagy AVIF, amelyek 25-50%-kal kisebb fájlméretet biztosítanak azonos minőség mellett.
• Adjon meg explicit width és height attribútumokat minden képnél, hogy a böngésző előre lefoglalhassa a helyet.
• A kiemelt képekhez (hero image) használjon preload linket a HTML fejlécben, hogy a böngésző a lehető legkorábban elkezdje letölteni.
• Alkalmazzon responsive images technikát a srcset attribútummal, hogy minden eszközön a megfelelő méretű kép töltődjön be.

Szerver válaszidő csökkentése

A szerver válaszideje (TTFB – Time to First Byte) közvetlenül befolyásolja az LCP-t. Optimalizálási lehetőségek:

• Válasszon gyors, megbízható tárhelyszolgáltatót, lehetőleg európai szerverekkel.
• Használjon CDN-t (Content Delivery Network), hogy a tartalom a felhasználóhoz legközelebbi szerverről töltődjön be.
• Konfigurálja megfelelően a szerver oldali cache-elést.
• Fontolja meg a statikus oldalgenerálást (SSG), amelyet az Astro.js alapértelmezetten támogat.

CSS optimalizálás

A renderelést blokkoló CSS késlelteti az LCP-t. A megoldás:

• Helyezze a kritikus CSS-t inline a HTML-be, hogy az azonnal elérhető legyen.
• Halassza el a nem kritikus CSS betöltését.
• Minimalizálja a CSS fájlok méretét és távolítsa el a nem használt stílusokat.

INP optimalizálás: A válaszidő javítása

Az INP optimalizálása a JavaScript teljesítmény javítására összpontosít:

JavaScript optimalizálás

• Kódszétválasztás (code splitting) – Ne töltsön be egyszerre minden JavaScript kódot. Használjon dinamikus importokat, hogy csak a szükséges kód töltődjön be.
• Hosszú feladatok felbontása – Ha egy JavaScript művelet 50 ezredmásodpercnél tovább tart, az blokkolja a böngésző fő szálát. Bontsa kisebb egységekre a requestIdleCallback vagy a setTimeout segítségével.
• Debounce és throttle – Az ismétlődő eseménykezelőknél (görgetés, átméretezés) használjon debounce vagy throttle technikákat.

Eseménykezelők optimalizálása

A kattintás- és más eseménykezelők hatékonysága közvetlenül befolyásolja az INP-t. Kerülje a szükségtelen DOM-manipulációkat az eseménykezelőkben, és használjon passive event listener-eket ahol lehetséges. Kerülje a szinkron layout-számításokat (forced reflow) az eseménykezelőkben.

CLS optimalizálás: A vizuális stabilitás biztosítása

A CLS javítása sokszor a legegyszerűbb, de leginkább figyelmen kívül hagyott terület:

Elrendezés-eltolódások megelőzése

• Mindig adjon meg méreteket a képeknek és videóknak – ez a leggyakoribb CLS-probléma forrása.
• Foglaljon helyet a hirdetéseknek és beágyazott tartalmaknak még azelőtt, hogy betöltődnének.
• Kerülje a tartalom dinamikus beszúrását a már látható tartalom fölé.

Betűtípusok betöltése

Az egyedi betűtípusok betöltése gyakori CLS-forrás, mert a rendszer-betűtípusról az egyedi betűtípusra váltás szövegeltolódást okozhat:

• Használja a font-display: swap CSS tulajdonságot.
• Előtöltse a legfontosabb betűtípusokat a preload link segítségével.
• Fontolja meg a rendszer-betűtípusok használatát, amelyek nem igényelnek külön betöltést.

Az Astro.js előnyei a Core Web Vitals optimalizálásban

Az Astro.js keretrendszer különösen alkalmas a kiváló Core Web Vitals értékek elérésére, és ez az egyik oka annak, hogy ügynökségünk ezt a technológiát választotta:

• Alapértelmezett statikus generálás – Az Astro alapértelmezetten statikus HTML-t generál, ami villámgyors betöltést eredményez és minimális TTFB-t biztosít.
• Zero JavaScript alapértelmezetten – Az Astro csak akkor küld JavaScript-et a böngészőbe, ha arra tényleg szükség van, ami drámaian javítja az INP-t.
• Beépített képoptimalizálás – Az Astro Image komponense automatikusan optimalizálja a képeket, modern formátumokba konvertál és responsive méreteket generál.
• Automatikus CSS hatókör – Az Astro komponensenkénti CSS hatóköre megakadályozza a szükségtelen stílusok betöltését.
• Sziget-architektúra – Az interaktív komponensek izolált szigetekként töltődnek be, minimalizálva a JavaScript hatását a teljesítményre.

Képoptimalizálási technikák részletesen

A képek a legtöbb weboldal legnagyobb erőforrásai, ezért a képoptimalizálás kiemelten fontos:

1. Megfelelő formátum választása – WebP általános célra, AVIF ahol a böngészőtámogatás megengedi, SVG vektorgrafikákhoz, és PNG csak átlátszóság esetén.
2. Tömörítés – Használjon minőségi beállítást (quality) 75-85% között a legtöbb képhez. Ez általában szemmel nem látható minőségcsökkenést okoz, de jelentős fájlméret-csökkenést eredményez.
3. Lazy loading – Az oldalon lejjebb elhelyezkedő képekhez használjon loading="lazy" attribútumot, hogy azok csak akkor töltődjenek be, amikor a felhasználó közel görget hozzájuk. Fontos: a hajtás feletti képeknél (above the fold) ne használjon lazy loading-ot!
4. Responsive méretezés – Készítsen különböző méretű verziókat ugyanabból a képből, és a srcset attribútum segítségével hagyja a böngészőre a választást.

CDN használata a teljesítmény javítására

A CDN (Content Delivery Network) a tartalmakat a világ különböző pontjain elhelyezett szervereken tárolja, és a felhasználóhoz legközelebbi szerverről szolgálja ki azokat. Magyarországi vállalkozások számára ez különösen fontos, ha külföldi ügyfeleket is kiszolgálnak.

A népszerű CDN szolgáltatók közé tartozik a Cloudflare (amely ingyenes szintet is kínál), a Fastly, és a Bunny.net (amely európai központú és versenyképes árazással rendelkezik). Egy CDN bevezetése akár 40-60%-kal is javíthatja a betöltési időt a távoli felhasználók számára.

Gyakorlati lépések az azonnali javulásért

Ha most szeretne elkezdeni optimalizálni, íme egy gyakorlati ellenőrzőlista:

1. Futtasson egy PageSpeed Insights tesztet a weboldala főoldalán és a legfontosabb aloldalain.
2. Azonosítsa a legnagyobb problémákat – a PageSpeed Insights konkrét javaslatokat ad.
3. Kezdje a képoptimalizálással, mert ez általában a legnagyobb hatású.
4. Ellenőrizze, hogy minden kép és videó rendelkezik-e explicit méretekkel.
5. Vizsgálja felül a JavaScript-betöltési stratégiáját.
6. Implementáljon szerver oldali cache-elést vagy CDN-t.
7. Mérje újra az értékeket, és ismételje meg a folyamatot.