Weboldalsebesség: miért fontos, és hogyan javíts rajta?

sebesség
Tartalomjegyzék
Bővített tartalomjegyzék

A weboldalsebesség rendkívül fontos dolog a felhasználói élmény és így a konverziók, vagyis a bevételeid szempontjából. Az emberek a gyors weboldalakat szeretik. Amikor megtorpanás nélkül elérik az általuk keresett tartalmat. A gyorsaság jó a felhasználói élmény szempontjából, de jó a keresőoptimalizálás miatt is. Elmondjuk, hogy miért okoz gondot a lassúság, mennyi pénzt buksz ezzel, és arra is adunk tanácsot, hogyan tudsz javítani – objektív és szubjektív módon – a weboldalad sebességén.

Webshark weboldalkészítés 02Szinte biztos, hogy Te is futottál már bele olyan weboldalakba – főleg mobiltelefont használva -, melyeknél hiába vártad a Téged érdeklő információ megjelenését, csak egy fehér oldalt nézhettél másodperceken keresztül, és nem történt semmi. Milyen érzés volt? Ugye nem volt kedved kivárni, amíg betöltődik, és visszaléptél, hogy egy másik találatot nézzél meg? És talán még azt is megjegyezted, hogy melyik oldal volt ez, hogy legközelebb ne kövesd el azt a hibát, hogy újra rákattintasz. Oké, de a Te weboldalad mennyire gyors? Azonnal megjelenik a felhasználók számára? Mobilon is? Mit mond a weboldaladról a Google?

Felhasználói élmény és a céged megítélése

Ha neked is van egy weboldalad, annak sebességével kapcsolatban pontosan az előbb említett igények merülnek fel az emberek részéről. A weboldal sebessége rendkívül fontos kérdés, hiszen nagymértékben rontja a felhasználói élményt. De lehet számszerűsíteni is a miatta elszenvedett veszteséget, ahogy arra hamarosan rátérünk majd. Ezért minél hamarabb, minél gyorsabbá tudod tenni a weboldalad, annál jobb.

A céged megítélése múlik azon, hogy mennyire gyors a weboldalad, mennyire bíznak meg a márkádban az emberek. Ráadásul, ha lassú a weboldalad, nem is fognak visszatérni a látogatók, és másoknak sem nagyon fogják ajánlani, sem pedig megosztani az oldalt.

És hiába készíttetsz egy ragyogó designt, ha azt a lassú betöltődés miatt az érdeklődők nagy része soha nem fogja látni. Ezért a webdesignerek számára is elsődleges szempont kell legyen, hogy az a weboldal, amit megterveznek, olyan gyors legyen, amennyire csak lehet.

Sokan a sebességoptimalizálást technikai kérdésnek tartják. És bár ez a feladat nagyobbrészt valóban a programozóké, nem nekik kell aggódniuk a weboldalsebesség miatt. Ezzel neked kell foglalkoznod, majd felkérni egy szakembert a megoldásra.

Milyen lassú a túl lassú weboldal most?

A sebesség a weboldalak esetében mindig is fontos tényező volt, azonban ahogy telik-múlik az idő, úgy lesznek egyre komolyabbak a követelmények. A Webdesigner Depot szerint 2011-ben egy 5 másodperces betöltési idővel még a web 25 százalékánál gyorsabbak voltunk, 2,9 másodperccel pedig az 50 százalékánál. Mára azonban már sokkal gyorsabbnak kell lennie egy weboldalnak.

A Google egyik webmestereknek készült, teljesítményoptimalizálásról szóló videójából az derül ki, hogy ők egy webáruház esetében a 2 másodpercen belüli értéket tartják elfogadhatónak. Ez tehát meg is adja a választ a címben feltett kérdésre. A weboldaladnak ideális esetben valahol 0,5-2 másodperc közötti értéket kellene hoznia.

John Mueller, a Google szakembere is hasonlóképpen nyilatkozott 2016 decemberében, amikor egy kérdésre válaszolva jelezte, hogy a HTTP betöltési sebességnek

2-3 másodperc alatt kellene maradnia.

Azt is hozzátette, hogy ajánlása szerint ezt a webpagetest.org-gal érdemes lemérni. A Google nem nagyon szokott weboldalsebességgel kapcsolatban konkrétumokat közölni, ezért is fontos John Mueller kijelentése. Ez tehát a viszonyítási alap, melyet érdemes figyelembe venni. Habár, mint a későbbiekben kiderül, a századmásodpercekért felesleges küzdeni.

Itt nyilatkozik John Mueller a Twitteren:

A valóság persze kicsit más. A Pingdom sebességtesztelő eszköz statisztikája szerint 2015-ben az átlagos betöltési idő 5 másodperc volt. Ez azt mutatja, hogy a Pingdom által tesztelt weboldalaknál még nincs teljes mértékben optimalizálva a sebesség. Ezt visszaigazolják a Google mérései, akik elsősorban a mobil weboldalak sebességével foglalkoztak 2016-ban.

Weboldalsebesség mobilon, a Google szerint

Az emberek 53 százaléka elhagy egy weboldalt mobilon, ha az nem töltődik be 3 másodperc alatt. Ez a lényege a Google tanulmányának, mely a “The Need for Mobile Speed” címet kapta. A mellékelt linken prezentálták is egy szépen elrendezett formában az összefoglalóját. Kiemelendő, hogy nem wifi hálózaton kell a 3 másodperces értéket elérni. Hanem bizony a szűkös mobil-adatforgalom mellett elérendő ez a weboldalsebesség. És ez azért is fontos, mert mint a Google már korábban is jelezte: a keresések több mint a fele mobilról érkezik.

3 másodperc alatt

Ez a 3 másodperces weboldalsebesség-érték némi aggodalomra adhat okot, tekintve, hogy most egy átlagos weboldal mintegy 19 másodpercig töltődik 3G hálózaton, de 4G-n is 14 másodpercig tart a megjelenése. A weboldalak 77 százaléka egyébként 10 másodpercnél hosszabb ideig töltődik. És ezek a főoldalak. Az aloldalak jellemzően fele olyan gyorsan jelennek meg a felhasználók kijelzőjén. Pedig a felhasználók 46 százaléka a webes böngészésben azt tartja a legidegesítőbbnek, amikor várni kell a weboldal betöltődésére.

A Google szerint a lassúság oka elsősorban a fájlméret, az elemek elrendezése és a szerverlekérések száma. A hirdetések, a képek, a videók és a mérési technológia hatására csökken a weboldalsebesség. A legnagyobb visszaesést pedig a hirdetések okozzák a weboldalakon. A mobilhirdetések átlagosan 5 másodperc alatt töltődnek be. Ez éppen kétszerese annak, amennyi idő alatt asztali gépen megjelennek.

