A Lighthouse bevezetése óta új, az oldalsebességgel kapcsolatos paraméterek jelentek meg. Ezen paraméterek közül az egyik legfontosabb a First Contentful Paint (FCP). A Lighthouse 10-es verziójában, amely 2024 júniusától hatályos, az FCP hatása az összpontszámra 10%.
Az FCP mint mérőszám elfogadásához és megértéséhez elengedhetetlen, hogy először megvizsgáljuk a mögötte rejlő pszichológiát. A koncepció hasonló a liftekbe szerelt tükrök:
Röviden összefoglalva: Az 1900-as évek első felében jelentősen megnőtt a liftek használata a magas épületekben, de a liftrendszerek a maihoz képest primitívek voltak. Ezért merült fel az ötlet, hogy tükröket szereljenek fel a liftekbe, hogy a liftben eltöltött idő rövidebb legyen.
Visszatérve témánkhoz: Az FCP az a pont, ami érzékelhetően várakozásra késztet a betöltési idő alatt, amikor megpróbál egy oldalt elérni. A First Contentful Paint definíciója az az idő, amely alatt az első szöveg, kép, nem fehér vászon stb. megjelenik a felhasználó számára. Az FCP mértékegysége másodperc.
A Lighthouse-ban az FCP színskáláját a következőképpen határozzák meg:
- 0-2 másodperc: Zöld => Gyors
- 2-4 másodperc: Narancs => Javításra szorul
- 4+ másodperc: Piros => Lassú
A HTTP Archívum adatai szerint a figyelembe vehető oldalak száma a gyors 25%, és a meglévő webhelyek 50%-a lassúnak minősül.
Mit lehet tenni az FCP javítása érdekében?
Csökkentse a szerver válaszidejét
Általában ez úgy értelmezhető, mint a kiszolgáló és a szoftver szerveroldalán szükséges fejlesztések. A szerver válaszidejét negatívan befolyásoló problémák felsorolása:
- A kiszolgáló megosztása, konfigurációja (azaz a szerver beállításai) és a szerver erőforrásai okozhatják a problémát. A szerver kapacitását a forgalomnak megfelelően növelni kell. Egyes esetekben a rosszul megírt adatbázis-lekérdezések és a rendkívül összetett szoftverösszetevők komolyan befolyásolhatják a szerver válaszidejét.
- A CDN (Content Delivery Network) használata késedelmet okozhat a tartalom elérésében, ami hatással van az FCP-re. A tartalom méretének növekedésével például, ha egy nagy animált GIF-et vagy videót CDN nélkül próbálnak meghívni, és a fő kiszolgáló egy másik kontinensen található, előfordulhat, hogy CDN-megoldásokat kell fontolóra vennie az FCP feloldásához.
- A statikus tartalom nem megfelelő és következetes gyorsítótár-házirenddel történő kiszolgálása túlterhelést okozhat a látogatók számának növekedésével a szervered feleslegesen. Például, ha nem tartja hosszú ideig a gyorsítótárban az emblémát, miközben minden oldalon betölti, akkor szükségtelenül rontja a szerver válaszidejét.
- Felesleges oldalátirányítások miközben az oldal elérése szükségtelenül befolyásolhatja az FCP-t.
Például a múltban ilyen beállítások voltak: amikor a felhasználó be akart lépni egy webhelyre, volt egy HTTP HTTPS átirányítás, majd ha mobil volt, HTTPS mobil átirányítás (pl. https:// www-ről https://m-re), és ha az oldalt eltávolították, és 301-es számmal máshová irányították, akkor olyan érzés volt, mintha a felhasználót egy adóhivatalban íróasztalról íróasztalra vezették volna. Ez egy szélsőséges példa a jobb megértés érdekében, de ha átirányít egy oldalt egy másik URL-re 301-es átirányítással, majd átirányítja azt az oldalt egy másikra 301-es átirányítással, akkor előfordulhat, hogy ugyanazt a logikátlan beállítást hajtja végre.
- ha te ne használjon előcsatlakozást vagy DNS-előhívást előtagokat, amikor csatlakozik harmadik féltől származó szolgáltatásaihoz, és csatlakozik számos harmadik féltől származó szolgáltatáshoz, akkor nem tesz semmi előnyöset az FCP számára.
Csökkentse a megjelenítést blokkoló erőforrásokat
Be kell vallanom, hogy ennek a sornak írt egyetlen pontnak a megoldása hónapokig tarthat.
Ennek eléréséhez létezik egy megoldási módszer, ahol minden A JS, CSS és hasonló, az oldal megjelenítését blokkoló erőforrások az oldal létrehozása után töltődnek be, de a webhely eredetileg látható része töltődik be először, miközben a webhely betöltődik.. Ehhez azonban minden JS-t, CSS-t és hasonló erőforrásokat meg kell vizsgálni, és a legidőigényesebb folyamatokat szét kell választani. Ezenkívül a lehető legkevesebb harmadik féltől származó szolgáltatás használata segít optimalizálni az FCP-t.
