Weboldal sebesség optimalizálás: így gyorsítsd fel az oldaladat

Amikor egy weboldal sebességét nézem, szinte mindig ugyanaz a három-négy dolog jön elő: túl nagy képek, túl sok bővítmény és külső script, lassú tárhely, és elemek, amelyek betöltés közben ugrálnak. Ebben a sorrendben érdemes javítani őket is, mert az elején van a legnagyobb nyereség a legkevesebb munkával.

Mielőtt bármit javítanál, viszont mérj, különben nem tudod, mi segített.

Hogyan mérd meg az oldalad sebességét?

A legegyszerűbb eszköz a Google ingyenes PageSpeed Insights oldala. Beírod a címet, és egy perc múlva kapsz egy jelentést, de ezt két részre kell bontani.

Az oldal tetején a valós látogatók adatai vannak, az elmúlt 28 napból, Chrome-felhasználóktól. A Google ezeket veszi figyelembe, és itt döntik el, hogy a három fő mutató (a Core Web Vitals) zöld-e. Ha az oldaladnak kevés a látogatója, ez a rész üres marad, mert nincs elég adat.

Az oldal alján egy szimulált labormérés van egy 0-100 közötti pontszámmal. Ez futtatásonként ingadozhat, ezért ne ess kétségbe, ha egyszer 92, másszor 85 jön ki. Arra viszont kiváló, hogy megmutassa, mi lassít: alatta ott a lista a konkrét javaslatokkal.

A három mutató, amit a Google néz:

Mi lassítja leginkább az oldalakat?

Túl nagy képek

Ez a leggyakoribb, és szerencsére a legkönnyebben javítható. Egy telefonnal készült fotó 4-5 MB is lehet, a weboldalon viszont egy 1200 pixel széles, pár száz kilobájtos változat is tökéletesen néz ki.

Saját példa: az egyik blogcikkünk illusztrációja 2,6 MB-os PNG volt. Átméretezés és tömörítés után 418 KB lett, szemmel látható különbség nélkül.

Három dolgot érdemes betartani. Ne tölts fel nagyobb képet, mint amekkorában megjelenik. Használj modern formátumot: a Google mérése szerint a WebP képek 25-34%-kal kisebbek a hasonló minőségű JPEG-eknél. És a lap aljára eső képeket töltsd késleltetve (lazy loading), de a legfelső, nagy képet soha, mert annak minél előbb meg kell jelennie, ezt méri az LCP.

Túl sok bővítmény és külső script

Minden WordPress bővítmény hozhat magával saját CSS- és JavaScript-fájlokat, és sok bővítmény minden oldalon betölti őket, akkor is, ha ott nincs rájuk szükség. Ugyanez igaz a külső scriptekre: chatablak, közösségimédia-beágyazások, hirdetéskódok, analitika, csúszkák.

Nézd végig a bővítményeidet és scriptjeidet, és kérdezd meg mindegyiknél: kell ez még? A PageSpeed Insights javaslatai között azt is látod, melyik külső szolgáltatás mennyi időt visz el. Egy chatablak, amit havonta kétszer használ valaki, gyakran nem éri meg azt a lassulást, amit mindenkinek okoz.

Lassú tárhely

Ha a szerver lassan válaszol, minden más is később indul. Ezt a TTFB (Time to First Byte) méri, a Google ajánlása szerint 0,8 másodperc alatt kellene lennie. Az olcsó, túlterhelt megosztott tárhelyeken ez könnyen 1-2 másodperc is lehet, mielőtt egyetlen kép elkezdene betöltődni.

Amikor a saját oldalunkat mértem, a szerver egy közeli gyorsítótárból nagyjából 40 ezredmásodperc alatt válaszolt, mert az oldalak előre elkészülnek, és nem kell őket minden látogatónál újra összerakni.

Ugráló elemek

Ismered azt, amikor kattintanál egy gombra, de az utolsó pillanatban lejjebb ugrik, mert betöltött fölötte egy kép vagy egy hirdetés? Ezt méri a CLS. A leggyakoribb okai a méret nélkül beillesztett képek, a később betöltődő bannerek és az, amikor a betűtípus betöltés után cserélődik, és a szöveg más helyet foglal el. A képeknek adj meg szélességet és magasságot, a felugró elemeknek pedig előre foglalj helyet.

Hogyan gyorsíts egy WordPress oldalt?

Ha WordPressen fut az oldalad, ezekkel a lépésekkel érdemes kezdeni. Töröld a nem használt bővítményeket, ne csak kapcsold ki. Telepíts egy gyorsítótár-bővítményt, például a WP Rocketet vagy a LiteSpeed Cache-t. Tömörítsd a képeket egy képoptimalizáló bővítménnyel, ami WebP-t is tud készíteni. Ha mindez nem elég, nézd meg a tárhelyet és a sablont, mert egy mindent tudó, nehéz sablont nem lehet a végtelenségig gyorsítani.

Egy jól beállított WordPress oldal is lehet gyors. Csak tudni kell, hogy itt a sebesség a beállításokon és a fegyelmen múlik, és minden új bővítménnyel újra romolhat.

Mi a helyzet egy Next.js oldallal?

Mi Next.js-sel építjük az oldalainkat, és itt a fenti dolgok nagy része alapból meg van oldva. A képeket a rendszer magától méretezi a látogató képernyőjéhez, és modern formátumban adja át. Minden oldal csak a saját kódját tölti be, a tartalom pedig előre elkészül, így egy közeli szerverről azonnal kiszolgálható.

Ettől még itt is el lehet rontani a sebességet, egy rosszul beillesztett külső script itt is lassít. Csak a kiindulási pont jobb. Hogy ez miben más, mint egy WordPress oldal, azt a WordPress vagy Next.js összehasonlításban írtam le, a technológiáról pedig a mi az a Next.js cikkben.

Mennyit ér egy másodperc?

A Renault weboldalán több mint 10 millió látogatás adatait elemezték, és azt találták, hogy ahol az oldal legnagyobb eleme 1 másodperccel hamarabb jelent meg, ott 13%-kal magasabb volt a konverzió. A Portent nevű ügynökség pedig azt mérte, hogy az ajánlatkérést gyűjtő oldalak közül az 1 másodperc alatt betöltő háromszor annyi konverziót hoz, mint az 5 másodperces. Ezek összefüggések, nem garanciák, de jól mutatják, hogy a sebesség pénzben is mérhető.

Ha szeretnéd, hogy valaki végignézze az oldaladat, és fontossági sorrendbe tegye a javításokat, a technikai SEO oldalunkon leírtuk, hogyan dolgozunk.

Források:

1. Google web.dev - Web Vitals
2. Google web.dev - Time to First Byte (TTFB)
3. Google - WebP képformátum
4. web.dev - How Renault improved its bounce and conversion rates
5. Portent - Site Speed is (Still) Impacting Your Conversion Rate