Egy átlagos mobil-weboldal mérete 2,5 Mb. Ami azt jelenti, hogy csak az adatok betöltése 13 másodperc 3G-n. Maga a tartalom ebből 1,49 Mb méretű, míg a reklámok átlagosan 816 Kb méretűek. A Google tanulmányában egyébként az is szerepel, hogy az emberek fele elvárja, hogy egy mobilos weboldal kevesebb, mint 2 másodperc alatt töltődjön be.

Kevés az, ha mobilbarát az oldal

A Google ezért felhívta a figyelmet arra, hogy most már nem elég, ha egy weboldal rendben megjelenik mobileszközökön. A mobiloldalnak ugyanis gyorsnak is kell lennie. A lassú weboldalak frusztrálják az embereket és persze negatív hatással vannak a weboldalra is. Ugyanakkor, ha már sikerül elérni az 5 másodperces weboldalsebesség-értéket, akkor az átlagos 19 másodperces oldalakhoz képest 25 százalékkal jobb lesz a láthatóságod, 70 százalékkal lesz hosszabb az átlagos munkamenet, és 35 százalékkal csökkent a visszapattanási arány.

A tanulmány emellett kitért a weboldalsebesség és a bevételek közti összefüggésekre is. És miközben persze a bevételeket számos tényező határozza meg, azoknál a weboldalaknál, melyek 5 másodperc alatt betöltődtek, kétszeresére nőtt a mobilhirdetésekből befolyó összeg a 19 másodperces oldalakhoz képest.

Mennyivel növeli a visszafordulási arányt, ha lassú a weboldalad?

A Google azonban nem elégedett meg ennyi vizsgálattal. 2017-ben nekifutott egy másik kutatásnak, melyben azt próbálták meghatározni, hogy a visszafordulási arány milyen mértékben változik az oldal betöltési sebességének függvényében. Az általuk közzétett grafikon rendkívül világosan mutatja be a helyzetet:

Weboldalsebesség és visszafordulási arány a Google kutatása szerint

Weboldalsebesség és visszafordulási arány a Google kutatása szerint

Ebben a vizsgálatban ismét kiemelik, hogy egy átlagos mobil landing oldal betöltési ideje jelenleg 22 másodperc, miközben a látogatók 53 százaléka nem várja meg azoknak az oldalaknak a betöltődését, melyeknél ez az idő több mint 3 másodperc. Nem véletlen, hogy a miközben a web-forgalomnak már több mint fele érkezik mobilról, a konverziós arány rosszabb, mint desktopon. Ennek pedig a mobil-weboldalak lassúsága az oka.

Ebben a kutatásban a Google 900 ezer mobil hirdetés landing oldalát vizsgálta 126 országból. Mint kiderült, a weboldalak 70 százalékának csak a hajtás feletti része közel 7 másodperc alatt töltődött be. Ahhoz pedig további 10 másodpercre volt szükség, hogy a teljes weboldal vizuális tartalma megjelenjen.

Azt is megállapították, hogy amikor a betöltési idő 1 másodpercről 7 másodpercre kúszik, a valószínűsége a látogatók visszafordulásának 113 százalékkal nő. És ahogy a weboldalon megjelenő elemek – szövegek, címek, képek – száma 400-ről 6 ezerre nő, a konverzió valószínűsége 95 százalékkal esik.

Weboldalsebesség és SEO

A weboldalak sebességére érdemes SEO-szempontból is némi figyelmet fordítani. A SEO-sok mindig arra törekszenek egy weboldal optimalizálása során, hogy annak sebessége a lehető leggyorsabb legyen. A feltételezések szerint minél gyorsabb egy oldal, az annál nagyobb előnyt jelent a találati oldali rangsorolásnál. 2010 óta a Google keresési algoritmusa már hivatalosan is rangsorolási tényezőként tekint a weboldalsebességre. De vajon minden ezredmásodperc számít a helyezés meghatározásánál? Nem egészen.

Nem az ezredmásodperceket vizsgálja

A kérdés lényege tulajdonképpen az, hogy a weboldalsebesség milyen fontosságú rangsorolási tényező a Google számára. Ez John Mueller, a Google szakemberének válaszából talán egy kicsit világosabbá válik. Ő azt hangsúlyozta, hogy ugyan komoly negatív hatása van a rangsorolásra annak, ha egy weboldal lassú, ugyanakkor néhány ezredmásodpercnyi sebességnövekedés egy egyébként már gyors oldalnál, nem javít annak helyezésén.

Mint mondta, két szempontból kell vizsgálni a sebesség kérdését. Az egyik az a sebesség, melyet a felhasználó tapasztal a böngésző előtt ülve, tehát az az idő, amíg megjelenik számára egy weboldal a kijelzőn. Ez egy rangsorolási tényező, azonban nem a legfontosabb – szögezte le. A Google megpróbálja megkülönböztetni azokat a weboldalakat, melyek valóban lassúak, azoktól amelyek normális sebességgel működnek. De az ezredmásodpercek csiszolgatása ezeknél már nem fog semmit sem befolyásolni.

Ugyanakkor azt is hangsúlyozta, hogy minél gyorsabbá sikerül tenni egy weboldalt, annál több felhasználó fogja azt használni, annál több dolgot tudnak megtenni a weboldalon, annál több embernek fogják ajánlani. Vagyis egy olyan tényezőről van szó, ami indirekt módon javít a weboldal helyezésén.

A feltérképezés sebessége is fontos

A sebesség kérdésének van egy másik része is. Mégpedig az, hogy a Google milyen gyorsan tudja feltérképezni az adott weboldalt. Ez nem egy közvetlen rangsorolási jelzés, csak azt befolyásolja, hogy a Google milyen hamar érzékeli a weboldal új tartalmainak megjelenését, és bukkannak fel ezek a tartalmak a találati oldalakon. Tehát, ha van egy híroldal, és a Google ezt nem tudja elég gyorsan indexelni, akkor lesz néhány olyan hír, ami nem jelenik meg a keresőben. Ezzel pedig az adott weboldal látogatottságot veszít azokhoz a konkurens weboldalakhoz képest, amelyeket gyorsabban tud feltérképezni.

Ugyanakkor, ha egy statikus weboldalról szó, azaz olyan oldalról, mely akár évekig változatlan, akkor nem annyira lényeges, hogy a Google gyorsan indexelje a tartalmakat, hiszen nem marad le semmilyen változásról – tette hozzá John Mueller.

