A domain név nem csak cím, hanem az első benyomás. Ha most építesz fogászati praxist, hotelt, éttermet vagy épp építőipari céget, az egyik legfontosabb döntésed az lesz, milyen nevet adsz a weboldaladnak. Nemcsak a márkád része lesz – keresőoptimalizálási...
Hogyan javítsd weboldalaid sebességét (és ezzel rangsorolásodat a Google szemében)
A weboldal sebessége egy fontos rangsorolási szempont a Google szemében. Megmutatjuk, mit mond honlapkészítődnek, mit kell tennie, hogy honlapod megfelelően gyors legyen!
Mielőtt fejest ugranánk az oldalsebesség javításának rejtelmeibe, első körben jobb, ha tisztázzuk, hogy mi is áll pontosan a fogalom mögött, mert meglepően sokan értik félre.
Az oldalsebességet gyakran keverik a webhelysebességgel, de fontos észben tartani, hogy egy webhely több weboldalból áll (ezt a két kifejezést szintén gyakran keverik), és a webhelysebességet több oldal sebessége alapján számíthatjuk ki.
Az oldalsebesség két dolgot jelenthet:
- Oldal betöltési ideje: Mennyi időre van szükség, hogy az adott oldal tartalma teljes egészében megjelenjen?
- Első bájtig eltelt idő: Mennyi időbe telik, hogy a böngésző szoftver megkapja az első bájtnyi információt a webszervertől?
Egy-egy oldalad sebességét a google PageSpeed Insights eszközével ellenőrizheted. Ez az eszköz az úgynevezett CrUX adatokat (az olyan felhasználóktól gyűjtött adatokat, akik a Chrome böngészőt használják) használja fel, hogy felmérje a megadott oldal sebességét, ami alapján két fontos mutatót jelenít meg:
- Első vizuális tartalomválasz (First Contentful Paint – FCP)
- A betöltött DOM tartalmak (DOM Content Loaded – DCL)
Miért olyan fontos az oldalsebesség?
A seo közösségben alapvető ténynek számít, hogy a google rangsorolási szempontnak használja a webhely sebességét, így ebből következik, hogy az egyenkénti weboldalak sebessége is fontos (hiszen ezek határozzák meg a webhely általános sebességét). A felmérések szerint a Google az első betöltött bájtig eltelt időt veszi figyelembe az oldalak sebességének mérésekor.
Egy lassú oldalsebességnek számos hátránya van. Az egyik jelentős negatívum, hogy az oldalakat átvizsgáló robotoknak (amiket a keresőmotorok használnak a webhelyek feltérképezésére) csak korlátozott mennyiségű oldalt képesek ellenőrizni egy-egy vizsgálat során, ami rossz hatással lehet oldalaid (és egész webhelyed) indexelésére.
Az oldalsebesség továbbá fontos a felhasználói élmény szempontjából is. Egy lassan betöltő oldalról sokan fognak visszafordulni, és kevesebb látogatónak lesz türelme kivárni, míg egy-egy oldalad megjelenik böngészőjében. Ezzel rengeteg látogatót forgalmat veszíthetsz el, akik egyébként lehet, hogy ügyfelekké konvertáltak volna.
Hogyan javíthatod weboldalaid sebességét?
Fontos megjegyezni, hogy miután ellenőrizteted oldaladat a Google PageSpeed Insights-szal, az eszköz számos javasolt lépést ajánl, amelyekkel felgyorsíthatnád az adott oldalt – érdemes odafigyelni ezekre!
Íme néhány módszer weboldalaid sebességének fellendítésére.
Használj tömörítést
A nagyméretű CSS, html, és JS fájlok lassíthatják oldalaidat, ezért érdemes tömöríteni őket. A Gzip (https://www.gnu.org/software/gzip/) segítségével minden olyan script és stílusfájlodat tömörítheted, amelyek meghaladják a 150 bájtos méretet.
Fontos, hogy a képeket más, egy erre alkalmas szoftver segítségével tömörítsd, és ne néhány bájtosra – próbáld beállítani azt a legkisebb fájlméretet, ami mellett még tűrhető minőségű marad a kép.
Töröld a felesleges kódrészleteket
Érdemes rendszeresen ellenőrizni – vagy legalább is minden változtatás után – hogy webhelyed forráskódja optimalizált-e. Az optimalizálás itt a felesleges szóközök, vesszők, és egyéb felesleges karakterek, illetve a megjegyzések, és felesleges kódrészletek törlését jelenti. Meglepően sokat gyorsíthatsz webhelyeden, ha odafigyelsz ezekre.
A Google útmutatójában a következő eszközöket javasolja erre a célra:
- html: HTMLMinifier (https://github.com/kangax/html-minifier)
- css: CSSNano (https://github.com/cssnano/cssnano), vagy ccso (https://github.com/css/csso)
- javascript: UglifyJS (https://github.com/mishoo/UglifyJS2), vagy Closure Compiler (https://developers.google.com/closure/compiler/)
Kerüld a többlépéses átirányításokat
Valahányszor egy oldal átirányítja a felhasználót egy másik címre, a felhasználó egy lassabb oldalbetöltést tapasztal majd. Minél több lépésből áll egy átirányítás, annál több időbe telik, míg a végleges tartalom megjelenik a böngészőben. lehetőség szerint csak egyetlen átirányítást használj, valahányszor szükséged van erre. Ha kell, térj vissza korábbi oldalaidhoz és csökkentsd az ugrások számát.
Töröld a megjelenítést gátló JavaScripteket
A böngészőknek egy úgynevezett DOM fát kell felépíteniük a HTML átvizsgálásakor, mielőtt megjeleníthetik az oldal tartalmát. Ha a böngésző egy JavaScriptet talál e folyamat során, akkor meg kell állnia, amíg lefuttatja azt, és csak utána folytatja majd a DOM fa elkészítését.
Igyekezz tehát minél kevesebb olyan JavaScripteket használni, amelyek lelassíthatják ezt a folyamatot.
Használd ki a böngészők gyorsítótárazását
A böngészők rengeteg információt (stíluslapok, képek, JS fájlok, stb.) gyorsítótáraznak, hogy később, amikor a felhasználó visszatér webhelyedre, akkor ne kelljen mindent újratöltenie, és a korábban már megtekintett oldalak sokkal gyorsabban megjelenjenek.
Érdemes ellenőrizni, hogy mikorra van beállítva gyorsítótárad lejárati dátuma, majd állítsd be az „expires” (lejár) headert arra az időtartamra, ameddig szeretnéd, hogy gyorsítótárad aktuális maradjon. Hacsak webhelyed nem változik gyakran, egy év általában elegendő.
Javítsd a szerver válaszidejét
Szervered válaszidejét többek között az is befolyásolja, hogy mekkora mennyiségű forgalom érkezik webhelyedre, hogy mennyi erőforrást használ egy-egy lap, hogy milyen szoftverrel fut a szervered, illetve a webtárhely szolgáltatójától is.
Ha gyorsabb válaszidőt szeretnél kihozni szerveredből, akkor próbáld azonosítani azokat a lehetséges pontokat, amelyek lassíthatják a folyamatot – ilyenek például a lassú adatbázis-lekérdezések, vagy a memóriahiány. Ezeket a problémákat kell megoldanod. Az ideális szerver válaszidő 200ms alatt van.
Használj tartalomelosztó hálózatot
A tartalommegosztó hálózatok (content distribution network, röviden CDN) összekapcsolt szerverek hálózatai, amelyek szétosztják egymás között tartalmaid kiszolgálását a felhasználóknak. Lényegében arról van szó, hogy webhelyedről több másolat készül, ami a világ több pontján elhelyezett adatközpontban kerül eltárolásra, ahonnan a helyi felhasználók sokkal gyorsabban lekérhetik őket böngészés közben.
Optimalizáld a képeket
Ahogy már fent említettük, érdemes megkeresni a legjobb minőség/méret arányt képeid feltöltésekor. A logók és grafikák esetén, amelyek nem használnak 16 színnél többet a PNG formátumot ajánlott használni (ez a formátum támogatja az átlátszó pixeleket is, így sok logóhoz mindenképpen ezt kell majd használni). A fotók, és összetettebb képek esetén a JPEG formátummal érhetsz el jó minőség/méret arányt – a JPEG formátum azonban nem támogatja az átlátszó pixeleket.
Készíts egy sablont gyakran használt képeidnek (pl. gombok, ikonok) CSS sprite-ok segítségével. A CSS sprite-ok egy nagy képpé kombinálják képeidet, így egyszerre töltődnek majd be (ezzel kevesebb HTTP kérést kell végrehajtani), és csak azokat a részeiket kell megjelenítened, amelyeket szeretnéd.
