PageSpeed Insights Hibák Javítása

A digitális világban az idő pénz. Egy lassan betöltődő weboldal nem csak a felhasználói élményt rontja, de a keresőmotorok szemében is kevésbé előnyös. A gyors oldalbetöltődés nem csak a látogatók türelmét kíméli meg, hanem növeli a konverziós arányokat, csökkenti a visszafordulási arányt és javítja a keresőmotorokban való rangsorolást.

Ebben a cikkben bemutatjuk a Google PageSpeed Insights eszközét, amely egy ingyenes online szolgáltatás a Google-től, melynek segítségével felmérhetjük weboldalunk teljesítményét. Az eszköz nem csak a problémákat azonosítja, hanem konkrét javaslatokat is tesz azok megoldására. A PageSpeed Insights segítségével tehát nem csak azt tudjuk meg, hogy milyen gyors a weboldalunk, hanem azt is, hogy hogyan tehetjük még gyorsabbá.

Ebben a cikkben részletesen bemutatjuk a PageSpeed Insights által azonosított leggyakoribb hibákat, és lépésről lépésre vezetjük végig az olvasót a megoldásokon. Fontos megjegyezni, hogy a webfejlesztés és a teljesítményoptimalizálás folyamatosan változó terület, ezért cikkünk is rendszeresen frissül az újabb hibákkal és azok megoldásaival.

Ha tapasztalsz olyan hibát aminek a megoldása itt nem szerepel, és nem sikerül megoldanod, írd le a komment szekcióban és megpróbálom javítani!

Hogyan használjuk a Google PageSpeed Insights-ot?

• Látogass el a Google PageSpeed Insights weboldalára.
• Add meg a vizsgálni kívánt weboldal URL-jét a megadott mezőbe.
• Kattints a "Vizsgálat" (Analyze) gombra.
• Várj néhány másodpercet, amíg az eszköz elemzi az oldalt és elkészíti a jelentést.

Milyen adatok szerepelnek a jelentésben?

A rendszer egy 0-tól 100-ig terjedő skálán mutatja, hogy az oldal milyen jól teljesít. A magasabb pontszám jobb teljesítményt jelent.

First Contentful Paint

A "First Contentful Paint" (FCP) egy fontos webes teljesítménymutató, amely az oldal betöltési sebességének egy aspektusát méri.

Az FCP az az időpont, amikor az első darabja a weboldal tartalmának megjelenik a képernyőn a böngészőben. Ez lehet bármilyen vizuális tartalom, például szöveg, kép, háttérszín vagy akár egy ikon. Az FCP azért fontos, mert az első benyomást kelti a felhasználóban arról, hogy az oldal "működik" és betöltődik.

Amikor egy felhasználó egy weboldalt látogat meg, az első vizuális visszajelzés (azaz amikor valami megjelenik a képernyőn) kulcsfontosságú a felhasználói élmény szempontjából. Ha ez az időpont túl hosszúra nyúlik, a felhasználók türelmetlenek lehetnek, és elhagyhatják az oldalt, még mielőtt az teljesen betöltődne.

A Google PageSpeed Insights és más teljesítményelemző eszközök automatikusan mérnek olyan mutatókat, mint az FCP. Ezek az eszközök általában milliszekundumban (ms) adják meg az FCP értékét.

Hogyan javíthatjuk az FCP-t?

Az FCP javítása érdekében többféle módszer is létezik, többek között:

• Optimalizáld a képeket és a médiafájlokat.
• Csökkentsd a CSS és JavaScript fájlok méretét.
• Használj gyorsítótárazást a gyakran használt erőforrásokhoz.
• Optimalizáld a webes betűtípusok betöltését.

Largest Contentful Paint (A legnagyobb tartalmi festés)

A "Largest Contentful Paint" (LCP) egy másik kulcsfontosságú webes teljesítménymutató.

Az LCP az az időpont, amikor a legnagyobb vizuális tartalmi elem (például egy kép, videó vagy egy szövegblokk) teljesen betöltődik és megjelenik a képernyőn. Ez a mutató azt méri, mennyi idő alatt válik a legfontosabb, legnagyobb tartalmi elem láthatóvá a felhasználó számára.