Egyelőre csak a desktop sebesség számít

Azt is érdemes tudni, hogy egyelőre elég, ha csak a weboldalad desktopos sebességére figyelszEz idővel viszont változni fog, úgyhogy lassan fel lehet készülni a mobilos sebesség optimalizálásának feladatára is. Már ha a Google-rangsorolást tartod csak szem előtt. Jelenleg azonban a Google még nem veszi figyelembe, hogy milyen gyors a weboldalad mobilon, csak azt vizsgálja, hogy mennyire gyorsan töltődik be asztali gépekre és laptopokra. Annak ellenére, hogy egy weboldal sebessége nagymértékben eltérhet laptopon wifivel, és egy mobiltelefonon mobilnet használata közben.

Gyakori eset, hogy az asztali gépen elfogadható időn belül betöltődő oldal mobilos optimalizálás hiányában túl lassú okostelefonon. De persze az sem kizárt, hogy egy weboldal számára sokkal fontosabb a mobilos elérhetőség, így kiválóan van optimalizálva okostelefonra, miközben asztali megjelenésnél nem figyelnek a teljesítményre.

Most már a Facebook is bünteti, ha lassú a weboldalad

Nem csak a Google számára fontos azonban, hogy gyorsak legyen a weboldalak a jó felhasználói élmény miatt, hanem 2017 augusztusától a Facebook számára is fontos lett. (Az okok között persze nem csak a felhasználói élmény miatti aggodalom jelenhet meg, hanem az is, hogy ezzel terelje az Instant Articles nevű megoldás felé a weboldalakat a Facebook.)

A Facebook úgy változtatta meg a hírfolyam algoritmusát, hogy “büntesse” azokat a linkeket, melyek lassú weboldalra mutatnak. Ez a büntetés abban merül ki, hogy hátrébb sorolja a hírfolyamban azokat a posztokat, melyekben lassú weboldalra mutató link található.

A Facebook technikája az, hogy megpróbálja megbecsülni, hogy mobilalkalmazásán keresztül mennyi időbe telik betölteni egy adott oldalt, amire a link mutat. Ezt a becslést használja fel arra, hogy elhelyezze a felhasználók hírfolyamában a megfelelő helyre a vonatkozó posztot.

Mint Jiayi Wen és Shengbo Guo, a Facebook mérnökei írták: az olyan tényezők meghatározóak, mint a Facebookot használó személy internetkapcsolata, valamint a weboldal átlagos betöltési sebessége. Ha a jelzések azt mutatják, hogy a weboldal gyorsan betöltődik, akkor a weboldalra mutató link feljebb jelenik meg a hírfolyamban – szögezték le egészen egyértelműen.

A bejelentés szerint, azok a weboldalak, melyek lassúnak számítanak, azt fogják tapasztalni, hogy kevesebb ember látja az oldalaikra mutató bejegyzéseket, valamint lecsökken a Facebookról érkező forgalmuk. Azok számára, akik aggódnak a Facebook algoritmusfrissítése miatt, a cég közzétett egy útmutatót, hogy miként csökkenthetik a weboldaluk betöltési idejét, valamint egy lista is szerepel benne arról, hogy milyen eszközökkel ellenőrizhetik a sebességet.

Vagy pedig nyitva áll a lehetőség a számukra, hogy elkezdjék használni a Facebook Instant Articles technológiáját. Ezt azonban kissé meglepő módon nem említik az útmutatóban, sem a bejelentésben. Ahogy azt sem határozzák meg, hogy pontosan milyen betöltési értékre számítanak, és azt sem részletezik, miként becsülik meg a sebességet, és milyen egyéb tényezőket vesznek még figyelembe az előbb említetteken kívül.

A változás fokozatosan jelenik meg a felhasználók hírfolyamát érintően az elkövetkező hónapok során.

Mennyit buksz azon, hogy lassú a weboldalad?

Mindjárt kérdezheted is, hogy mégis hogyan függ össze egy weboldal gyorsasága a pénzzel? Pedig egyszerű a képlet, különösen ha a webshopokra gondolunk. Kell még magyarázni? Rendben, megtesszük. Ki lehet ugyanis számolni, hogy mennyi pénzt veszítenek havonta, évente a lassú weboldalak tulajdonosai.

Te tudod, hogy milyen gyorsan töltődik be a weboldalad?

Ha nem tudod, akkor itt néhány másodperc alatt leellenőrizheted, hogy egy adott weboldal milyen sebességgel töltődik be. Hány másodpercet kaptál? Nem árt, ha tudod, hogy a Google SEO szempontból a 1,5 másodpercnél rövidebb betöltési időt díjazza. De ha ez még nem elég, akkor azt is megemlítjük, hogy látogatószámban mennyit veszítesz egy-két másodperceken az Akamai vizsgálata szerint:

  • a látogatók 40 százaléka hagyja ott a weboldalad, ha az több mint három másodperc alatt töltődik be
  • egy látogató átlagosan mindössze 2,078 másodpercet hajlandó várni az oldaladra
  • ha viszont az oldalad egy-két másodperc alatt betöltődik, az már önmagában kétszázalékos látogatószámnövekedést eredményez
  • ha leszorítanád egy másodperc alá, akkor 4,6 százalékkal nőne a látogatószám

Ha ez nem elég, akkor hozzátesszük, hogy az Amazon tanulmánya szerint minden egy másodpercnyi lassulás a konverzió 7 százalékos romlását eredményezi, míg a Walmart szerint minden 100 milliszekundumos gyorsítás egy százalékos bevételnövekedést hozott.

Az persze jó dolog, ha legalább szép a weboldalad, logikus a navigáció, csodálatosak a hatalmas, faltól-falig képek, lenyűgözőek az animációk, de kérdés, hogy az igen kíméletlen másodpercekkel szembeni küzdelemben elvérzik-e vagy talpon marad? Vagy még csak nem is igazán szép, nem reszponzív, hanem régi, nehéz és lassú?

Weboldalsebesség és konverzió

Weboldalsebesség és konverzió (Forrás: Semrush.com)

És nem csak látogatókat veszítesz folyamatosan egy lassú weboldallal, hanem ebből következően pénzt is. De közelítsük meg a dolgot pozitív oldalról:

minél gyorsabb a weboldalad annál több pénzt hoz neked

