Mitől lesz gyors egy weboldal?

A sebességet sokan technikai kérdésnek tartják. Pedig üzleti: a látogató egy része elmegy, mielőtt betöltene az oldal, és soha nem tudja meg, mit kínált volna neki. Ez a veszteség nem látszik semmilyen kimutatásban.

Mi lassít a gyakorlatban?

Képek

A leggyakoribb ok. Egy fényképezőgépből vagy telefonból kijövő kép több megabájt. A böngészőnek ezt le kell töltenie, akár mobilneten is. Megoldás: méretre vágás, korszerű képformátum (WebP, AVIF), és az, hogy a látótéren kívüli képek csak akkor töltsenek be, amikor odaér a látogató.

Betűtípusok

Egy egyedi betűkészlet minden vastagsága külön fájl. Ha az oldal hat vastagságot tölt be, abból jó eséllyel kettőt használ. Csak a modern woff2 formátum kell, és csak azokat érdemes előre betölteni, amik az első képernyőhöz kellenek.

Túl sok külső szolgáltatás

Minden beágyazott térkép, chatablak, analitika és hirdetési kód idegen szerverhez fordul. Ezekre Önnek nincs ráhatása, viszont az oldal betöltését hátráltatják.

Bővítmények

Egy sablonos rendszerben a bővítmények akkor is betöltik a saját kódjukat, ha az adott oldalon nincs is rájuk szükség.

Maga a felépítés

Ha az oldal csak azután kezd el megjelenni, hogy a böngésző letöltötte és lefuttatta az összes JavaScriptet, az sok másodperc. Ezért érdemes az oldalt előre elkészíteni: a látogató és a kereső azonnal kész HTML-t kap, a dinamikus részek csak utána kelnek életre.

Hogyan mérje meg?

Két ingyenes eszköz elég:

1. PageSpeed Insights (a Google eszköze) – írja be a címét, és nézze a mobil eredményt, ne az asztalit. A legtöbb látogató telefonról jön.
2. A saját telefonja, mobilneten, wifi nélkül. Ez a legőszintébb teszt.

A számok közül háromra érdemes figyelni:

• LCP – mennyi idő alatt jelenik meg a legnagyobb tartalmi elem. Ez az, amit a látogató „betöltésnek” érez.
• CLS – ugrál-e az oldal betöltés közben. Ha igen, a látogató mellékattint.
• INP – mennyit vár egy kattintás után.

Mit lehet tenni?

Ha meglévő oldalról van szó, ebben a sorrendben éri meg nekiállni:

1. Képek rendbetétele. Itt a legnagyobb a nyereség a legkisebb munkával.
2. Felesleges beágyazások kigyomlálása. Tényleg kell a chatablak minden oldalra?
3. Betűtípusok szűkítése.
4. Gyorsítótárazás beállítása a szerveren.
5. Ha ezek után is lassú: valószínűleg a felépítéssel van a gond, és érdemes megnézni, nem az újraépítés-e az olcsóbb út.

Egy példa a saját házunk tájáról

Ezen az oldalon a betűtípusok eleinte két formátumban is letöltődtek, mert a régi böngészők miatt a rendszer mindkettőt kitette. Amikor csak a woff2 maradt, és csak a tényleg szükséges vastagságok töltődtek előre, az oldal letöltött mérete 695 kB-ról 199 kB-ra csökkent, a kérések száma 25-ről 15-re. Egyetlen látható dolog sem változott az oldalon.

Ilyen pontokból áll össze a gyorsaság – nem egy nagy trükkből.

Meglévő oldalak gyorsítását weboldal-karbantartás és hibaelhárítás keretében is vállaljuk. Ha kíváncsi, hol áll most az oldala, kérjen díjmentes gyorsjelentést: megnézzük, és megírjuk, mit látunk.