Google oldalsebesség insights

PageSpeed Insights eszköz. A PageSpeed Insights eszköz elemzi egy weboldal tartalmát, majd javaslatokat generál az oldal gyorsabbá tételére. A Google 2018-ban frissítette az eszközt, hogy a Chrome böngészőkből származó valós helyszíni adatokat használjon.

Jelenlegi oldal megnyitása a Google PageSpeed Insights-ban

Egy nagyon könnyű bővítmény, amely segít az aktuális oldal PageSpeed Insights elemzésének egyszerű futtatásában. Maga nem valósít meg semmilyen ellenőrzési funkciót - csak gombot ad hozzá a Google szolgáltatás gyors futtatásához. Így az elemzés csak nyilvánosan elérhető oldalak esetében végezhető el.

Megjegyzés: nem fogyaszt erőforrásokat üresjáratban; nem igényel speciális jogosultságokat; nem tartalmaz csalást.

A webmesterek

Tisztában vannak az oldal sebességének fontosságával a jó felhasználói élmény biztosításában. A nyílt weben hirdetésekkel pénzt kereső kiadók számára az oldalsebesség javítása az egyik legközvetlenebb eszköz a keresési forgalom növelésére, a visszafordulási arány csökkentésére és a bevételek növelésére.

Az oldalsebesség optimalizálásának első lépése az oldalsebesség mérése és a szűk keresztmetszetek azonosítása. Az oldalsebesség mérésére számos eszköz áll rendelkezésre. A Google PageSpeed Insights azonban talán a legkimerítőbb a tekintetben, hogy használható ajánlásokat ad.

Ebben az útmutatóban bevezetést nyújtunk a PageSpeed Insights eszközbe, bemutatjuk, hogyan befolyásolja a pontszám a keresési rangsorolást, és elmagyarázzuk, miért nem érdemes 100/100-as pontszámot hajszolni. Ezután mélyebbre merülünk az oldalsebesség 5 gyakori szűk keresztmetszetébe, hogy mit jelentenek, és hogyan lehet őket kijavítani.

A Google-nek saját oldalsebesség-tesztje van PageSpeed Insights néven. Ez segít a kiadóknak mérni a weboldalaik betöltési idejét asztali és mobileszközökön. Azonosíthatod a szűk keresztmetszeteket, és ezt az információt felhasználhatod az oldal betöltési sebességének optimalizálásához. Kezd bármelyik URL megadásával, és futtasd a tesztet.

A tesztet követően a Google 100-ból egy PageSpeed-pontszámot rendel a tesztelt webhelyhez. Ez több oldalbetöltési teljesítményre vonatkozó legjobb gyakorlaton alapul. Kapsz egy listát is, amely ajánlásokat tartalmaz a pontszám, és ennek következtében webhelyed általános oldalbetöltési sebességének javítására.

Ez az a pont, ahol azonban egy kicsit trükkössé válik a dolog. A legtöbb ajánlásnak nem fejlesztők számára nem lenne értelme. De ez nem baj! Ha olyan CMS-t használsz, mint a WordPress, akkor ezen ajánlások nagy részét kódolási ismeretek nélkül is megvalósíthatod.

Miért nem érdemes 100/100-as pontszámot elérni?

Amint webhelyed elér egy viszonylag jó PageSpeed pontszámot, mondjuk bármit, ami 90/100-tól északra van - a felhasználói valószínűleg már tapasztalják a gyors oldalbetöltési sebességgel járó összes előnyt. A tökéletes 100/100-as pontszám elérése nem könnyű és nem is feltétlenül hasznos. Sokkal inkább az számít, hogy mennyire jól hajtottad végre a PageSpeed ajánlásait, mint az, hogy elérjen egy bizonyos számot.

A túlzott optimalizálás azt is jelentheti, hogy le kell venni alapvető tervezési és használhatósági elemeket, amelyek elengedhetetlenek a jó általános felhasználói élmény biztosításához. Ezért fontos, hogy a webmesterek átfogóan tekintsék át, hogyan tapasztalják a felhasználók az oldalt a valós környezetben. Ne köss kompromisszumot a forma vagy a funkció tekintetében a webhely gyorsítása érdekében.

Azt is fontos megjegyezni, hogy bármennyire is hasznos lehet a PageSpeed Insights, nem ez az utolsó szó az oldalsebesség optimalizálásában. A Google szerint ez az, ami a leginkább számít. Előfordulhat például, hogy egy webhely oldalbetöltési ideje 500 ms alatt van, mégis rossz pontszámot kap a PageSpeed Insights-on.