Ha sikerül egy másodperccel gyorsabbá tenni, az átlagosan hét százalékos növekedést jelent a konverzióban a Tagman vizsgálata és a legalul látható infografika szerint. Ha webshopod van, akkor ez közvetlenül, összegszerűen jelentkezik. Mint mondtuk, az Amazon és a Walmart már rájöttek, hogy akár 100 millisecundumos lassulás is egy százalékos csökkenést eredményez az eladásaikban (náluk tehát tíz százalékot tesz ki a konverzióváltozás egy másodpercnél). Ez az ő esetükben több millió dollárt jelent évente. De feltesszük egyetlen webshop-tulajdonos sem szereti kidobni a pénzt az ablakon, akármennyiről is van szó.

Nézzük akkor, hogy webshopok esetében mit mutatnak a statisztikák egészen pontosan!

  • A felhasználók 83 százaléka arra számít, hogy egy webshop 3 másodpercnél gyorsabban betöltődik.
  • Ha ez nem történik meg, akkor a látogatók 44 százalékánál ez rossz benyomást kelt,
  • 79 százalék esetében csökken a valószínűsége, hogy az oldalon legközelebb megint vásárolni fog
  • 46 százalék pedig még panaszkodik is a lassú weboldal miatt az ismerőseinek.

Ha elfogadjuk, hogy egy egymásodperces javulás átlagosan 7 százalékos növekedést eredményez a konverzióban, illetve 1 másodperces lassulás 7 százalékos romlást, akkor egy naponta 10 ezer forint bevételt hozó weboldal esetében az éves veszteség 255 ezer forint lesz (10 000x365x0,07) egyetlen másodperc miatt. Persze, ha a bevétel már 100 ezer forint naponta, akkor a veszteség is eléri forintban a 2,55 milliót. Ha 3-4 másodperccel lassabb, mint lehetne, akkor három-négyszer 2,55 millió, azaz 8-10 millió forint a bukás évente.

Weboldalsebesség és konverzió

Weboldalsebesség és konverzió (Forrás: Tagman)

De pozitív irányból megközelítve: a sebesség ugyanennyivel növelheti is az eredményt, csak gyorsítani kell a weboldalt. Ha napi százezres bevétellel számolunk, akkor egy 1 másodperces sebességjavulással már 2,5 milliós bevételnövekedést érhet el a webshop évente, míg 3-4 másodperces javulással 8-10 millióval növelheti a bevételét.

Gyakorlati példák

Ez egy nagyon szintetikus számítás, a valóság nem feltétlenül így alakul, de vannak példák arra, hogy valós esetekben mit eredményezett egy-egy weboldal gyorsítása vagy éppen lassulása. Már említettük az Amazont és Walmartot, melyeknél minden 100 ms lassulás egyszázalékos csökkenés eredményezett a bevételben, ugyanakkor minden egymásodperces gyorsulás kétszázalékos konverziójavulást hozott. Egy további szereplő, a Shopzilla 25 százalékkal emelte látogatószámát és 12 százalékkal növelte meg bevételét, amikor a 7 másodperces betöltési időt 2 másodpercre mérsékelte.

Barack Obama amerikai elnök kampányában oldalának betöltési sebességét 5 másodpercről két másodpercre javították. Ez 14 százalékkal emelte a konverziót, és plusz 34 millió dollárt jelentett a számára. A Mozilla esetében 2,2 másodperces sebességjavulás 15,4 százalékkal emelkedő konverziót eredményezett, mivel 60 millióval nőtt a letöltések száma éves szinten.

Egyértelmű tehát, hogy mi a feladat. A gyakorlatban a felhasználók által elvárt 3 másodperc alá viszonylag könnyen le lehet szorítani egy weboldal betöltési idejét. A programozót és a pénztárcát nem kímélő munka azonban leginkább ezután kezdődik. Amikor 2, majd esetleg a Google által ajánlott 1,5 másodpercnél gyorsabb betöltődést akarunk elérni. De érdemes és egyre inkább szükséges végrehajtani ezt a fejlesztést. Ha a felhasználó a konkurenciánál várakozás nélkül kapja meg, amit szeretne, akkor azt az oldalt fogja használni, ott fog vásárolni, és oda fog legközelebb is visszatérni, nem pedig hozzád.

Hogyan gyorsítsd fel a weboldalad?

A weboldalad felhasználói felületének a gyorsaságra kell épülnie, hogy ne kelljen aggódnod amiatt, hogy elég hamar megjelenik-e a felhasználók számára. A Google is meg tudja mutatni számodra, hogy mi az, amin még lehet javítani. Érdemes ebből kiindulni a sebességoptimalizálásnál. De lássuk, hogy melyek azok az elemek, melyeket vizsgál!

  • A böngésző gyorsítótárazása
  • A képek optimalizálása
  • A szerver válaszideje
  • Szkriptek és CSS a hajtás felett
  • Tömörítés
  • Átirányítások
  • A CSS, a HTML és a JavaScript kicsinyítése
  • Látható tartalom rangsorolása
PageSpeed Insights

PageSpeed Insights

Ezután pedig nézzük meg azt, hogy melyik ezek közül a legfontosabb, hol lehet még a weboldalad áramvonalasítani.

Dobd ki a felesleges plugineket!

Akadnak olyan pluginek a weboldaladon, melyek nem is használsz? Annak ellenére, hogy ezeket nem használod, lassítják a weboldalad. Ez különösen igaz akkor, ha olyan rendszered van, mint a WordPress. Még azon pluginek használatán is el kellene gondolkodnod, melyeket valójában használsz. Gondold végig, hogy tényleg szükséged van-e rájuk, hozzájárulnak-e a felhasználói élmény javításához?

A pluginek száma mellett fontos kérdés a minőségük is. Ne adjál hozzá mindenféle elavult, rossz plugint a weboldaladhoz, keress olyanokat, melyek valóban értékesek és ez az értékeléseknél is tükröződik. A régi, lejárt szavatosságú pluginek lerontják a weboldalad.

Csak szükséges közösségi média elemeket tartsd meg!

Hány közösségi média megosztási gombot használsz a weboldaladon? És ezzel szemben hányra van szükséged? Bár marketing szempontból javasolt ezek használata, van aki mégsem foglalkozott azzal, hogy ezeket a közösségi média elemeket beágyazza a weboldalába. Őket a dolog nem érinti. Akad azonban olyan is, aki talán túl nagy hévvel tette meg a lépést, és tele van az oldala felesleges közösségi média elemekkel.

A felhasználók nem használnak túl széles palettát a megosztásoknál, vagy legalábbis nincs minden eshetőségre szükségük. Ugyanakkor ezek az elemek lassítják a weboldalad, növelik a betöltési időt. Ez különösen igaz az olyan közösségi média elemeknél, melyek még azt is mutatják, hogy hány kedvelésnél, megosztásnál jár az adott oldal, hiszen mindkét irányba le kell futtatnia egy lekérést.

