PageSpeed Insights: hogyan tartsuk magasan a webhely sebességét

Ha weboldalt futtat, valószínűleg hallott már a Google PageSpeed Insights szolgáltatásról. Ez egy ingyenes eszköz a Google-tól, amely méri a weboldalak teljesítményét mobil és asztali eszközökön egyaránt. De a magas pontszám megszerzése gyakran olyan játéknak tűnhet, amelyet nem nyerhet meg.

Ma részletes áttekintést fogunk készíteni a PageSpeed Insights-ról, megvizsgáljuk az összes lehetséges problémát, amelyek csökkentik a pontszámot, és pontosan elmagyarázzuk, hogyan optimalizálhatja webhelyét.

Miért olyan fontos a webhely sebessége?

Mielőtt megvizsgálnánk a technikai problémákat, beszéljünk arról, hogy miért érdemes törődni vele. A webhely sebessége nem csak hiúsági mérőszám. Közvetlenül befolyásolja vállalkozását.

Először is, a sebesség a SEO egyik fő rangsorolási tényezője. A Google hivatalosan kijelentette, hogy a Core Web Vitals segítségével döntik el, milyen magasak az oldalak. Ha webhelyének betöltése túl sokáig tart, a Google lenyomja a keresési eredményeket.

Másodszor, a sebesség befolyásolja a felhasználói élményt és a konverziós arányt. A legtöbb felhasználó elhagyja az oldalt, ha több mint három másodpercet vesz igénybe a megjelenés. A gyors webhely leköti a látogatókat, és sokkal nagyobb valószínűséggel vásárolja meg termékét vagy olvassa el cikkeit.

A PageSpeed Insights mérőszámok megértése

Amikor beír egy URL-t a PageSpeed Insightsba, az kétféle adatot ad: laboratóriumi adatokat és terepi adatokat.

A terepi adatok azt mutatják, hogy a valódi felhasználók hogyan élik meg webhelyét. 28 napon keresztül gyűjtik a Chrome felhasználói élményjelentése (CrUX) segítségével. Ez az, ami igazán számít a SEO számára. A laboratóriumi adatokat ellenőrzött környezetben gyűjtik, hogy segítsenek a hibakeresésben.

A főbb mutatók, amelyeket meg kell nézni:

• Első tartalommal bíró festék (FCP): az az idő, amely alatt a böngésző megjeleníti az első szövegrészt vagy képet.
• Legnagyobb tartalmú festék (LCP): az az idő, ami ahhoz kell, hogy a legnagyobb tartalomblokk láthatóvá váljon.
• Kumulatív elrendezés eltolás (CLS): azt méri, hogy az oldal elrendezése mennyit változik a betöltés során.
• Kölcsönhatás a következő festékkel (INP): milyen gyorsan reagál az oldalad, miután egy felhasználó rákattint vagy megérint valamit.

Gyakori problémák, amelyek tönkreteszik a pontszámot

A rossz pontszám megszerzése könnyű. A kijavításához meg kell találni a kiváltó okot. Íme a leggyakoribb problémák, amelyeket a PageSpeed Insights diagnosztikai jelentésében láthat.

1. Render-blokkoló erőforrások

Ez akkor fordul elő, ha javascript vagy CSS fájlok teljesen blokkolják az oldal betöltését. A böngészőnek le kell állítania, le kell töltenie a fájlt, és elemeznie kell, mielőtt bármit megjeleníthetne a felhasználónak.Hogyan lehet javítani: el kell halasztania vagy aszinkron módon be kell töltenie az összes nem kritikus javascriptet. A CSS esetében bontsa ki a kritikus CSS-t, és illessze be a célba, majd a többit aszinkron módon töltsd be.

2. Optimalizálatlan hatalmas képek

A képek általában a weboldal teljes súlyának legnagyobb részét teszik ki. Egy kis logó 5MB-os képének feltöltése garantált módja annak, hogy mindent lelassítson.Hogyan lehet javítani: mindig tömörítse képeit modern formátumok, például WebP segítségével. Használnia kell aloading="lazy"attribútum, így a hajtás alatti képek csak akkor töltődnek be, ha a felhasználó lefelé görget hozzájuk. Mindig állítsa be az explicit szélességet és magasságot a képcímkéken, hogy megakadályozza az elrendezés eltolódását.

3. Túl sok a kihasználatlan javascript

A modern webhelyek gyakran nehéz könyvtárakat vagy harmadik féltől származó szkripteket töltenek be, de csak a kód egy kis részét használják. A böngészőnek még mindig mindent le kell töltenie és ki kell értékelnie, értékes feldolgozási időt vesz igénybe.Hogyan lehet javítani: távolítsa el a nem használt bővítményeket, és próbálja meg felosztani a kódot. Csak azokat a szkripteket töltse be, amelyekre ténylegesen szüksége van az adott oldalon.

4. Lassú szerver válaszidők

Az első bájtig eltelt idő (TTFB) azt méri, hogy mennyi ideig tart a tárhelyszerver a kezdeti HTML visszaadásához. Ha a szerver lassú, az összes többi optimalizálás nem sokat számít.Hogyan lehet javítani: használjon gyors webtárhelyet. Hajtsa végre a szerveroldali gyorsítótárat, és használjon tartalomszolgáltató hálózatot (CDN), hogy webhelyét a felhasználókhoz fizikailag közelebb eső szerverekről szolgálja ki.

Ez az eszköz nagyszerű, mert azt mondja, hogy pontosan hol hibáztál, és még pontos képernyőképeket is mutat. Tehát csak lépésről lépésre javítsa ki ezeket a hibákat, és a SEO javul.

Javasolta például a.jpg konvertálását .webp képekké a weboldalunkhoz.

Dene idegeskedj, ha nem tudod elérni a 100% - ot, valójában nagyon nehéz megtenni. Ha a webhelye összetett, sok képre van szüksége, néhány konkrét js-könyvtárra, akkor azt gondolhatja, hogy – már nincs mit optimalizálni, miért van még mindig 80-90%? Ez teljesen normális. Ha webhelye a “zöld zónában van, az már jó jel. Ezenkívül az eredmények néhány százalékponttal –-vel is változhatnak, mindenféle változás nélkül –, ha a sebességet más időpontban teszteli.
Azonban továbbra is meg kell próbálnia maximalizálni a teljesítményt azáltal, hogy végigmegy és kijavítja a lista minden hibáját.

Miért tartja a fordítási forgatókönyvünk magas szinten a sebességét

Amikor új widgeteket ad hozzá a webhelyéhez, nagyon óvatosnak kell lennie a teljesítmény tekintetében. Nagyon gyakori, hogy a fordítási bővítmények megsemmisítik a PageSpeed pontszámot. Gyakran hatalmas nyelvi adatbázisokat töltenek be az ügyféloldalon, súlyos javascript-késéseket futtatnak, és blokkolják a renderelést, miközben kitalálják, milyen nyelvet jelenítsenek meg.

Fordítási forgatókönyvünket szigorúan a teljesítmény szem előtt tartásával építettük fel. Ezért van az, hogy megoldásunk könnyűsúlyú, és minimális hatással van a teljesítmény sebességére:

• Apró hasznos teherhatár: az alapvető forgatókönyvünk hihetetlenül kicsi. Nem kötegelünk nagy harmadik féltől származó könyvtárakat. Csak néhány kilobájtot ad hozzá az oldal méretéhez.
• Aszinkron betöltés: a szkriptet aszinkron futtatásra tervezték. Soha nem akadályozza meg a fő tartalom megjelenítését.
• Globális CDN szállítás: a forgatókönyvet és a lefordított szöveget globális hálózatról szállítjuk. Ez azt jelenti, hogy az adatok a lehető legrövidebb távolságot teszik meg a látogatójához.
• Natív DOM injekció: ahelyett, hogy elrejtené az oldalt vagy elrendezési eltolódásokat hozna létre, szkriptünk natív módon zökkenőmentesen injektálja a lefordított karakterláncokat. Ez ezredmásodpercek alatt fut le, így a kumulatív elrendezéseltolás tökéletesen nullán marad.

A technikai lábnyom lehető legkisebbre szorításával biztosítjuk, hogy webhelyét teljes egészében lefordíthassa anélkül, hogy feláldozná nehezen megszerzett SEO-rangsorait vagy felhasználói élményét.