Próbálj tesztelni más oldalsebesség-eszközökkel, például a Pingdom, az YSlow és a GTMetrix segítségével. Ezek az eszközök szintén különböző helyekről tesztelik az oldal betöltési sebességét. Észre fogod venni, hogy a különböző eszközökből származó számok nem egyeznek pontosan, ami jól mutatja, hogy ezek a tesztek mennyire önkényesek lehetnek.

Hogyan használd a Google a PageSpeed Insights-ot

Természetesen a Google amellett, hogy olyan eszközöket biztosít, mint a PageSpeed Insights, a világ legnagyobb keresőmotorját is üzemelteti. Így természetes következtetés, hogy a PageSpeed-értékelésed a keresési rangsorolásra is hatással lehet. És igen - a Google valóban rangsorolási jelként használja az oldalsebességet.

A Google 2018 óta a mobil oldalsebességeket rangsorolási tényezőként használja a keresési eredményeknél. 2021 júniusában a Google frissítette keresési algoritmusát, hogy a Core Web Vitals értéket rangsorolási jelként vegye figyelembe az asztali találatoknál. A CWV frissítésről bővebben korábbi blogbejegyzésünkben olvashatsz

A lényeg az, hogy a PageSpeed Insights pontszámok több mint egy hiúsági mérőszám. A Google valóban hisz az oldaltesztelési módszertanában, és ennek következtében a jó PageSpeed pontszámmal rendelkező oldalakat jobb helyezésekkel jutalmazza a keresőmotorján és nagyobb forgalommal.

Hogyan javítható a PageSpeed pontszám

Szüntesd meg a renderelést blokkoló erőforrásokat. Mit jelent ez? A renderelést blokkoló erőforrások olyan statikus fájlok, például JS, CSS, HTML és betűtípusok, amelyek létfontosságúak a weboldal rendereléséhez. A látogató böngészőjének le kell töltenie és fel kell dolgoznia ezeket a fájlokat, mielőtt az oldal többi részét renderelné, ami szűk keresztmetszetet okoz.

Hogyan javítható: Ha a weboldal nem tartalmaz sok JS-t vagy CSS-t, megszabadulhat ettől a figyelmeztetéstől, ha inline-olja őket, azaz beépíti a JS/CSS-kódot a HTML-fájlba. Ha WordPress-t használsz, egy olyan bővítményt használhatsz ehhez, mint az Autoptimize. Az inlining csak nagyon kis oldalak esetében működik. Nagyobb oldalak esetében az async és a defer attribútumokat kell használnod, hogy a szkriptek ne blokkolják a megjelenítést.

Mindkét attribútum arra utasítja a böngészőt, hogy a szkriptet a háttérben töltse le, így az nem blokkolja a weboldal renderelését. Míg az aszinkron szkriptek a letöltés befejezése után azonnal végrehajtódnak, a defer szkriptek tiszteletben tartják a dokumentum sorrendjét. Végül, az egyéni betűtípusok renderelést gátló aspektusának csökkentése érdekében töltse be őket helyben, ahelyett, hogy CDN-t használna, mint például a Google Fonts.

A képméret és a képküldés optimalizálása

Mit jelent: Az optimalizálatlan képek miatt hozzáadott oldal késleltetés gyorsan összeadódhat. A képek megfelelő méretű, formátumú és időben történő kiszolgálása jelentősen javíthatja mind az oldal általános betöltési idejét, mind a PageSpeed Score-értéket.

Hogyan javítható: Nyilvánvalóan a képek optimalizálásának legjobb ideje a weboldalra való feltöltés előtt van. Ez a formátumra és a maximális felbontásra vonatkozó szabványok meghatározását jelenti, amelyeket a webhely minden felhasználója betart. A képek megfelelő méretű kiszolgálása mellett fontos az is, hogy a következő generációs képeket, például WebP-t, JPEG 2000-et vagy JPEG XR-t szolgálj ki.

Csak akkor töltsd be a képeket a lapozás alatt, amikor azok először kerülnek a felhasználó nézetablakába (ezt nevezik lusta betöltésnek is). A leggyakrabban használt CMS-ek, mint a WordPress, Drupal, Magento stb., harmadik féltől származó bővítményeket és pluginokat biztosítanak a képek következő generációs formátumokra való átváltásához, lusta betöltéséhez és tömeges optimalizálásához.