Úgyhogy válassz ki csak egy vagy két platformot, melyeken igazán aktív vagy, fontosnak találod őket, melyeken keresztül az emberek kapcsolatba kerülnek veled rendszeresen. Ezeknek a gombjait tedd ki az oldaladra, a többit pedig felejtsd el, mert ezek csak útban vannak.

Mit tehetsz a képekkel a jobb weboldal sebesség érdekében?

Videók, illusztrációk, fotók, animációk. Persze, szeretjük őket, javíthatnak is a felhasználói élményen, mindezt azonban a sebesség kárára teszik. Úgyhogy mielőtt hozzáadnál bármilyen képet a weboldaladhoz, mérlegeld a fontosságát a többi elemhez viszonyítva. Kínál valami pluszt a felhasználóknak, vagy csak a helyet töltöd ki vele? Ha igen, akkor tartsd meg, ha viszont nem, akkor minek erőlteted?

Emellett minden képet optimalizálnod kellene a webre, vagyis olyan kicsinek kellene lenniük a fájlméretet tekintve, amennyire csak lehetséges. Ne kezdjél el feltölteni teljes méretű fotókat a weboldaladra, még akkor sem, ha így tűnik tökéletesnek a minőségük. Ez persze némi munkát igényel, de megéri, különösen ha folyamatosan növekszik a weboldalad.

Ha csak egyvalamit teszel rendbe a weboldaladon, akkor azok legyenek a képek. Ez igaz a desktop megjelenésre, de különösen igaz a mobilos verzióra. Míg néhány évvel ezelőtt még átlagosan 1,5 MB méretű volt egy weboldal, addig ez a méret mára 2,1 MB-ra nőtt. Ennek egyik oka, hogy nőtt a kép- és videótartalmak mennyisége a weboldalakon. Az alábbi grafikonon pontosan látható, hogy általában mi is adja egy-egy weboldal méretét.

Méretek tartalomtípusok szerint

Méretek tartalomtípusok szerint (Forrás: The Fiscal Times)

A képek közel 63 százalékát teszik ki a weboldalak méretének, míg a videók 10 százalékát. A képek felelősek tehát elsősorban egy weboldal sebességéért, illetve azok nagy méretéért. Hiszen minél nagyobb méretű egy weboldal, annál több idő a megjelenítése.

És a Google is ezt mondja

Nem alaptalanul. A Google részéről a legnagyobb gondnak azt találják a weboldalaknál, hogy a képek nincsenek megfelelően mobilra optimalizálva. Ez egészen pontosan azt jelenti, hogy amikor mobilra betöltődik egy weboldal, akkor ugyanúgy a teljes felbontású képet kell megjelenítenie a böngészőnek, mint az asztali verziónál. A felhasználók tehát a legtöbb esetben ugyanazt kapják nagykijelzős asztali gépen, mint egy kisméretű mobilon. A képek nem igazodnak az adott eszközhöz, azaz nincs megfelelően optimalizálva az oldal mérete és sebessége.

A videó itt látható minderről:

Ökölszabályként elmondható, hogy el kell felejteni a a több száz kb-os méreteket a képeknél. Arra kell törekedni, hogy ne haladja meg a 70 kb-ot.

Mitől lesznek kisebb méretűek a képeid?

  1. Használj a hatékonyabb, modern képformátumokat! – Alakítsd át a képeidet a korszerűbb WebP és JPEG-XR formátumba. Ez persze azzal jár, hogy a különböző böngészőknek különböző formátumokat kell szolgáltatni, de a méret határozottan kisebb lesz. A WebP-t a Chrome támogatja, míg a JPEG-XR-t a legtöbb Internet Explorer verzió és az Edge.
  2. Felejtsd el a GIF-et! – A GIF ugyan menő és kényelmes, azonban nem egy hatékony megoldás. Óriási a fájlméret és erősen terheli a processzort, ami különösen mobilon okozhat gondot. Helyette használható az animált WebP a Chrome böngészőknél, esetleg MP4 vagy WebM videók. A legtöbb modern böngésző számára ezek megjelenítése már nem okoz gondot.
  3. Nem kell mindenkinek 2X-es (retina kijelzős) kép! – Akadnak még olyan felhasználók, akik normál kijelzőket használva böngésznek. Számukra felesleges a retina minőségű kijelzőkre kínált képfelbontás, elég nekik ennek csak a fele. A megoldás az, hogy kétféle felbontásban tárolod a képeket, és attól függően jeleníted meg őket, hogy milyen eszközzel érkezik a felhasználó.
  4. Ne használj böngésző-oldali méretezést! – Ehelyett szerver-oldalon kellene méretezni a képeket, mert ezzel elkerülhető, hogy feleslegesen nagyméretű képeket kelljen letölteni. Még akkor is megéri előre méretezni a képeket, ha mindez azt jelenti, hogy sokféle méretben létre kell hoznod egy-egy képet.
  5. Nincs mindig szükség magas minőségű JPG-re! – Ne félj gyengébb minőségű JPG-fájlokkal kísérletezni, ugyanis sokszor nem látszik a különbség a weben. Természetesen a jobb minőségű JPG kép mindig jobban néz ki, de ez a minőségbeli javulás gyakran túl nagy áldozatot követelhet a sebesség tekintetében.
  6. Használd a helyes formátumot! – Sokan követik el azt a hibát, hogy fotókat PNG-ben jelenítenek meg. A minőséggel ugyan valóban nem lesz gond, azonban a mérete többszöröse lehet egy JPG-nek. A PNG-t tartogassuk a néhány színt tartalmazó grafikákra, vagy amikor szükséges az átlátszóság. A JPG fotóknál használandó formátum, míg a GIF a mozgóképeknél. De korábban már jeleztük, hogy ezeknél azért akad most már jobb választás.
  7. Tömörítsd a képeket! – A PNG képek akár 50 százalékkal is tömöríthetők, anélkül, hogy észlelhető lenne a minőségbeli visszaesés. Itt van például egy weben is használható megoldás PNG-k tömörítésére.
  8. Töröld a meta-adatokat! – Különösen akkor figyelj erre, ha vannak felhasználók által feltöltött fotók a weboldaladon. A metaadatok, azaz Exif infók törlésével gyorsíthatod a fotók megjelenítését, egyedül a megfelelő tájolásra kell figyelni.
  9. Mindig add meg a kép kiterjedésének paramétereit, azaz a szélességét és a magasságát a kódban. Ugyanígy
    az alt attribútumnak, vagyis az alt tagnek is szerepelni kell minden képnél. Ebben kaphatnak helyet a kulcskifejezések.
  10. Ne a kódban add meg a kisebb kiterjedést, amennyiben kisebb helyre akarod beilleszteni a képet. Mert ilyenkor feleslegesen tölt le a böngésző egy nagyméretű képet. Ehelyett a képméretet csökkentsd.
  11. Háttereket és kereteket CSS-ben formázd meg, mert azok is az oldal betöltési idejét növelik, hiszen méretet jelentenek. Persze egy CSS-t is túl lehet komplikálni, így a CSS fájl betöltési ideje is nőhet.
  12. Érdemes használni a CSS Sprites-t, amely egyetlen lekéréssel megoldja valamennyi kép betöltését, ha sok grafikához tartozó állandó elemet, jellemzően ikonokat, gombokat kell betölteni egy weboldalon, hiszen ez sok http-lekérést jelent.