Míg az FCP az első vizuális visszajelzést méri, az LCP azt mutatja meg, mennyi idő alatt töltődik be az oldal legfontosabb, legnagyobb tartalmi eleme. Ha az LCP értéke magas, az azt jelenti, hogy a felhasználóknak hosszú ideig kell várniuk, mire az oldal legfontosabb tartalma megjelenik, ami ronthatja a felhasználói élményt.

A Google PageSpeed Insights és más teljesítményelemző eszközök képesek mérni az LCP-t. Az eredményt általában milliszekundumban (ms) adják meg.

Hogyan javíthatjuk az LCP-t?

• Optimalizáld a képeket: használjon modernebb képformátumokat, és méretezze le a képeket a megfelelő méretre.
• Távolítsd el vagy halaszd el a nem létfontosságú JavaScript és CSS fájlok betöltését.
• Használj gyorsítótárazást a gyakran használt erőforrásokhoz.
• Optimalizáld a szerver válaszidejét.

Cumulative Layout Shift

A "Cumulative Layout Shift" (CLS) egy viszonylag új, de nagyon fontos webes teljesítménymutató.

A CLS azt méri, hogy mennyire "ugrálnak" vagy "mozdulnak el" az oldal elemei betöltődés közben. Egy magas CLS érték azt jelenti, hogy az oldal elemei váratlanul elmozdulnak, ami zavaró lehet a felhasználók számára, és akár hibás kattintásokhoz is vezethet.

Gondoljunk bele: ha egy felhasználó megpróbál egy gombra kattintani, de az oldal elemek váratlanul elmozdulnak és a gomb eltűnik vagy máshova kerül, az nagyon zavaró lehet. A CLS éppen ezt a zavaró elmozdulást méri, és egy alacsony érték azt jelenti, hogy az oldal stabil és a felhasználói élmény nem zavaró.

A Google PageSpeed Insights és más teljesítményelemző eszközök képesek mérni a CLS-t. Az eredményt egy 0 és 1 közötti értékként adják meg, ahol az alacsonyabb érték jobb.

Hogyan csökkenthetjük a CLS-t?

• Adj meg fix méretet a képeknek és a médiatartalmaknak, hogy a böngésző előre tudja, mennyi helyet foglalnak el.
• Kerüld el a hirdetések, beágyazott tartalmak vagy más dinamikus elemek váratlan hozzáadását az oldal tetejéhez.
• Használj webes betűtípusokat úgy, hogy ne okozzanak váratlan elmozdulást.
• Kerüld a nem létfontosságú animációkat vagy mozgásokat, amelyek elmozdíthatják az oldal tartalmát.

Gyakran előforduló hibák és azok javítása

Reduce unused JavaScript

Ez a figyelmeztetés azt jelzi, hogy a weboldalon vannak olyan JavaScript kódok vagy fájlok, amelyek nincsenek használva vagy nem szükségesek az oldal azonnali betöltéséhez. Ezek a felesleges kódok növelik az oldal betöltési idejét és az adatforgalmat.

Mi a teendő vele?

• Csökkentsd a felesleges JavaScriptet: Használj eszközöket vagy szkripteket a JavaScript kódok elemzéséhez, és távolítsd el azokat a kódokat, amelyek nincsenek használva.
• Halaszd el a JavaScript betöltését: Használd a defer vagy async attribútumokat a script címkékben, hogy a JavaScript fájlok csak akkor töltődjenek be, amikor szükségesek. Ez lehetővé teszi az oldal tartalmának gyorsabb betöltését anélkül, hogy a JavaScript kódok betöltése blokkolná azt.
• Használj kód-szétválasztást: Oszd fel a JavaScript kódjait kisebb csomagokra, és csak azokat a csomagokat töltsd be, amelyek valóban szükségesek egy adott oldalon.

Tipikus példa a Google Tagmanager kódja. Ebben az esetben valami hasonló figyelmeztetés érkezik:

Reduce unused JavaScript and defer loading scripts until they are required to decrease bytes consumed by network activity.
Google Tag Manager Tag-Manager 44.0 KiB 28.6 KiB
/gtm.js?id=GTM-*****(www.googletagmanager.com)

A GTM kódot nyílván nem lehet törölni, sem nagyon módosítani. Az oldalunknak szüksége van rá. Ha a kódot megnézzük közelebbről, az

async=true;

már szerepel benne, így ez a javaslat is kilőve.

