Weboldalsebesség – a képek fontosabbak, mint gondolnánk!
A digitális marketing kampányok szempontjából kulcsfontosságú az érkezési- vagy más néven landing oldal, ahova a hirdetéseket landoltatjuk. A fizetett hirdetések arról gondoskodnak, hogy releváns érdeklődőknek jelenítsünk meg figyelemfelkeltő hirdetéseket, de arról, hogy a weboldalra eljuttatott érdeklődőkből ügyfelek vagy vásárlók lesznek-e, már a landoló oldalunknak kell gondoskodnia. A kampány landing oldal jelentősége így óriási!
Nem mindegy, hogy ez a landing oldal konverzióra- és mobileszközre optimalizált-e, könnyen használható, navigálható-e és elég gyorsan betöltődik-e.
Ebben a blogcikkünkben a legutolsó tétellel, vagyis a gyors oldalbetöltődéssel foglalkozunk, kifejezetten a landoló oldalunkon / weboldalunkon elhelyezett képek szempontjából.
Weboldal betöltődési sebesség
A kampány landing oldalunk / weboldalunk betöltődési sebességével kapcsolatban azt mondhatjuk, hogy a best practice az, hogy legfeljebb 3 mp alatt betöltődjön a felhasználó által kért oldal. Ez azt jelenti, hogy ha ennél több ideig kell várnia egy érdeklődőnek – aki Google-, Facebook- vagy LinkedIn hirdetésből átkattint a weboldalunkra – akkor jó eséllyel elveszítjük őt, mert megunja a várakozást és anélkül nyom rá a vissza gombra, hogy a kifizetett hirdetési kattintásból weboldal látogatás születne.
A fentiek alapján látható, hogy mekkora jelentősége van annak, hogy a weboldalunk / kampányunk landing oldala elég gyorsan betöltődjön. Az oldalbetöltődés szempontjából nagy jelentősége van az oldalon elhelyezett képeknek, mivel ezek általában jelentős fájlméretet jelentenek és ennél fogva minél több képet alkalmazunk a weboldalunkon, várhatóan annál lassabban fog az betöltődni. Ebből kifolyólag a betöltődési sebesség gyorsításához érdemes a weboldalon található képek optimalizálására koncentrálnunk.
1. Priorizáljuk a képeket
Mielőtt a képek optimalizálását elkezdjük, első lépésben érdemes átgondolnunk, hogy az egyes képek egyáltalán szükségesek-e az oldalra? Természetesen a nagyfelbontású fotók remekül mutatnak, de vajon elősegítik-e a fő üzenetünk közvetítését? Pl. egy animáció vagy gif leegyszerűsíthető-e vagy akár eltávolítható-e hiányérzet nélkül?
A felesleges elemek eltávolítása csökkenti az érintett oldal forráskódjának méretét, a képek szöveggel vagy css-sel történő megjelenítése pedig gyorsíthatja az oldalbetöltődést (mivel kevesebb adatmennyiséget kell letöltenie a böngészőprogramnak).
2. Válasszunk hatékony képformátumot
Megannyi képformátum áll rendelkezésünkre, amelyek közül nem egyszerű feladat a legmegfelelőbb kiválasztása. A fájlformátumnak fontos szerepe van az oldalbetöltődés szempontjából, a megfelelő formátummal csökkenthetjük a fájl méretét ezáltal gyorsítva weboldalunk betöltődését. A képek használatát érdemes a WebP-vel kezdeni, amelyek a jpeg-nél akár 30%-kal csökkentett képméretet eredményeznek, a képminőség romlása nélkül.
Ha ezzel megvagyunk, akkor érdemes az alábbi képformátumokat használnunk:
- JPEG: átlátszóság nélküli fotók
- PNG: átlátszó hátterű fotók (például céglogók)
- SVG: méretezhető ikonok és alakzatok.
A Google például készített egy “Fighting Piracy” weboldalt, amelyen SVG formátumot akalmaztak a gyorsan betöltődő, könnyed animációk megjelenítésére. Az optimalizálás előtt korábban GIF-eket és videókat alkalmaztak, egyenként akár 300 kbyte-nál is nagyobb méretűeket. Az SVG formátum használatával tizedére tudták csökkenteni a képek fájlméreteit. Ehhez azonban szoros együttműködésre volt szükség a fejlesztők és a dizájnerek között. A képek optimalizálásával elért oldalsebesség-javítás messze megérte az erőfeszítést.
3. Tömörítse és méretezze át a képeket
A képek optimalizálása messze a legnagyobb mértékű adatcsökkentést és mobilos weboldal teljesítményjavulást eredményezi. Még a legalapvetőbb optimalizálási intézkedések megtétele – pl. a képek tömörítése, a fájl metaadatok eltávolítása (mint a dátum és idő) és a minőségi beállítások módosítása – is nagyon sokat segít.
Napjainkban a korábbiakhoz képest fejlett megoldásokkal tehetjük reszponzívvá képeinket vagy tömöríthetjük őket akár automatikusan is egy megfelelő szkript alkalmazásával. Ezzel a dizájnerek is időt spórolhatnak és helyette jóval szofisztikáltabb feladatokkal foglalkozhatnak. Itt jön képbe az automatizálás, amellyel időt nyerhetünk és amelyekkel akár több száz képet is viszonylag gyorsan átméretezhetünk és tömöríthetünk.
Ha ún. AMP (Accelerated Mobile Pages) weboldalt szeretnénk készíteni, akkor ezeket a kép-optimalizálásokat automatikusan is elvégezhetjük. Az AMP megoldás lekorlátozza a maximális képméretet és ezzel megelőzi a böngésző gyorsítótárazási problémákat, a gyorsabb képbetöltődés érdekében.
A BMW luxuskategóriás autómárka például gyors oldalbetöltődésű, mobil fókuszú weboldalt készített úgy, hogy közben megtartotta csodaszép képeit és videóit is. Az AMP technológiának köszönhetően 4-szer gyorsabbá vált a mobilos weboldaluk és ezzel 50%-kal tudták növelni mobilos weboldal látogatóik számát. Ráadásként weboldaluk még kombinálja is az AMP technológia sebesség előnyét az ún. progresszív web appok (PWA) gazdag funkcionalitásával, ezzel egy mobilapphoz hasonló, minőségi felhasználói élményt nyújtva.
4. Speciális betöltődési módszerek használata
A képek tömörítése és átméretezése alapvető fontosságú a weboldal betöltődési sebességének javításához. Ezen felül az egyes eszközökön – a képernyőfelbontáshoz, megjelenítő eszközhöz vagy a használt 3G/4G mobilhálózathoz illeszkedve – akár különböző képverziókat is alkalmazhatunk. Ez lehetővé teszi a webfejlesztők számára, hogy egy gyorsan betöltődő weboldalt készítsenek mindenki számára, az egyes felhasználók böngészési feltételeitől függetlenül.
Ha már gondoskodtunk a képeink optimalizálásáról, akkor gondolkodnunk kell arról, hogy az adott képeket a megfelelő időben jelenítsük meg a weboldal látogatóknak. Amikor egy látogató megérkezik a weboldalunkra, akkor azonnal szeretné megtekinteni a képernyőjén a tartalmat, pontosabban mondva a képernyőjén elférő vagy más néven “hajtás feletti” tartalmat, amely legördítés nélkül elérhető a számára.
Az úgynevezett “lusta betöltődés” technikáját alkalmazva elsőként a hajtás feletti tartalmat töltjük be a felhasználó számára, míg a hajtás alatti tartalmakat csak akkor, amikor a felhasználó legördít. Egy német ecommerce cég, a Bücher.de ezt a betöltődési metodikát használja és akkor tölti be az egyes weboldal elemeket, amikor a felhasználó az adott képernyőre navigál. Ennek segítségével 33%-kal gyorsították weboldaluk betöltődését és 3,5 másodperccel csökkentették a weboldal betöltődési idejét.
A nagy méretű, lassan betöltődő képeknél érdemes az ún. progresszív betöltődési technikákat alkalmazni, mint pl. placeholdereket (ún. helykitöltőt), folyamatjelzőt (progress indicator), illetve olyan hatékony megjelenítési formátumokat használni, mint a progresszív JPEG. Ezeket az elemek mutatják a felhasználónak, hogy betöltődés zajlik és nagyobb eséllyel fogják megvárni, hogy a kért elem betöltődjön, mintha csak egy üres képernyőt látnak, bármilyen jelzés nélkül, hogy a háttérben betöltődés zajlik.
Összefoglalásképpen
Általánosságban elmondható, hogy bármely weboldal esetében napjainkban már a látogatások nagyobbik része mobileszközről érkezik. Az organikus keresőmegjelenés (keresőoptimalizálás), illetve a fizetett online hirdetések szempontjából kiemelt fontosságú, hogy a weboldalunk és egyben a kampányaink landing oldala mobilra optimalizált, azon jól használható, konverzióra optimalizált és gyorsan betöltődő legyen.
Weboldalunk mobilos verziójának betöltődési sebessége kulcsfontosságú online marketing tevékenységünk szempontjából, a betöltődési sebesség javításáért a legtöbbet pedig a weboldalunkon lévő képek és videók optimalizálásával tehetjük (priorizálás, tömörítés, megfelelő formátum, átméretezés). Ha ezt már elvégeztük, akkor érdemes megfontolnunk a különböző betöltődési technikák használatát is.
Ha ezeken végigmentünk, akkor valóban mindent megtettünk online marketing kampányaink sikeréért és azért, hogy az online hirdetéseinkből érkező kattintásokból weboldal látogatóink, azokból pedig vásárlóink, ügyfeleink legyenek.
Ellenőrizze mobil weboldalának sebességét és a lehetséges optimalizálási lehetőségeket a Google ingyenes “Test My Site” eszközével.
Keressen minket bizalommal, ha online marketing aktivitásaihoz profi segítségre van szüksége!