- PageSpeed Insights
AI által fordított szöveg.
A bejegyzés durumis AI által generált összefoglalója
- A weboldal teljesítményének javítása (PageSpeed Insights, Lighthouse) segítségével javíthatja a keresőmotorokban való megjelenést, és a Web Core Vitals mutatók fontosak ebben a folyamatban.
- A CLS, LCP, FCP és FID mutatók javítása érdekében alkalmazhatunk UI vázlatot, képoptimalizálást, a renderelést blokkoló elemek eltávolítását, web betűtípusok optimalizálását, valamint JavaScript aszinkron feldolgozást.
- A különböző mutatók javításának módszerei mellett bemutatunk egyéb webes teljesítménynövelő technikákat (gzip tömörítés, web worker stb.), és a jövőben részletesebben foglalkozunk ezekkel a témákkal.
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?
export default () => { if (process.client && 'PerformanceObserver' in window) { let cumulativeLayoutShiftScore = 0; let largestContentfulPaint = 0; let firstInputDelay = 0; let firstContentfulPaint = 0;
// CLS const clsObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); entries.forEach((entry) => { if (!entry.hadRecentInput) { cumulativeLayoutShiftScore += entry.value; } }); }); // LCP const lcpObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); const lastEntry = entries[entries.length - 1]; largestContentfulPaint = lastEntry.startTime; }); // FID const fidObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); const firstEntry = entries[0]; firstInputDelay = firstEntry.processingStart - firstEntry.startTime; }); // FCP const fcpObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); const firstEntry = entries[0]; firstContentfulPaint = firstEntry.startTime; }); clsObserver.observe({ type: 'layout-shift', buffered: true }); lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true }); fidObserver.observe({ type: 'first-input', buffered: true }); fcpObserver.observe({ type: 'paint', buffered: true }); window.addEventListener('onload', () => { console.log('Final CLS Score:', cumulativeLayoutShiftScore); console.log('LCP:', largestContentfulPaint); console.log('FID:', firstInputDelay); console.log('FCP:', firstContentfulPaint); }); } };
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.