Elhagytál már weboldalt, mert túl lassan töltődött be? A legtöbb ember igen. A látogatóid ugyanezt teszik. Minden másodperc, amíg az oldalad betöltődik, egy másodperc közelebb visz ahhoz, hogy elmenjenek. A sebesség közvetlenül megöli a forgalmat és a helyezést. A sebesség javítása az egyik legnagyobb megtérülésű fejlesztés, amit tehetsz.
Miért számít az oldal sebessége?
A látogatók utálják a lassú oldalakat. Minden másodpercnyi késés növeli a visszafordulási arányt. Három másodpercnyi késés jelentős látogatóvesztést okoz. A látogatók szó szerint elmennek, mielőtt az oldalad betöltődne.
A keresőmotorok azért törődnek a sebességgel, mert a látogatók is törődnek vele. A gyors oldalaknak jobbak az elköteleződési mutatóik. A látogatók tovább maradnak. Többet kattintanak. A keresőmotorok ezt látják, és a rangsorolásban jutalmazzák a gyors oldalakat.
A sebesség rangsorolási tényező. A Google megerősítette, hogy az oldal sebessége hat a helyezésre. A gyorsabban betöltődő oldalak előrébb kerülnek a lassúaknál (egyébként azonos feltételek mellett). A hatás ágazatonként eltér, de következetesen pozitív.
Az oldal sebességének mérése
Használd a Google PageSpeed Insightst. Add meg az URL-ed, és a Google megmutatja a sebességpontszámodat és a konkrét javaslatokat. Laboradatokat (szintetikus tesztelés) és terepi adatokat (valódi felhasználói adatok) is ad.
Használd a Google Search Console-t. A Core Web Vitals jelentés megmutatja, milyen gyorsan töltődnek be az oldalaid a valóságban. Ezek tényleges felhasználói adatok, nem szintetikus tesztek.
Használj haladó sebességmérő eszközt. Részletes vízesésdiagramokon mutatja meg, mi minden töltődik be az oldaladon. Megtalálja a szűk keresztmetszeteket és a lassú erőforrásokat.
Használd a Chrome DevTools Lighthouse-t. Ez a nyílt forráskódú eszköz a böngésződben fut, és megvalósítható javaslatokat ad a fejlesztéshez.
Gyakori sebességproblémák
A nagy, nem optimalizált képek a legnagyobb bűnösök. A képek gyakran az oldal méretének 50 százalékát teszik ki. Tömörítsd agresszíven a képeket. Használj modern formátumokat (WebP). Szolgálj ki az eszköz méretéhez igazodó, reszponzív képeket.
A megjelenítést blokkoló CSS és JavaScript késlelteti az oldal megjelenését. A nem kritikus CSS-t és JavaScriptet töltsd be az oldal megjelenítése után. Használd az async és defer attribútumokat a script címkéken.
Nem optimalizált szerver-válaszidő. A szervered túl lassan válaszol. Ez tárhelyprobléma vagy kódprobléma. Használj gyors tárhelyszolgáltatót. Optimalizáld az adatbázis-lekérdezéseket. Használj gyorsítótárat.
A harmadik féltől származó szkriptek (hirdetések, analitika, chatbotok) lassítják az oldalakat. Minden külső szkript késlelteti a megjelenítést. Csak annyit használj, amennyi szükséges. Aszinkron töltsd be őket, hogy ne blokkolják az oldalt.
Hiányzó gyorsítótár. Minden látogató mindent elölről tölt le. Állítsd be a böngésző gyorsítótárazását, hogy a visszatérő látogatók gyorsabban töltsenek be. Használj CDN-t a statikus fájlok földrajzi gyorsítótárazásához.
Optimalizálási technikák
Tömörítsd a képeket. Használj képtömörítő eszközöket. Távolítsd el a metaadatokat. Alakítsd hatékony formátumra (JPEG fotókhoz, PNG grafikákhoz, WebP a modern böngészőknek).
Késleltesd a képek betöltését. A képernyő alatti képek csak akkor töltődnek be, amikor a látogató odagörget. Használd a natív késleltetett betöltést (loading="lazy") vagy egy JavaScript-könyvtárat.
Minifikáld a CSS-t és a JavaScriptet. Távolítsd el a felesleges karaktereket. Vond össze a fájlokat. Ez csökkenti a fájlméretet.
Használj CDN-t (Content Delivery Network). A CDN-ek a tartalmadat a világ különböző szervereire másolják. A látogatók a közelükben lévő szerverről töltenek le, nem az eredeti szerverről. Ez drámaian csökkenti a késleltetést.
Kapcsold be a gzip tömörítést a szervereden. A gzip a böngészőnek küldés előtt tömöríti a fájlokat. A legtöbb szerveren ez egyetlen beállítással megoldható.
Használj böngészős gyorsítótárat. Állítsd be a gyorsítótár fejléceket, hogy a böngészők helyben tárolják a statikus fájlokat. A visszatérő látogatóknak nem kell mindent újra letölteniük.
Távolítsd el a nem használt CSS-t és JavaScriptet. Az oldalad minden nem használt kódsora lassít. Vizsgáld át a kódot. Dobd ki a felesleges súlyt.
Sebességoptimalizálás fontossági sorrendben
1. prioritás: optimalizáld a képeket. Ennek a legnagyobb a megtérülése. A nagy, nem optimalizált képek a legtöbb oldalt lassítják. A tömörítés és a késleltetett betöltés gyakran megduplázza az oldal sebességét.
2. prioritás: állíts be CDN-t. Egyszerű, és óriási a hatása. A statikus fájlok a látogatóid közelében lévő szerverekről érkeznek, nem az eredeti szerverről.
3. prioritás: kapcsold be a gyorsítótárazást. A böngészős gyorsítótár ingyenes. Állítsd be. A visszatérő látogatók sokkal gyorsabb betöltést kapnak.
4. prioritás: minimalizáld a megjelenítést blokkoló erőforrásokat. Halaszd későbbre a JavaScriptet. Ágyazd be a kritikus CSS-t. A nem kritikus CSS-t aszinkron töltsd be.
5. prioritás: csökkentsd a szerver válaszidejét. Ehhez kódoptimalizálás vagy gyorsabb tárhely kell. Gyakran ezt a legnehezebb javítani, de a gyors oldalakhoz elengedhetetlen.
Gyakori kérdések
Milyen gyorsan töltődjön be az oldalam?
A gyorsabb mindig jobb, de ezekre a referenciaértékekre törekedj: a First Contentful Paint legyen 1,8 másodperc alatt. A Largest Contentful Paint 2,5 másodperc alatt. A teljes oldalbetöltés 3 másodperc alatt. Minél gyorsabb, annál jobb. Minden másodpercnyi javulás növeli a konverziókat és javítja a helyezést. A WEMASY weboldalépítőjével ezt közvetlenül a weboldaladon beállíthatod.
Külön a mobil sebességre is optimalizálnom kell?
Igen. A mobilhálózatok lassabbak és változékonyabbak, mint az asztali hálózatok. A mobilos látogatóknak kevesebb a türelmük. Optimalizálj agresszíven mobilra. A mobil sebesség még fontosabb, mint az asztali. A Google elsősorban a mobil verziót indexeli, ezért a mobil sebesség közvetlenül hat a helyezésedre.
Javítja a gyorsabb oldal a helyezésemet?
Valószínűleg igen. A sebesség rangsorolási tényező. A gyorsabb oldalak előrébb kerülnek a lassúaknál. A tartalom minősége és a backlinkek azonban még mindig többet számítanak. Egy lassú oldal, amelynek nagyszerű a tartalma, még mindig rangsorolhat. De egy gyors oldal ugyanolyan jó tartalommal jobban fog.
Mi a fontosabb: a képek vagy a JavaScript?
A képek. A nagy, nem optimalizált képek a legtöbb oldalon a legnagyobb sebességgyilkosok. Először a képeket optimalizáld. Utána a JavaScriptet. Aztán a többi szűk keresztmetszetet. A képoptimalizálás általában a legnagyobb sebességnövekedést adja a legkisebb ráfordítással.
Használjak CDN-t?
Igen, ha nemzetközi forgalmat szolgálsz ki, vagy vannak statikus fájljaid (képek, CSS, JavaScript). A CDN-eket egyszerű beállítani, és óriási a hatásuk. A tartalmadat a világ különböző szervereire másolják. A látogatók a közelükben lévő szerverről töltenek le, ami csökkenti a késleltetést. Szinte minden oldalnál megéri.
Milyen gyakran teszteljem az oldalam sebességét?
Legalább havonta. A gyakoribb jobb. Az optimalizálás után azonnal teszteld. A sebesség romlik, ha új funkciókat vagy külső szkripteket adsz hozzá. A rendszeres figyelés elkapja a problémákat, mielőtt túl sok látogatónak ártanának.