A weboldalak betöltési sebessége rendkívül fontos a jó Google helyezés és a magas konverzió szempontjából. Ahhoz, hogy a sebességet tudjunk ellenőrizni és optimalizálni, a weboldal sebességének tesztelésére alkalmas eszközt kell használni.
A Google Page Speed Insights egy olyan online Google termék, amelynek a segítségével könnyedén meghatározható egy weboldal betöltési sebessége. Nagy előnye, hogy nem csak megmondja, mennyire lassú vagy éppen milyen szélsebes egy weboldal, de rá is mutat, min kellene változtatni ahhoz, hogy a betöltési sebesség a lehető legjobb legyen.
A mai felhasználók a sebesség megszállottjai
Egy weboldal betöltési sebessége a felhasználók számára az egyik legfontosabb szempont böngészés közben, hiszen a mai rohanó világban senkinek sincs ideje sokat várakozni az online tartalmak megjelenésére. Ha egy weboldal nem jelenik meg egy-két másodpercen belül, a felhasználók tovább kattintanak, és valószínűleg már soha nem is térnek vissza az ilyen időrabló weboldalra. Rohanó világunkban egyszerűen nincs idő többre, a türelem az internetezők számára ismeretlen fogalom.
Hogyan értékel a Google Page Speed Insights?
A Google Page Speed eszközt úgy találták ki, hogy jelentős informatikai tudás nélkül is minden weblaptulajdonos kezelni tudja, és hogy a programból kinyert információk a segítségére legyenek. Használata teljesen ingyenes, csak a vizsgálni kívánt weboldal url-jét kell megadni, és néhány másodperc alatt rendelkezésre is állnak a sebességi adatok. A Google Page Speed mobil és asztali eszközre is 1-től 100-ig terjedő skálán vizsgálja az adott weblap betöltési sebességét, ahol 100 a legjobb érték.
A pontszámok mellett 3 színnel is jelöli a minősítést a Google:
- Zöld (85-100 pont): Nagyszerű munka! Ez az oldal alkalmazza a legtöbb bevált módszert a teljesítmény növelésére, ezért jó felhasználói élményt biztosít.
- Narancs (65-84 pont): Erről az oldalról hiányzik néhány alapvető teljesítményoptimalizálási beállítás, ami lassú felhasználói élményhez vezethet.
- Piros (0-64 pont): Ez az oldal nincs optimalizálva, és nagy valószínűséggel lassú felhasználói élményt nyújt.
A Google Page Speed különlegessége, hogy nemcsak értékel, hanem fel is fedi a hibákat és javaslatot tesz azok megoldásra, ráadásul magyar nyelven. Ha lefut az elemzés, mobil és asztali nézetre is ad egy-egy pontszámot egy listával a javításra szoruló tételekről. Ezeket mindenképp érdemes javítani, mert nagy hatásuk lehet keresőoptimalizálás szempontjából is.
Mire kell figyelni pontosan?
- A szerver válaszidejének csökkentésére
- A megjelenítést gátló JavaScript és CSS kizárására a hajtás feletti tartalomban
- A böngésző gyorsítótárazásának kihasználására
- HTML és CSS forráskódok lekicsinyítésére
- Tömörítés engedélyezésére
- Céloldali átirányítások kerülésére
- Képek optimalizálására
- Látható tartalmak rangsorolására
Javasoljuk, hogy aki elolvassa ezt a cikket, futtassa le a saját weboldalára az elemzést. Érdemes ezeket a tanácsokat megfogadni, és a hibákat helyrehozni vagy szakemberrel javíttatni. Sokan gondolhatják azt, hogy a 100 pont elérése lehetetlen, vagy nagyon nehéz. Ez nem igaz. Nem kell más, csak több odafigyelés és egy kis munka. Az alábbiakban adunk néhány jó tanácsot a maximális pontszám elérése érdekében.
Tippek, trükkök, tanácsok
A szerver válaszidejének csökkentése
A Google által elfogadott szerver válaszidő maximum 200 milliszekundum. Ha ennél nagyobb értéket kapunk az elemzésben, akkor érdemes felkeresni a szolgáltatót, és kideríteni, mi okozza a problémát. Sok esetben nem feltétlenül a szolgáltatónál kell keresni a hibát, hanem a weboldal programozásában vagy a rosszul megtervezett adatbázisban.
A megjelenítést gátló JavaScript és CSS kizárása a hajtás feletti tartalomban
A weboldal fejlécében elhelyezett külső JavaScript és CSS állományok lassítják a betöltődést, ugyanis nem az adott oldal forráskódjában találhatóak. Erre a problémára megoldás lehet, ha ezen fájlok tartalmát egyenesen beégetjük a fejlécbe, vagy a hajtás alatti tartalomban (láblécben) hivatkozzuk be őket. Ezzel a megoldással megnőhet a forráskód mennyisége, de az elemzés pontszámára pozitív hatással lesz. Ennek a kritériumnak csak az a weblap tud megfelelni, amelyik többek között nem használ Google Analytics és Google+ integrációt. Igen, a Google saját termékeinek használata rontja az eredményt. Mégpedig azért, mert ezen alkalmazások használatához külső forrásfájlt kell beágyazni a weboldalba, ezért lassabb lesz a betöltődés.
Használja ki a böngésző gyorsítótárazását
A szerveren elhelyezett .htaccess fájl segítségével megadható, hogy az egyes tartalomtípusok (képek, CSS fájlok, JavaScript fájlok, betűtípusfájlok, stb.) mennyi időre kerüljenek a böngésző memóriájába. Ez azért fontos, mert így a kevésbé változó tartalmakat nem kell minden oldalfrissítéskor letöltenie a böngészőnek a szerverről. Tehát érdemes kihasználni a böngészők gyorsítótárazási funkcióját, hiszen segítségével gyorsabban betöltődnek a már meglátogatott weboldalak.
HTML, CSS, JavaScript fájlok lekicsinyítése
A böngésző akkor is kifogástalanul megjeleníti a weboldal tartalmát, ha a forráskód nincs formázva. Ugyanis nem veszi figyelembe a programozók által elhelyezett megjegyzéseket, sortöréseket, tagolásra használt szóközöket és tabulátorokat. Léteznek olyan online weboldalak, amelyek a forrásfájlok tartalmát „kitakarítják”, azaz eltüntetik belőlük a felesleges karaktereket. Ilyen például a cssminifier.com és a javascript-minifier.com. Használatuk nagyon egyszerű. A bal oldali szövegdobozba be kell illeszteni a tömöríteni kívánt állomány tartalmát, majd megnyomni a „Minify” gombot. Ezt követően a jobb oldali szövegdobozba kerül a tömörített tartalom, amit vissza kell másolni a szerverre. Az így keletkezett fájlok egyetlen hátránya, hogy nehezen karbantarthatóak és olvashatóak, hiszen egyetlen sorba tömörödik a fájlok tartalma. Nagy előnyük viszont, hogy a méretük jóval kisebb lesz, tehát segítik a weboldal gyors betöltődését.
Képek optimalizálása
A képek nagyon fontosak a weboldalakon, hiszen sok esetben használjuk őket. Éppen ezért figyelni kell arra, hogy minden felbontáson megfelelő méretben és minőségben jelenjenek meg. A képek optimalizálásához jól használható a tinypng.com weboldal. Itt egyszerre 20 képet lehet feltölteni és optimalizálni a méretüket, majd a tömörített képeket le kell tölteni és vissza kell másolni a szerverre. Sok esetben több tíz megabájt nyerhető, ha a weboldal képeit ezzel a módszerrel tömörítjük. A méret azonban nem minden, a felbontásra is figyelni kell. Ha például egy 1024px*768px felbontású képet egy 400px*300px képként jelenítünk meg, akkor az a Google szerint nincs optimalizálva. Az elvárt megoldás az lenne, hogy ha egy 400px*300px felbontású képet szeretnénk megjeleníteni a weboldalon, akkor a kép eredeti felbontásának is ennyinek kell lennie. Tehát a nagyobb kép hiába jelenik meg kisebb felbontásban, a mérete nem változik, tehát ugyanannyi adatforgalmat generál. Amíg csak egy-két kép van a weboldalon, ez nem olyan nagy kihívás, de sok kép esetén már szakértelmet kíván a megfelelő kivitelezés.
Tömörítés engedélyezése
Egy weboldal akkor töltődik be a leggyorsabban, ha elősegítjük, hogy kevesebb adatot töltsön le. Erre egy nagyon jó megoldás a GZIP alkalmazás. A GZIP egy tömörítő alkalmazás, amit eredetileg Unix rendszerekre írtak, de ma már mindenhol elterjedt. A GZIP tömörítés használata nagyon felgyorsíthatja egy weboldal letöltődési sebességét. Elsőnek a böngésző küldi el az információt a szerver felé, hogy képes fogadni a GZIP tömörítést. Majd a böngésző jelzésére a szerver tömöríti a tartalmakat, és a tömörített tartalmat küldi vissza a böngésző számára. Ma már majdnem minden böngésző és szerver támogatja ezt a megoldást, csak be kell kapcsolni. Ehhez a weboldal .htaccess fájljában kell elhelyezni egy, a tömörítést aktiváló GZIP kódrészletet.
Látható tartalmak rangsorolása
A weboldalon elhelyezett tartalmak nem egyforma rangsorolást kapnak a Google-től. Minnél fontosabb egy tartalom vagy kulcsszó, annál előrébb kell helyezni. Érdemes alaposan átgondolni a weboldal felépítését és szövegezését, sok esetben javasolt szakemberekkel való egyeztetés, hiszen tapasztalat nélkül ezt nagyon nehéz megfelelően kivitelezni. Néhány fontosabb rangsorolási tanács a kulcsszavak használatára:
- Az oldal META TITLE elemében
- Címsorokban (H1, H2, H3 tagekben)
- Domain névben
- URL-ben
- Képek ALT és TITLE tagjaiban
- STRONG és BOLD elemekben
- META DESCRIPTION-ben
- META KEYWORDS-ben
A tartalmak optimalizálásához jól használható a Google Page Speed által felkínált lehetőség, ugyanis az elemzés végén letölthetőek az adott oldalon található kép-, JavaScript- és CSS-források tömörített formában. Ez a funkció elsősorban azok számára előnyös, akik nem tudják, hogyan kell optimalizálni az egyes tartalmakat a weboldalukon. A csere előtt érdemes a régi fájlokat elmenteni, ugyanis a képeknél előfordulhat minőségi romlás, és probléma esetén vissza lehessen állítani a korábbi fájlokat.
Összegzés
Mindenképp érdemes foglalkozni a weboldalak sebességének optimalizálásával, hiszen nemcsak a felhasználói élményt javíthatja, hanem a találati listában elfoglalt pozícióra is hatással lehet. A fentiek alapján látható, hogy minimális programozási ismeretre is szükség van a tökéletes eredmény eléréséhez. Aki azonban nem rendelkezik programozási ismeretekkel, az se csüggedjen, mert 85 pont felett már zöld jelzést kap a weboldal, ami már elég ahhoz, hogy pozitív véleményt kapjunk a Google-től.
Csapatunk vállállalja weboldalak elemzését és sebességoptimalizálását Keressen minket bizalommal, ha egyedül nem boldogul ezzel az összetett feladattal!