Kerüld a kritikus kérések láncolását. Mit jelent ez? Ez a kritikus renderelési útvonal fogalmához kapcsolódik, amely azon lépések sorozatára utal, amelyeket a böngésző a JS, a CSS és a HTML képernyőn megjelenő pixelekké való átalakításához tesz. A kritikus kérésláncok az oldal rendereléséhez fontos, egymástól függő hálózati kérések sorozata. A lánc hossza és a letöltési méret egyaránt befolyásolja a PageSpeed pontszámot.

Hogyan javítható: Az eredményekben bemutatott erőforrásfa kiemeli a lánc minden egyes függő kéréshez kapcsolódó méretet és betöltési időt. Innen azonosíthatja és célba veheti azokat, amelyek a leginkább hozzájárulnak az oldal késleltetéséhez, halasztással, aszinkronizálás megjelölésével és a kritikus útvonal lerövidítésével, a kritikus eszközök minél korábbi letöltésével. Észre fogja venni, hogy a Google nem rendel ki megfelelt vagy nem felelt meg ezen a teszten, mivel ez egy optimalizálásra szolgáló erőforrás.

Tartsd alacsonyan a kérések számát és kis átviteli méreteket. Mit jelent ez? Minél több kérést kell a böngészőknek végrehajtaniuk a webhely betöltéséhez, és minél nagyobb az egyes kérések mérete, annál tovább tart a webhely betöltése. A kritikus kérések láncolatához hasonlóan a Google ennél a tesztnél sem rendel ki megfelelt vagy nem megfelelt értékelést, hanem a generált kérések teljes számát és a kapcsolódó letöltési méreteket adja meg.

A nem használt JavaScript és CSS csökkentése

Mit jelent: A fel nem használt kód szállítása gyakori probléma a webfejlesztés során. Tegyük fel, hogy egy navigációs sávot kell hozzáadnod a webhelyedhez a Bootstrap könyvtárból, ezért a HTML-edben hozzáadsz egy linket a Bootstrap stílustáblára. A stílustábla azonban nem csak a navigációs sávot tartalmazza, hanem a Bootstrap összes komponensét. Ez a sok fel nem használt kód hozzájárul az oldal késleltetéséhez.

Hogyan javítható: A WordPress-t használó kiadóknak érdemes megfontolniuk, hogy csökkentsék azon bővítmények számát, amelyek felesleges JS/CSS-kódot adnak hozzá a weboldalakhoz. A Chrome DevTools programban a kódlefedettség segítségével azonosíthatja a problémás szkriptek vagy stílustáblák URL-címét. Figyeljen azokra a témaelemekre vagy bővítményekre, amelyeknél a kódlefedettségben sok a piros.

Fontold meg a JS-, CSS- és HTML-kódok kicsinyítését is - ez a folyamat a szintaxis és a felesleges szóközök eltávolítását jelenti a kód tömörítése érdekében, hogy tovább csökkentse a betöltési időt és a sávszélesség-használatot. Az Autoptimize vagy a WP Rocket segítségével automatikusan minimalizálhatja a kódot a WordPressben. A más CMS-t vagy egyedi fejlesztésű webhelyet használó kiadók harmadik féltől származó JavaScript Minifier és CSS Minifier segítségével manuálisan is kicsinyíthetik a kódot.

Hogyan javítható a Google PageSpeed pontszám a WordPressben?

A WordPress a legnépszerűbb tartalomkezelő rendszer (CMS), amelyet weboldalak készítésére használnak. Amellett, hogy könnyen elkészíthető témákat kínál gyönyörű webhelyek létrehozásához, rengeteg WordPress bővítményt kínálnak, amelyek segítenek a webhelytulajdonosoknak a webhely sebességének megtisztításában.

Fontos megjegyezni, hogy nem minden bővítmény működik zökkenőmentesen a témával. Először is ellenőrizd, hogy képes vagy-e biztonsági másolatot készíteni webhelyedről vagy egy staging környezetet. Kerüld a nagyobb weboldal-változtatásokat anélkül, hogy visszaállíthatnád weboldalad abban az esetben, ha valami elromlik.

Ezután teszteld a bővítmény funkcióit, hogy lásd, valóban segít-e javítani a PageSpeed pontszámát. Végül, ha pozitív eredményt látsz, és nem történik vizuális változás a webhelyen, tedd élesbe a változtatásokat. Természetesen ez még nem minden. A PageSpeed Insights jelentés elég kimerítő. Ez a cikk csak a leggyakoribb problémákra javasol optimalizálásokat, amelyek az oldal késleltetésének nagy részét okozzák. Íme néhány forrás, amely segíthet a jelentés által azonosított egyéb problémák nyomon követésében és megoldásában: