Keresőoptimalizálás és a weboldal gyorsítás

Rengeteg weboldal készül manapság, emiatt a Google számára egyre nagyobb kihívást jelent, hogy rangsorolja a weboldalakat.

A millforbusiness.com kalkulációja alapján átlagosan 380 weboldal készül percenként, világszerte.

Ez elképesztően magas szám, és a trendek növekedést mutatnak.

Magyarországon, a domain.hu nyilvános adatai alapján hetente kb. 2.400-3.000 új .hu domain igénylés érkezik

(Itt azt is számításba kell vennünk, hogy az újonnan regisztrált domainek egy részével nem indítanak azonnal honlapot, azonban, a pontos adatok nélkül is kijelenthető, hogy rengeteg új magyar weboldal készül.)

Ahhoz, hogy a Google megfelelően és nagyrészt automatizáltan tudja rangsorolni az oldalakat, különféle objektív minőségi mutatókat vesz figyelembe. Az egyik ilyen fontos szempont az, hogy egy weboldal mennyire gyors.

Ha két hasonlóan jónak ígérkező tartalom közül kell választania a Google-nek, akkor az oldal hitelessége mellett a honlap technikai állapota lesz a mérvadó. A technikai paraméterek között nagyobb súlyozással számít a gyorsaság.

A keresési találatok között tehát jobb eséllyel fogsz előrébb kerülni, ha az oldaladat optimalizálod gyorsaság szempontjából.

A lassú honlapokra a mobilos látogatók nem kíváncsiak

A másik tényező, ami miatt érdemes a korábbiaknál is nagyobb hangsúlyt fektetned a gyors betöltődésre, az a mobilos látogatók száma. Évek óta növekedik az okostelefonról netezők aránya.

Jelenleg területtől, célközönségtől függően 45-70% között van az okostelefonos felhasználók aránya. (Javaslom, hogy a Google Analytics fiókodban nézd meg a saját oldaladra vonatkozó adatokat!)

A telefonos felhasználók hálásak lesznek, ha a mobil adatforgalmuk nem csökken jelentősen az oldaladtól. A gyors betöltődés révén pedig eleve lesz egy pozitív érzetünk.

PPC-kampányok és a gyorsaság

Nemcsak a keresőből szerezhetsz látogatókat, hanem fizetett hirdetési kampányokkal is. Ebben az esetben szintén érdemes gyorsítani az oldaladat, egy lassabb oldalon ugyanis megnövekedhet a visszafordulási arány.

Ha egy lassú landing page-re küldesz látogatókat, akkor egy részüket már az oldal betöltődése előtt elveszíted, mert nem mindenki várja meg a betöltődést.

A látogatóid harmadát elveszíted, ha 7 másodperc alatt töltődik be az oldalad. Törekedj arra, hogy az oldalad maximum 2-3 másodperc alatt betöltsön.

Ha PPC-kampányokat futtatsz, akkor egy lassú oldallal nemcsak egy érdeklődőtől esel el, de még pénzt is költesz rá (feleslegesen).

Weboldal gyorsaság ellenőrzése

Weboldalad aktuális állapotát online eszközökkel tudod pontosan felmérni.

A teszteket érdemes bizonyos időközönként elvégezned, egyrészt mert folyamatosan változnak a követelmények, másrészt technikai hibákat is kiszúrhatsz általa.

Google PageSpeed Insights

A legjobb eszköz a honlap gyorsaság ellenőrézésre a Google PageSpeed.

Külön-külön visszajelzést ad a mobilos és az asztali nézetre vonatkozóan is. Az értékek egy 0 és 100 közötti skálán mozognak, ahol a 0-49 közötti érték minősül gyengének (piros jelzéssel jelenik meg), az 50-89 közötti érték átlagosnak (narancs szín), és a legjobban optimalizált oldalak kapnak 90-100 közötti értékelést (zöld).

Az elemzés végén pedig javaslatokat kapsz a javításokhoz, így azzal is képbe kerülhetsz, hogy mely területeken kell előrelépned a gyorsaság eléréshez.

Azon ne lepődj meg, ha a mobilos nézeted rosszabbul teljesít: az oldal mobil verziójával szemben szigorúbb elvárásoknak kell megfelelned.

GTmetrix

