Lassú weboldal: hány érdeklődőt veszítesz minden másodperccel? Így mérd a weboldal sebességét ingyen

Tudtad, hogy egy tized másodperc is meglátszik az ajánlatkérések számán? A Deloitte a Google megbízásából 37 európai márka mobiloldalát elemezte, és azoknál az oldalaknál, ahol érdeklődőket gyűjtenek, 21,6 százalékkal többen jutottak el az űrlap elküldéséig, amikor a mobiloldal négy sebességmutatója egyaránt egy tized másodperccel javult. A weboldal sebesség tehát egy cégvezetőnek is fontos szám, mert közvetlenül azon is múlik, hány érdeklődő jut el a „Küldés” gombig.

Az oldal sebessége ugyanakkor alattomos dolog, mert az irodai wifin, a jól megszokott laptopon minden rendben lévőnek tűnhet. A gond jellemzően a telefonon jön elő, mobilnettel, egy parkolóban vagy a buszon, vagyis éppen ott, ahol a látogatók egy része keres. Cikkünkben azt járjuk körbe, hogyan lehet ingyen, tíz perc alatt megmérni a weboldal sebességét, mi lassítja jellemzően az oldalakat, és mit érdemes kérni a fejlesztőtől.

Miért számít a weboldal sebesség egy kisvállalkozásnak?

Maradjunk egy hétköznapi példánál: egy győri autószerviznél. Valaki reggel a Szent István úton áll a lerobbant autójával, beírja a telefonjába, hogy „autószerviz Győr”, és rákoppint az első találatra. Ha az oldal másodpercekig fehér marad, jó eséllyel visszalép, és megnyitja a következő szervizt. Ennek eredménye? Egy elveszett munka, amiről a szerviz tulajdonosa soha nem fog tudomást szerezni.

Ez a türelmetlenség mérhető is. A Google még 2016-ban publikált kutatása szerint a mobilos látogatások 53 százaléka megszakad, ha az oldal betöltése három másodpercnél tovább tart. Azóta a telefonok és a mobilnet is gyorsabb lett, a felhasználók elvárásai viszont együtt nőttek velük, így ma sem érdemes ennél lassabb oldallal számolni.

Van azonban egy másik oldala is a dolognak. A Google a saját dokumentációjában leírja, hogy a rangsorolási rendszerei figyelembe veszik a Core Web Vitals (az oldalélmény alapvető mutatói) eredményeit. Egy gyors oldal önmagában nem visz senkit az első helyre, de tételezzük fel ceteris paribus (egy tényezőt változtatunk), ha két szerviz oldala nagyjából ugyanolyan hasznos, a jobb élményt nyújtó kerülhet előrébb. A lassú weboldal így kétszer veszít: kevesebben találják meg és aki megtalálta, az is hamarabb feladja.

A weboldal sebesség mérése ingyen: PageSpeed Insights

A legegyszerűbb eszköz a Google ingyenes PageSpeed Insights oldala, amihez nem kell regisztráció és fejlesztői tudás sem. A mérés így néz ki:

1. Nyisd meg a pagespeed.web.dev oldalt, és másold be a weboldalad címét.

2. Az eredménynél maradj a Mobil fülön, mert a látogatók többsége jellemzően telefonról érkezik, és ott szokott rosszabb lenni a helyzet.

3. Nézd meg először a felső részt: ez a valódi látogatók elmúlt 28 napos adatait mutatja, Chrome böngészős felhasználóktól.

4. Utána nézd meg az alsó részt, a 0–100 közötti pontszámot és a javaslatokat: ez egy szimulált, laborkörülmények közötti mérés.

5. Ismételd meg a mérést a legfontosabb aloldalakon is: a szolgáltatásoldalon és az ajánlatkérő vagy kapcsolat oldalon.

Kisebb forgalmú oldalaknál előfordul, hogy a felső rész üres, mert a Google-nek nincs elég valós adata. Ilyenkor a laborteszt marad a kiindulópont, amit érdemes kiegészíteni egy saját próbával a telefonon. Ha van Google Search Console fiók az oldalhoz, abban is van egy külön Core Web Vitals jelentés, ami oldalcsoportonként mutatja, hol van gond.

Profi tipp: a pontszámon ne idegeskedj, ha mérésenként pár pontot ugrál, mert a laborteszt minden futásnál kicsit más körülményeket szimulál. Inkább a trendet figyeld, és a valós felhasználói adatokat, ha vannak.

A három mutató, amire érdemes figyelni

A PageSpeed Insights sok számot mutat, egy cégvezetőnek ezek közül háromra érdemes figyelnie. Ezek a Core Web Vitals mutatók, a jó értékeket a Google fejlesztői oldala, a web.dev határozza meg:

A Google azt ajánlja, hogy ezek az értékek a látogatások legalább háromnegyedénél teljesüljenek, mobilon és asztali gépen külön-külön. Ha a PageSpeed Insights felső részén mindhárom zöld, az oldal sebessége rendben van, és a figyelmet érdemes máshova fordítani. Ha valamelyik narancs vagy piros, ott van tennivaló.

Mi lassítja jellemzően a weboldalt?

A lassú oldalak mögött ritkán van egyetlen nagy hiba, sokkal gyakrabban apró dolgok adódnak össze az évek alatt. Olyan ez, mint egy kisteherautó platója: minden egyes doboz könnyű, de ha soha senki nem pakol ki, egyszer csak alig gyorsul az autó. A leggyakoribb okok, amiket látunk:

• Túl nagy képek: a telefonnal készült, több megabájtos fotó változtatás nélkül kerül fel a főoldal nyitóképére, pedig ennek töredéke is elég lenne.

• Túl sok bővítmény: főleg WordPress-oldalaknál gyűlik fel a sok kiegészítő, amelyek egy részét már senki nem használja, mégis mindegyik betölt valamit.

• Külső kódok: chatablak, hirdetési pixelek, beágyazott térkép, Instagram-hírfolyam, sütibanner. Egyenként hasznosak lehetnek, együtt viszont komolyan lassítják az oldalt.

• Gyenge vagy túlterhelt tárhely: ha a szerver lassan válaszol, a többi optimalizálás sem tud csodát tenni.

• Hiányzó gyorsítótárazás: az oldal minden látogatónál újra és újra összerakja ugyanazt, ahelyett hogy egy kész példányt adna ki.

• Elavult szoftver: a régi rendszerverziók és sablonok jellemzően lassabbak és kevésbé biztonságosak is, ezért a rendszeres weboldal karbantartás a sebességnek is jót tesz.

• Látványelemek: automatikusan induló háttérvideó, több képből álló forgó slider a nyitóoldalon, ami mobilon a legtöbbet lassít.

Ha maradunk az autószerviz példájánál, ott jellemzően a nyitókép és a beágyazott térkép a két legnagyobb tétel, amelyek egy kis átalakítással jócskán gyorsíthatók anélkül, hogy az oldal kinézete megváltozna.

Mit kérj a fejlesztődtől a gyorsításhoz?

A javítás a fejlesztő dolga, a cégvezetőnek viszont tudnia kell, mit kérjen, és hogyan ellenőrizze az eredményt. Az alábbi lista akár szó szerint továbbítható e-mailben:

1. Mérés előtte és utána: kérj PageSpeed Insights mérést mobilra a főoldalról és a két-három legfontosabb aloldalról, a munka előtt és után is, írásban.

2. Képek optimalizálása: a képeket méretre kell vágni, tömöríteni és modern formátumba (például WebP) menteni, a lejjebb lévő képek pedig csak akkor töltsenek be, amikor a látogató odagörget.

3. Bővítmények és külső kódok átnézése: egy lista arról, mi fut az oldalon, mi az, ami tényleg kell, és mi az, ami törölhető vagy később is betölthet.

4. Gyorsítótár és tárhely: legyen beállítva gyorsítótárazás, és derüljön ki, hogy a tárhely bírja-e a forgalmat, vagy érdemes váltani.

5. Elugráló tartalom megszüntetése: a képeknek, bannereknek legyen előre fenntartott helyük, hogy betöltéskor ne tolják el a szöveget és a gombokat.

6. Frissítések: a rendszer, a sablon és a szerver szoftververziója legyen naprakész.

Profi tipp: kérd, hogy a fejlesztő rakja sorrendbe a teendőket aszerint, melyik mennyit javít és mennyi munka. Így először azok a lépések készülnek el, amelyek kevés ráfordítással a legtöbbet hozzák.

A 100 pontos PageSpeed eredményt nem érdemes célként kitűzni. A Google maga is jelzi, hogy a tökéletes pontszám hajszolása pusztán a keresőoptimalizálás kedvéért nem feltétlenül éri meg a ráfordítást, a cél az, hogy a három mutató zöldben legyen, és az oldal a látogatónak gyorsnak érződjön.

Mit látunk a gyakorlatban?

A leggyakoribb hiba, hogy a sebességet az irodában, asztali gépen nézik meg, ahol minden villámgyors, miközben a látogatók többsége telefonról érkezik. A második, hogy a gyorsítás egyszeri projekt marad: az oldalt egyszer rendbe teszik, majd fél év alatt újabb bővítmények, pixelek és nagy képek kerülnek fel rá, és a sebesség fokozatosan visszaesik. (Igen, a saját oldalunkat is rendszeresen lemérjük, és nem mindig örülünk annak, amit látunk 🙂)

Mi ezért mindig a mobilos, valós felhasználói adatokból indulunk ki, és először azt a két-három oldalt nézzük meg, ahonnan a megkeresések érkeznek. A sebesség szorosan összefügg azzal is, mennyire jól használható az oldal telefonon, erről a reszponzív webdesignról szóló cikkünkben írtunk részletesen. Új oldalnál pedig már a tervezésnél figyelünk a képek méretére és a külső kódok számára, mert ezt utólag mindig drágább kijavítani.

Hogyan segít a Midomedia a gyorsabb weboldalban?

Ha a mérés után kiderül, hogy van tennivaló, két út áll előtted. Egy meglévő oldalnál a karbantartási szolgáltatásunk keretében átnézzük, mi lassítja, rendbe tesszük, és utána is figyeljük, hogy ne lassuljon vissza. Ha az oldal annyira elavult, hogy a foltozgatás többe kerülne, mint egy új, akkor a weboldalkészítés során az alapoktól gyors oldalt építünk.

Lemérted már, mennyi idő alatt jelenik meg a weboldalad egy telefonon, mobilneten? Ha az eredmény narancs vagy piros, vagy nem tudod eldönteni, mit kezdj vele, küldd el nekünk a linket, és megmondjuk, hol érdemes kezdeni.