Az egyik megoldás amit csinálhatunk, hogy késleltetjük a kód végrehajtását az oldalon. Ha WordPress-es oldalad van és használsz valamilyen cache bővítményt, mint pl: a WP Rocket, akkor ez a funkció elérhető a bővítményben. Ha egyedi fejlesztésű oldalad van, akkor manuálisan is megteheted. A GTM kód lényegében csak Javascript, így itt lehet használni a Javascript setTimeout function-t az alábbi módon:

<script>setTimeout(function() {(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-*****');}, 3000);</script>

A GTM kódot a

setTimeout(function() {

   // Ide másold a GTM kódot

}, 3000);

setTimeout function-ba kell illeszteni. Ebben az esetben 3 másodperc elteltével fog a kód végrehajtódni. Nekem ez a megoldás a "Performance" értékét 79-ről 98-100-ra lökte.

A Javascript más megoldást is kínál, nem csak a késleltetést.

window.addEventListener('scroll', function loadGTM() {
    (function(w,d,s,l,i){
        w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
        var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
        j.async=true; j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
        f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-*****');
    
    // Remove the event listener to ensure GTM is loaded only once
    window.removeEventListener('scroll', loadGTM);
});

Itt pl akkor fog végrehajtódni a kód ha a felhasználó elkezdi görgetni az oldalt.

document.addEventListener('DOMContentLoaded', function() {
    (function(w,d,s,l,i){
        w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
        var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
        j.async=true; j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
        f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-******');
});

Ebben az esetben pedig akkor hajtódik végre a GTM kód miután az oldal betöltődése befejeződött.

Avoid chaining critical requests

Ez a figyelmeztetés azt jelzi, hogy az oldal betöltése során vannak olyan erőforrások (például JavaScript, CSS, képek), amelyek egymás után töltődnek be, vagyis az egyik erőforrás betöltése függ a másik befejezésétől. Ez "láncolatot" hoz létre, ami meghosszabbíthatja az oldal teljes betöltési idejét.

Mi a teendő vele?

• Elemzés: Használj eszközöket a weboldal erőforrásainak elemzéséhez, hogy megértsd, mely erőforrások okozzák a láncolatot.
• Optimalizáld az erőforrások sorrendjét: Ha lehetséges, módosítsd az erőforrások betöltési sorrendjét úgy, hogy a kritikus erőforrások előbb töltődjenek be.
• Használd az async és defer attribútumokat: A JavaScript fájlok esetében használd az async vagy defer attribútumokat, hogy párhuzamosan töltsenek be, anélkül, hogy blokkolnák az oldal többi részét.
• Előtöltés: Használd a link rel="preload" címkét a kritikus erőforrások előtöltéséhez, így amikor szükség van rájuk, gyorsabban betöltődnek.

Ha van rá mód érdemes minimalizálni a CSS és Javascript fájlokat. Ha ezt manuálisan tudod csak megtenni, akkor ez az oldal ideális lehet. A Google-on sok hasonlót találsz.

Background and foreground colors do not have a sufficient contrast ratio

Ez a figyelmeztetés azt jelzi, hogy a weboldalon lévő szöveg és annak háttere között nincs elegendő kontraszt. Alacsony kontrasztú szöveg nehezen olvasható, különösen a látássérült felhasználók vagy az idősebb korosztály számára. Szerencsére ez egy olyan hibajelzés ami könnyen javítható, csak a színeken kell módosítani.

Mi a teendő vele?

• Kontraszt ellenőrzése: Használj online eszközöket vagy böngésző kiegészítőket a színek kontrasztarányának ellenőrzésére.
• Színek módosítása: Változtasd meg a szöveg vagy a háttérszínét úgy, hogy a kettő közötti kontraszt megfelelő legyen. Általában a fehér szöveg sötét háttéren vagy a fekete szöveg világos háttéren jól olvasható.
• WCAG irányelvek: Tájékozódj a Web Content Accessibility Guidelines (WCAG) irányelveiről, amelyek ajánlásokat tartalmaznak a színek kontrasztjával kapcsolatban. A WCAG 2.1 szerint az AA szintű kontrasztarány legalább 4.5:1 kell legyen normál szöveg esetében.
• Tesztelés: Miután módosítottad a színeket, ellenőrizd újra a kontrasztot, és kérj visszajelzést a felhasználóktól, hogy a szöveg jól olvasható-e.

Folyt. köv.