A PageSpeed mellett érdemes lehet a GTmetrixet is használnod. Az egyes szempontokat külön pontozza, és szintén javaslatot tesz a változtatásokra.

Néhány további hasznos információt is közöl az oldal állapotáról, pl. hogy mekkora a teljes oldal mérete, és mennyi lekérés fut a háttérben.

A teljes betöltési időt viszont hagyd figyelmen kívül, ugyanis többnyire kanadai szerverről teszteli a honlap gyorsaságát, így ez a földrajzi különbség miatt megtévesztő lehet.

Weboldal gyorsítás – tippek

Összeszedtem néhány gyakorlati javaslatot, amelyekkel a weboldal betöltés gyorsítása lehetséges:

Tárhely

Válassz gyors tárhelyszolgáltatót, amely SSD-alapú szerverekről szolgálja ki az oldaladat.
Fontos az is, hogy a weboldalad földrajzilag hol helyezkedik el: ha vállalkozásod magyar ügyfeleket szolgál ki, akkor erősen javasolt, hogy a honlapod magyarországi szerveren kerüljön elhelyezésre, így gyorsabban fog betöltődni az oldalad.
Ha a gyorsasági teszten a szerver válaszideje visszatérően magas, akkor érdemes megfontolni a szolgáltatóváltást, vagy az egyedi szerverre történő költözést.

A gyorsaságon nem érdemes spórolni, mert hosszabb távon csak megnehezíti a weboldal optimalizálását, és konkrét megkeresésektől eshetsz el. A táhely kiválasztáskor tehát nem a legolcsóbb szolgáltatókat érdemes választanod.

Betűtípusok előtöltése

Az egyedi betűtípusok feldobják egy weboldal megjelenését, javítják a felhasználói élményt, azonban nem árt figyelni arra, hogy hogyan használjuk őket.

A honlap betöltését lassítják, megakasztják az oldalon használt különféle webfontok.

Azért, hogy ezt elkerüljük, érdemes a betűkészleteket előtölteni, így az oldal zavartalanul tölt be. Ha van rá lehetőség, a betűtípusokat ne külső forrásból töltsük be, mert ez is értékes milliszekundumokat jelent.

Ezen kívül, érdemes az oldalon használt betű variációk számát is korlátozni. Minél több változatot használsz, annál több lekérés fut az oldaladban, rontva ezzel a betöltés sebességén.

Maximum 2-3 betűtípust javasolt használnod, hogy az oldalad gyors maradjon. (Egyébként az arculattervező szakemberek sem javasolják, hogy túl sok betűt használj vizuális megjelenéseidben.)

Érdemes arról is gondoskodni, hogy amíg betölt a honlapon használt egyedi betűkészlet, a szövegek addig is olvashatóak legyenek.

Optimalizáld a képeket

Feltöltés előtt optimalizáld a képeidet, hogy azok minél kevesebb helyet foglaljanak, és gyorsan megjelenhessenek.

Erre különféle online eszközöket használhatsz:

Kraken: https://kraken.io/web-interface

TinyPNG: https://tinypng.com/

A tapasztalat azt mutatja, hogy enyhén veszteséges képeket érdemes használnod. (Kivéve, ha nagyon fontos, hogy veszteségmentesek maradjanak a fotóid: pl. fotós vagy.) A tömörítéssel járó minimális képromlást szabad szemmel nem igazán lehet észre venni, ugyanakkor egy tömörítéssel akár 20-40%-kal is tudjuk csökkenteni a képek méretét.

Még jobb, ha webp formátumú képeket használsz, amelyek átlagosan 39%-kal kisebb méretet eredményeznek a jpg, png fájlokhoz képest, tömörítés után.

A webp-t a Google fejlesztette ki, egy viszonylag új fálformátumról van szó. A régebbi böngészők nem támogatják, így csak az újabb verziók használata esetében érdemes a webp formátumot alkalmazni.

Megfelelő szélességű, magasságú képeket használj

Az előző pontban a képek  fizikális méretének csökkentéséről volt szó.

Azonban, gyakori hiba, hogy az oldalba (pl. egy blogbejegyzésbe) sokkal szélesebb/magasabb képet ágyaznak be, mint amekkorára szükség van, és ez a reszponzív nézetből adódóan nem is biztos, hogy azonnal látszódik. (Reszponzív nézetnél a kép igazodik az adott szekció teljes szélességéhez.)