Máshol is el lehet érni csökkentéseket, például az ikonoknál: ikon-fontok használatával a kép-alapú ikonok helyett. Konvertáld át az elemeket SVG-be, azaz vektor formátumba, ha egy ikon-font nem használható. A képek helyett próbálj megoldani mindent, amit lehet HTML-lel és CSS-el. Ne nehezítsd az oldalad olyan elemekkel, melyeket fotóként kell betölteni, például gombok, nyilak.

Kicsinyíts, tömöríts!

A sebességhez a kulcsot tehát a kis méretű fájlok jelentik, és nem csak a képeknél. Ehhez rendkívül sok eszköz a rendelkezésedre áll, például:

  • A WP Smush képtömörítésre a WordPress-használóknak.
  • A Kraken szintén képtömörítésre bárkinek.
  • A TinyPNG ugyancsak sok formátum esetében további csökkenést eredményez.
  • A Gzip becsomagolja a fájlokat.
  • A CSS-t lekicsinyítheted ezzel az eszközzel.
  • A SpriteMe a háttérképeket CSS sprite-okba rendezi, hogy csökkentse a HTTP-lekérések számát.
  • A CSS Compressor pedig a kód méretét csökkenti.

Gyorsítótárazz!

Engedélyezd a gyorsítótárazást a weboldaladon! Ha nem teszed, akkor a felhasználók fizetik meg az árát. Van persze, aki ennek használatát vitatja, de a felhasználók és a sebesség fontosabb a vitáknál.

A cache révén létrehozol egy ideiglenes fájlt a weboldalaidról, vagyis a felhasználók böngészője emlékszik azokra az oldalakra, melyeket korábban meglátogatott. Így kevesebb adat átvitelére van szükség, csökken a szerver terhelése. A felhasználók pedig megköszönik Neked, különösen abban az esetben, ha már jelentős méretű a weboldalad.

Takaríts rendszeresen!

Ahogy otthon is rendet kell rakni időnként, ugyanúgy a weboldalad adatbázisában, linkjeinél, fájljai között is. Ezeket az elemeket írd fel a takarítási listádra:

  • Az adatbázis optimalizálása – egy idő után az adatbázisban túl sok lesz a változtatás, a nem használt fotók, a mentett adatok. Ezeket nem kell mind megtartani. Takartsd ki azokat az elemeket, melyekre már nincs szükség a weboldaladhoz!
  • Ne hotlinkeld a képeket – az nem túl jó ötlet, ha valaki más weboldaláról és szerveréről húzol be képeket. Különösen azért nem, mert lassú a megoldás. Ez egyébként minden más külső fájl esetében is igaz, úgyhogy ezt a megoldást csak akkor használd, ha valóban szükséges!
  • Javítsd a linkeket – a törött linkek ugyan nem lassítják le a weboldalad, ugyanakkor megnehezítik azt, hogy a felhasználók eljussanak az egyik oldalról a másikra. Ez pedig ugyanolyan rossz. Rendszeresen ellenőrizd, hogy vannak-e törött linkek a weboldaladon, és távolítsd el őket!
  • Mindent frissíts – főleg, ha olyan platformot használsz, mint amilyen a WordPress is. A frissítések tartalmazzák a javításokat, melyek hozzájárulnak a sebesség növekedéséhez, valamint védik a weboldalad a különféle veszélyektől. És semmi sincs annál lassabb, mint egy weboldal, amit meghekkelnek vagy megfertőződik.

Optimalizáld a szervereidet!

Ezek után fussunk neki röviden annak a kérdésnek, hogy mit is tehetsz a weboldalad gyorsítása érdekében. Először is sok múlik a hosting-szolgáltatódon: egy minőségi szolgáltatása nem csak jobb támogatást, de nagyobb sebességet is kapsz. Érdemes tehát alaposan körülnézni és utánajárni, amikor hosting-szolgáltatót választasz magadnak.

Az, hogy miként kezeled a szervereidet, rendkívül fontos tényező a weboldalad sebessége szempontjából. Különösen fontos az, hogy milyen a szerver válaszideje. Ez arról szól, hogy mennyi időbe telik, mire a szerver válaszol a felhasználó böngészőjének lekéréseire.

Máshogy fogalmazva, optimalizálhatod a weboldalaidat annyit, amennyit akarod, ha a szervereid nem elég gyorsak, akkor a weboldalad sebessége nem lesz megfelelő. Ezért vannak különböző technikák, melyeket érdemes bevetni, annak érdekében, hogy a válaszidők jócskán lerövidüljenek:

  • Használj kevesebb forrást minden aloldaladon (késleltetett képeket, külső CSS és JS fájlokat).
  • CDN, vagyis content delivery network használata.
  • Gyorsítótárazás.
  • A szerver szoftver-konfigurációjának optimalizálása.
A Webshark weboldalának sebessége a Pingdom tesztje szerint

A Webshark weboldalának sebessége a Pingdom tesztje szerint

Gondold át a webdesignt!

Itt nem csak azt kell figyelembe venni, hogy milyen szép a weboldalad, hanem azt is, hogy ez az elemek betöltésével jár, ami időt vesz igénybe. A weboldalsebesség szempontjából a minél egyszerűbb weboldal a nyerő. De nyilván a webdesignban azért sok más szempont is felmerül. Így kompromisszumokat kell kötni, és kihozni egy minden szempontból elfogadható eredményt. Ebbe beletartozik, hogy

  • csökkented a JavaScript fájlok méretét,
  • minimalizálod a betűtípusok számát,
  • optimalizálod a betöltési sorrendet,
  • nem egyszerre töltődnek be az elemek, hanem a hajtás felettiek kapnaknagyobb prioritást, és
  • kevesebb szerverlekérést használsz, és
  • minimalista webdsignra váltasz!

Nem csak azért érdemes minimalista webdesignra törekedni, mert az most olyannyira trendi, hanem azért is, mert gyorsabb weboldalt eredményez. (Talán éppen ezért lett ennyire felkapott a minimalizmus a webdesignban.) Kevesebb ugyanis a betöltendő elem. Sok későbbi problémától kíméled meg magad, ha már eleve úgy állsz hozzá a weboldalad tervezéséhez, hogy elkerülöd azokat a lehetőségeket, melyek a weboldalad lassulását eredményezhetik.

De mitől lesz minimalista a weboldalad?

  • Például a hamburger menü használatától a sztenderd menüsor helyett.
  • Még több whitespace-től.
  • Rövidebb űrlapoktól.
  • Kisebb képektől.
  • Kevesebb betűtípustól.

Ha viszont már nem tudsz tovább gyorsítani a weboldaladon, mert nem akarsz további kompromisszumokat kötni, akkor adunk néhány tanácsot várakozás élményének fokozásához. Hiszen a sebesség esetében nem csak az számít, hogy a teszteken hány másodperces betöltődési időt ér el a weboldalad, hanem az is, hogy

Hogyan tűnhet gyorsabbnak a weboldalad?

Mert a legfontosabb az, hogy milyen gyorsnak érzik az emberek a weboldalad. Ha a felhasználók úgy érzik, hogy az oldalad villámsebes, akkor már nyert ügyed van. Hiszen a felhasználói élménynél nem az adatok számítanak. Ha a weboldal sebességével elégedettek az emberek, akkor jó felhasználói élményről beszélhetünk.

Egy videón Luke Wroblewski elmagyarázza, hogy a sebesség egy kritikus tényező a felhasználói élmény szempontjából. De ahelyett, hogy különféle bonyolult technikai megoldásokon törnéd a fejed annak érdekében, hogy gyorsítsd a válaszidőt, célszerűbb egy jó designt alkalmazni.

Tehát összefoglalva, amikor a weboldalad túl lassú, két lehetőséged van:

  • Minden áron leszorítod 3-2-1,5 másodperc alá a betöltési időt, mely felhasználói élmény és a SEO szempontjából mindenképpen üdvözítő dolog.
  • Ha azonban ez túlságosan nagy kompromisszumokkal járna – például fel kellene adni funkciókat, el kellene távolítani nagyméretű képeket, videókat, grafikákat -, akkor van egy másik megoldás: élvezetessé kell tenni a várakozást a felhasználók számára.

Mert a lényeg mégis csak az, hogy az emberek ottmaradjanak a weboldaladon. És mivel érheted ezt el?

1. Mindig aDJ VISSZAJELZÉST a felhasználóknak!

Akinek van gyereke és autója, és még egy-egy utazás erejéig kombinálni is szokta a kettőt, az tudja, hogy a gyerekek szájából rendszeresen elhangzó kérdés az autóban eltöltött első öt perc után: “ott vagyunk már?”

De miért is hangzik el ez a kérdés rendszeresen? Mert miközben mi tudjuk, hogy nagyjából – és ha semmi nem jön közbe – mennyi ideig fog tartani az út, addig a gyerekeknek fogalmuk sincs róla.

Nem tudják, hogy mennyi ideig kell várniuk.

Pontosan ugyanez a helyzet a weboldalak és a felhasználók viszonylatában. Persze mondhatod, hogy ezért használjuk a progress barokat, melyek jelzik, hogy miközben a felhasználó tétlenül mereng a dolgok lassúságán, addig azért valami mégiscsak történik.

A dolog azonban nem ilyen egyszerű.

Jacob Nielsen, a usability királya szerint, ha egy válaszra 0,1 másodpercnél kevesebbet kell várni, akkor azt a felhasználók “azonnalinak” élik meg. Vagyis semmi dolgunk, csak eléjük dobjuk az eredményt. Ha 1 másodpercig kell várniuk, akkor már felfigyelnek a késlekedésre, azonban visszajelzés még ebben az esetben sem szükséges. 10 másodperc után viszont a felhasználók elveszítik az érdeklődésüket. Ezért ilyenkor már pontosan meg kell nekik mondani nekik, hogy mennyit kell még várniuk, így belekezdhetnek egy másik feladatba.

1 és 10 másodperc között azonban rengeteg idő van. Mi történjen ezen idő alatt? Két kutató a Carnegie Mellontól folyamatjelzőkkel kísérletezve azt találta, hogy ha egy feladat 5 másodpercnél rövidebb idő alatt lezajlik, akkor a folyamatjelző miatt az emberek hosszabbnak érzik az eltelt időt. A progress bar ugyanis felhívja a figyelmet arra, hogy várni kell. Érdemes tehát a folyamatjelzőt csak abban az esetben bevetni, ha a betöltődés 5 másodpercnél hosszabb időt vesz igénybe.

2. Milyen legyen a progress Bar kialakítása?

Egy kutatás szerint, amikor az embereknek egy hosszú, de gyors sor és egy rövid, de lassú sor között kellett választaniuk – már hogy melyikbe álljanak -, akkor a hosszabb, de gyorsabb sort választották. Miért? Mert látták a folyamatos változást.

Ezért van az, hogy azok a progress barok, melyek folyamatos előrehaladást mutatnak, sokkal jobb hatásúak, mint a sokszor megtorpanó és hosszú ideig semmilyen visszajelzést nem adó folyamatjelzők. Lehet, hogy csak illúzió, de a lényeg, hogy

gyorsabbnak érzik a betöltési időt az emberek.

Ez az oka annak is, amiért el kell kerülnöd a statikus progress barok használatát. Ezeken csak egy mozdulatlan kép vagy szöveg látszódik, mely azt jelzi az embereknek, hogy várjanak, mert töltődik valami. Természetesen a semminél ez is jobb, a felhasználói élmény szempontjából azonban messze nem beszélhetünk jó megoldásról. Az emberek ugyanis egy statikus progress bar megjelenésével még mindig nem látják, hogy a háttérben valóban zajlanak-e a dolgok.

A legegyszerűbb jelzés a felhasználók felé, amikor a töltődés egy forgási animáció jelzi. Ez már mozog, az azonban nem derül ki róla, hogy mennyi ideig kell várni, vagy hogy hol tart a folyamat. Általában csak akkor érdemes használni, ha maximum 10 másodperces a várakozási idő.

Ha 10 másodpercnél hosszabb folyamatokról van szó, akkor már valamilyen százalékos folyamatjelzőt érdemes bevetni. Ebből kiderül az emberek számára, hogy körülbelül mennyi ideig kell várakozniuk. Az is egy lehetőség, hogy pontosabban megmondd az embereknek a hátralévő időt. Nem kell azonban pontosnak lenni, elegendő, ha csak annyit közölsz, hog még körülbelül hány percig kell várniuk:

A jó megoldás tehát, ami világosan mutatja az aktuális helyzetet. Amire figyelni kell:

  • A folyamatjelző soha nem álljon le, mert különben a felhasználók azt gondolják, hogy lefagyott az oldal. A legrosszabb, amikor 99 százaléknál megáll a folyamat.
  • Kisebb megakadások elrejthetők egy folyamatosan mozgó progress barral.
  • Lehetőleg a folyamat elején lassan haladjon a jelző mozgása, majd a vége felé érdemes begyorsítani, mert ennek révén elégedettebbek lesznek a felhasználók.

De van egy további, hatékony kialakítás is. Chris Harrington és kollégái kísérleteztek különböző progress bar típusok hatásával. Azt találták, hogy az emberek 11 százalékkal rövidebbnek érezték az eltelt időt, amikor a jelzés “pulzált”: világoskékből sötétbe váltott, majd vissza egyre növekvő ütemben.

3. SZAKASZOS BETÖLTŐDÉS

Továbblépve a progress barokon, a weboldalak megjelenésénél is be lehet vetni pár trükköt a jobb felhasználói élmény érdekében. Jó megoldás, ha a weboldalad szakaszosan töltődik be, és látszik a folyamat, ahelyett, hogy csak akkor teszed a felhasználó orra elé az eredményt, amikor már az egész oldal betöltődött. Ezzel a megoldással csökkenthető a felhasználók passzív várakozási ideje. Vagyis az az idő, amíg csak üldögélnek kényelmetlen irodai székükben és a nagy semmire merednek a monitoron. Erre az egyik megoldás az úgynevezett

skeleton screen

alkalmazása. Ebben az esetben arról van szó, hogy ideiglenes információs konténereket használsz az oldalon addig, amíg a teljes tartalom be nem töltődik. A skeleton screens tulajdonképpen a weboldalad üres verziója, mely fokozatosan töltődik fel. Ilyenkor  nem kell használni folyamatjelzéseket, mert ez már elegendő jelzést nyújt az embereknek: megmutatja, hogy mire számíthatnak a hamarosan betöltődő oldalon.

A csontváz-képek gyorsan betöltődnek, mivel kis fájméretű képekről, gyakran egyszerű formákról van csak szó. Ha nem tudod, miről lehet szó, akkor itt van a Facebook alkalmazása iOS-en:

Itt a szürke négyzetek és vonalak jelzik a hamarosan megjelenő képeket és szöveget. Amint befejeződik ezek betöltése, a formák helyén megjelennek a valódi képek és mondatok. Ennek alkalmazásával persze nem lesz gyorsabb az oldal betöltődése, mintha egy folyamatjezőt használnál, de a felhasználók talán gyorsabbnak érzik az előbbinél.

Elmosódott, kisméretű képek

Egy másik megoldás, amikor a képek először csak elmosódva jelennek meg, majd ha teljesen betöltődtek, akkor láthatók élesen. Ilyenkor először csak egy tumbnail töltődik be, aminek nagyon kicsi a fájlmérete. Ha ez elmosódottan jelenik meg, akkor az egy jó placeholder.

lazy loading

A Webshark weboldalán is találkozhatsz ezzel a technikával. Az egyes elemek nem azonos időben, hanem folyamatosan, egymás után jelennek meg egy animációba ágyazva. Ez azért kellemes élmény a felhasználóknak, mert azzal foglalkoznak, ami már látható, és nem kell várakozniuk.

A lényege, hogy nem jelenik meg minden elem egészen addig, amíg azokra valóban nincs szükség. Például az olyan elemek, melyek a hajtás alatt találhatók, csak akkor kerülnek betöltésre és megjelenítésre a felhasználó számára, ha már a hajtás alá görgetett. Ez a “csak akkor, amikor szükséges” megközelítés azt jelenti a weboldalad számára, hogy kevesebb forrással is beéri, ezáltal pedig javul a teljesítménye.

Azt meg kell jegyezni, hogy kifejezetten rövid, kis oldalakon nem igazán érvényesül a hatása. Ha a weboldaladon sok a tartalom, és ezáltal a felhasználók jellemzően sokat görgetnek lefelé, akkor lesz igazán hatékony a lazy loading használata. Tehát ha egy igazi hosszú görgetésű weboldalt terveztél, akkor remekül használhatod a lazy loading technikát, mivel ebben az esetben sokat dob a weboldalad sebességén és felhasználói élményén.

Ha alkalmazni szeretnéd a lazy loadingot a weboldaladon, akkor itt van néhány plugin, melyeket használhatsz:

Lazy Load Plugin for jQuery

Lazy Load WordPress Plugin

BJ Lazy Load

Unveil.js

bLazy.js

Angular Lazy IMG

ocLazyLoad

React-Lazy-Load

Jason Slyvia’s React-Lazyload

4. TEDD SZÓRAKOZTATÓVÁ És integráld az élményt!

Minél jobban le tudod kötni a felhasználóidat a betöltődés közben, annál szórakoztatóbbá teszed a várakozást.Erre valók az animációk, melyeket az emberek szívesen néznek, leköti őket, és nem azzal foglalkoznak, hogy mennyit kell még várni, mire folytathatnák a feladatukat. Talán nem is kell tovább magyarázni. Érdekes, megfogja az embereket, és egyedivé teszed egy ilyen megoldással a weboldalad, de még a céged megjelenését is.

Végül pedig, hogy igazán élvezetessé tedd a várakozást, a betöltési képernyőt kombináld össze a megjelenő weboldallal. Vagyis ne két különálló élményt tervezz, hanem az egyiket vezesd át a másikba. A lényeg, hogy a progress barként megjelenő elem végül beépül a kész oldalba. Így a kettő egységet alkot, a felhasználói élmény tökéletesebb lesz. Pedig várni kell a weboldalra, nem is keveset. Ugye, hogy mégis megteszed, és a végén sem leszel csalódott? Végül pedig ejtsünk pár szót külön a mobilos élmény javításáról is.

Címkék: , ,

A Webshark.hu a hozzászólásoknál előzetes moderálást alkalmaz. Moderálási szabályaink itt olvashatók.