Weboldal teljesítményének mérése - PerformanceObserver

A Google által biztosított webhelyen keresztül

könnyedén mérhető a webhely teljesítménye.

https://pagespeed.web.dev/
webcímet beírva mérhető, vagy a Chrome böngésző kiterjesztéseként telepített Lighthouse segítségével is.

Miért jó a mutatók javítása?

Jobban megjeleníthető a keresőmotorokban. Az SEO miatt sokan használnak szerveroldali renderelést, de

ha a fenti teljesítménymutatók alacsonyak, akkor ez a hatás jelentősen csökken.

Hogyan javítható?

A web.dev webhelyen részletesen leírják, hogyan javíthatók a különböző mutatók.

Különösen 3 mutató befolyásolja jelentősen az eredményt. (Web Core Vitals)

Feljegyezni szeretném azokat a módszereket, amelyeket a mutatók javítására alkalmaztam.

Hogyan mérhető lokálisan?

A fenti kódot kell beilleszteni. Nuxt esetén a plugins mappába helyezhető, és a konzolon ellenőrizhető a naplózás.

Kumulatív elrendezés-eltolódás (CLS)

A renderelés során bekövetkező elrendezés-változások mértékét méri.

Például tegyük fel, hogy van egy oldalunk, ahol API-válasz alapján betöltünk egy 400x400 pixeles képet.

Az elrendezés bizonyos részei 400 pixelnyit eltolódhatnak a kép renderelésekor.

Ez a váratlan eltolódás negatív hatással van a felhasználói élményre, és közvetett módon a böngésző teljesítményére is.

A böngészőnek újra kell renderelnie a tartalmat.

Két egyszerű módszerrel javítható ez a probléma.

1. UI vázlat alkalmazása

- A legtöbb webhelyen a képek vagy komponensek méretének megfelelő vázlatot rajzolnak. Érdemes ezt figyelembe venni a fejlesztés során. Vue esetén a v-if és v-else segítségével rajzolhatunk vázlatot az egyes elemekhez.

2. Magasság fenntartása

- Ha túl sok stílust alkalmazunk a vázlathoz, az bonyolultabbá teszi a karbantartást, és hátrányos lehet. Csak a renderelt elemek minimális magasságának beállítása is hatékony lehet.

- A reszponzív weboldalakon a képek mérete eltérő lehet az eszközök között, így a magasság fix beállítása nehézkes lehet. Ebben az esetben a legkisebb eszköz mérete vagy a vh/vw egységek használhatók.

3. A kép elemekhez width és height attribútumok megadása

- A kép elemekhez a width és height attribútumokat a következőképpen adhatjuk meg:

<img src="image.jpg" width="400" height="400">

Még ha a kép tényleges mérete nem is 400x400 pixel, a böngésző számára jelezzük a várható méretet.

4. Web betűtípusok miatti elrendezés-változások elkerülése a font-display: swap tulajdonság használatával

- Tartalék betűtípus megadásával megelőzhető az elrendezés eltolódása.

Legnagyobb tartalommal rendelkező elem festése (LCP)

Az a időtartam, amely alatt a képernyőn a legnagyobb területet elfoglaló elem megjelenik. Ez általában egy kép, és az intuitív megoldás az, hogy a betöltési sebességet növeljük.

1. A képek méretének csökkentése.

- Ellenőrizzük, hogy a képek mérete nem túl nagy a renderelési méretekhez képest.

- Optimalizáljuk a képek renderelését webp kiterjesztéssel. A webp formátum veszteséges tömörítés esetén akár 30%-kal is kisebb fájlméretet eredményezhet a JPEG-hez képest, veszteségmentes tömörítés esetén pedig 20%-kal kisebb a PNG-hez képest.

- Gondolhatunk a lazy loading alkalmazására is, amely a görgetés során tölti be a képeket.

2. Caching vagy CDN használata.

3. Renderelést blokkoló elemek eltávolítása.

- A legtöbb mutatóra hatással van, ezért feltétlenül távolítsuk el őket. A böngésző a képernyő renderelésekor először a head tagekben található script elemeket tölti be, majd renderel. Tehát ellenőrizzük, hogy a head tagekben található scriptek (általában külső scriptek) valóban szükség szerint renderelődnek-e. Az async és defer attribútumok segítségével egyszerűen kezelhetjük ezt a problémát.

* A head tagekben található script elemek attribútumaival kapcsolatban később írok egy másik cikket.

4. A csomagok méretének minimalizálása.

- Ha a képek betöltése lassú, akkor függetlenül attól, hogy a szerverről való letöltés lassú-e, javítani kell ezen.

Ha nginx-szerű proxy szervert használunk, akkor a gzip tömörítést is alkalmazhatjuk.

* Az nginx konfigurációval kapcsolatban később írok egy másik cikket.

Első tartalommal rendelkező festés (FCP)

Az a pillanat, amikor az oldalon az első tartalom megjelenik.

1. Ugyanúgy, mint az előzőekben, a renderelést blokkoló elemeket el kell távolítani.

2. Az HTML fájl méretének minimalizálása.

- Ha túlzásba visszük a div tagek használatát, akkor nagyon mélyen ágyazott fa szerkezet jön létre, és a fájlméret is megnő.

3. Probléma lehet a külső web betűtípusokkal. A font-display: swap; tulajdonságot kell aktívan használni, hogy az alapértelmezett betűtípusok először megjelenjenek.

Első beviteli késleltetés (FID)

Az az időtartam, amely alatt a böngésző feldolgozza a felhasználó első bevitelét (kattintás, görgetés stb.) az oldalon. Előfordulhat, hogy egy gombra kattintva nem történik semmi, de valójában nem hibás a rendszer, hanem az API válaszát várja.

1. A JavaScript aszinkron funkcióit kell használni, hogy a fő szál ne legyen túlterhelt.

2. Web worker segítségével a fő száltól függetlenül végezhetünk további műveleteket.

* A web worker-ekről később írok egy másik cikket.

A karakterkorlát miatt itt befejezem.