Mindig nézzük meg pontosan, hogy egy adott szekcióba mekkora képre van szükségünk, és annak megfelelően méretezzük át a fotót.

Használd a lazy load-ot

A lazy load (magyarul “lusta betöltés”) azt jelenti, hogy a weboldal bizonyos elemeit (pl. képeket), csak akkor jelenítünk meg, amikor a látogató éppen az adott részhez görget.

Így a weboldal megnyitásakor nem terheljük a látogatót azzal, hogy minden egyes fotót letölt előre.

Csak akkor ágyazd be a videót, ha elindítod

Javasolt a YouTube-videókat úgy beszúrnod, hogy valójában csak a play gombra kattintás pillanatában töltődjön be a videó.

A fenti trükk nélkül a beágyazott YouTube-videók erőteljesen rontják az oldal betöltési teljesítményét.

Sallangmentes kód

A HTML-kódot tömörítsd, hogy kisebb legyen a honlap kódmennyisége.

Felesleges elemeket, formázásokat ne tartalmazzon a honlapod.

Ilyen szempontból sokkal jobb, ha egyedileg készített WordPress-oldalad van, mert pontosan lehet szabályozni, hogy egy oldalban milyen kód fusson le. (Az egyedi oldalak hátránya, hogy mivel több idő elkészíteni, az ára is magasabb.)

Ha mindenképpen sablonra épülő oldal mellett döntesz, akkor előtte ellenőrizd, hogy az hogyan teljesít gyorsaság szempontjából.

Sajnos, nagyon sok sablonra épülő oldal tartalmaz teljesen felesleges formázásokat, amelyek akkor is az oldalban maradnak és a háttérben lefutnak, ha nem is használjuk az adott funkciót. Az ilyen oldalakat nem lehet tökéletesen tömöríteni, gyorsítani.

Használj cachelést, lejárati időt, gzip tömörítést

A weboldalakat érdemes cache-elni, így a különféle adatbázis lekérésekre nem kell várnia a látogatóknak.

A honlap állandó elemeinek érdemes lejárati időt adni, ezáltal a visszatérő látogatók számára gyorsabb lesz az oldal betöltése.

Javasolt az oldalakon gzip tömörítést alkalmazni, amely a háttérben tömörített formában tölti le az oldalt a látogató böngészőjére.

“Above the fold” optimalizálása

Amikor megnyitsz egy oldalt, az azonnal látható részt “above the fold”-nek, vagy magyarul “hajtás feletti résznek” hívják.

Ez az a felület, amivel azonnal találkozik a látogatód, ezért kiemelten fontos, hogy ez a szekció gyorsan töltődjön be.

Érdemes a hajtás feletti részért felelős formázásokat még a legelején betöltened, hogy ez a szekció azonnal jól jelenjen meg. (Ezt a technikát critical CSS-nek hívják.)

Így mire a felső részt átolvassa a látogatód, addigra az oldal többi része már össze is állt.

Fűzd össze a fájlokat

A weboldalad formázását, működését elősegítő CSS és JS fájlok darabszámát csökkentheted azáltal, hogy összefűzöd őket.

Az így kapott fájlokat érdemes “eltolnod” a kód végére, így csak az oldal alsó részében fognak betöltődni a formázások. (Kivéve az előző pontban leírt critical CSS-t.)

WordPress weboldal gyorsítása

WordPress oldalak esetében az utóbbi években nehézséget okozott, hogy jellemzően három-négy bővítménytípust kellett egyszerre használni az oldal felgyorsításához:

  • egy cache plugint
  • egy képtömörítő bővítményt
  • egy kódokat összefűző modult
  • és egy, a lejárati időket kezelő bővítményt.

Ezek párhuzamos működés közben gyakran összeakadtak egymással, így sokszor kompromisszumot kellett kötni a gyorsaság kapcsán, hogy a honlap mely részei legyenek gyorsítva.

A fenti visszásságokat oldotta fel a magyar fejlesztésű Swift Performance bővítmény.

Már az ingyenes változata is rengeteget tud, de ha igazán fontos számodra a gyorsaság, akkor érdemes beruházni a fizetős változatra, amely számos extra gyorsítási lehetőséget tartalmaz.