Modern Gyors Web Technikák


MODERN, GYORS WEB TECHNIKÁK

A weboldalak sebességével kapcsolatban van egy alapvető félreértés. Egy gyors oldal nem csak azt jeleni, hogy gyorsabb a számítógép ami a weboldalt futtatja. Erre jó példa a mai napig használt Google Page Speed Insight programja. Azért hozom ezt példaként mert a Google minden weboldal sebességét leteszteli ezzel a programmal és az eredményeket rangsorolási faktorként használja. Vagyis ha valaki mobilon az Ön kulcsszavára keres, nem elég, hogy mobilra optimalizált a weboldala, annak még mobilon is gyorsnak kell lennie, hogy a konkurencia előtt jelenjen meg.

Visszatérve a Google sebesség tesztjére. Ez a program megjelénésétől évekig csak egy dolgot nem mért, furcsa módon pont az oldal betöltési sebességét! Hiszen ezek a tesztek leginkább a Legjobb Praktikák meglétét ellenőrzik, hogy egy weboldal mennyire alkalmaz Modern Web Technikákat. Ha egy oldal minden Legjobb Praktikát alkalmaz akkor az bizony gyors is lesz! Viszont mostanra a Google hozáadta a teszthez az oldalbetöltési sebességet is, de külön kategóriaként igen érdekes módon. Érdekes mert a betöltési sebességet maga a Google méri a tényleges felhasználók eszközein. Előnye, hogy az eredmények jobbak ha a célközönségünk jó eszközökkel rendelkezik. (pl.: számítástechnikák), viszont hátránya, hogy a mostani legelterjetted mobil teljesítményével nem számol.

A mobil oldalak 70%-a több mint 1Mb méretű, egy átlagos 3G kapcsolattal 1Mb letöltése 5 másodpercet vesz igénybe.

Akkor mit is mérnek a tesztek?

A tesztek a Legjobb Praktikákat mérik, amit mi Modern Web Technikaként emlegetünk. Ez egy hosszú lista ami technikai elvárásokat ellenőriz, pl.: engedélyezve van e, a tartalmak tömörítése, a források minimalizálása, a renderelés blokkoló tartalmak csökkentése, optimalizáltak és megfelelő méretűek e a képek. Ez a lista hatalmas, és vannak pontok amik nagyon nehezen teljesíthetőek ezért az átlagos webáruház nem hozza közel sem a jó értékeket! Mi célul tűztük ki, hogy mindenben a lehető legmodernebb technikákat alkalmazzuk. Félreértés ne essék, nem csak a gyorsaság miatt, hanem mert ezek a legjobb praktikák. Mondjuk mobil eszközre elküldeni egy Full HD nem optimalizált képet igencsak nagy pazarlása lenne a felhasználó és a hálózat erőforrásainak. 


Miért fontos ez?

Lehet otthon a számítógépen vagy a legújabb mobilon minden szuper gyors, viszont gyenge kapcsolattal egy előző generációs gyenge képességű telefonnal lehet teljesen használhatatlan egy weboldal. Bizony ez megesik a legújabb mobilokkal is, mert lehet a háttérben tölt a mobil, vagy csupán csak utazunk és váltakozik esetleg kimaradozik a kapcsolat. A 4G sem mindig 4G hiszen nincs országos lefedettség!


A mi egyik webáruházunk Page Speed Insight Eredménye

 


Egy nagy magyar elektronikai webáruház Page Speed Insight eredménye 

A nagy forgalom okozta, nagy mintavétel miatt itt tényleges oldalbetöltés eredmények is elérhetőek. Azért egy nagy magyar elektronikai áruházat választottam mert egy elég ismert és nagy áruház, akik már biztosan foglalkoztak az optimalizálás gondolatával. Valóban elég jó eredményeket produkálnak.

Sajnos a kicsi webáruházak többsége rosszabbul vagy sokkal rosszabul teljesít.
 


Mi a legmodernebb teszt?

Amint említettem a Google tesztje sem egy mai darab vannak részei amik már elévültek. Viszzont számos másik teszt létezik, ezek közül nagyban kiemelkedik egy Chrome böngészőben futtatható teszt. Igen a Google Lighthouse tesztről beszélek, amit mindenki kipróbálhat csak egy Asztali Google Chrome böngésző kell hozzá.

Így használd a Google Lighthouse tesztet
Google Lighthouse link

A Lighthouse teszt 5 kategóriát elemez.

1. Sebesség

Itt a meglévő sebesség releváns legjobb praktikákat (web technikákat) elemzi és a betöltési sebességet is méri. Egy oldal akkor lehet PWA ha gyenge mobilon és gyenge 3G kapcsolattal is gyorsan tölt be. A ma használatban lévő átlagos mobil eszköz ára 20 000Ft körül mozog, vagyis átlagban a ma kapható leggyengébb okostelefon szintjén kell számolni!


2. PWA

Az oldal megfelel e a PWA elvárásoknak? Ez az egyetlen pont ahol csak a 100% az elfogadható. A többi eredménynél elég a „zöld” szint.


3. Elérhetőség

Mondjuk elég kontrasztos e az írás? A HTML megfelelően van felépítve? Ugye-ugye mobilon fényes nappal az utcán a szürke felületre írt szintén szürke kicsi írás hogy is lehetne olvasható! És kivel nem fordult már elő, hogy másra klikkelt, mint amit akart, mert az túl közel volt egy másik menüponthoz.


4 Legjobb praktikák

Nem teljesítménybefolyásoló legjobb praktikák.


5 SEO (kereső optimalizálás)

A technikai SEO-nak mennyire felel meg az oldal? Érdekesség, hogy az előbb említett szöveg mérete is számít SEO szempontból is. Itt az eredmény nem számít teljeskörű elemzésnek. SEO elemzéshez külön tesztek léteznek.


Akkor lássuk a mi eredményünket:

Crocodental.eu webáruházunk magyar kezdőoldala, mobilon futtatva, gyenge mobil és lassú hálózat szimulálással.

 


És lássuk egy másik nagy oldal eredményét?

Itt egy másik nagyon ismert magyar elektronikai áruházat tesztelem, abból a megfontolásból, hogy oldaluk az átlagosnál jobban optimalizált és nincs mobil apllikációjuk. Az előbb említett másik elektronikai áruház rendelkezik letölthető mobil applikációval így ők az erőforrásokat egyértelműen applikáció fejlesztésre fordították. A második PWA értékelés nem releváns hiszen ez az oldal nem PWA. A többi kategóriában viszont nagyon elszomorító a helyzet. Igaz nem ártana neki ha PWA lenne, hiszen ezzel kiválthatják a natív App fejlesztést! 

 


Mit jelent ez?

Leginkább összegeket, hiszen minden letöltési időhöz hozzáadott másodperccel majdhogynem feleződik az oldalon maradók száma! A tesztelt árúház majdnem 4 másodperc után rajzol ki először valamit a képernyőre 7 másodperc után használható és nem mérhető a folyamatos használat (görgetés) mert a háttérben folyamatosan dolgozik az oldal, ami lefoglalja a telefon erőforrásait!


Hogyan számoljam ki ez mennyi veszteséget jelent?

Ezt az oldalt elektronika iránt nyitott fiatalok jó eszközökkel használják, így a felhasználók eszközén mért tényleges betöltés csupán 2s, ehhez képest fogok számolni. Próbáljunk reálisan számolni, havi 10 000 látogatóval 1% konverzióval és 20 000Ft körüli vásárlási értékkel, majd vigyük le a 2 másodperces betöltést 1,3 ra ami (Google ajánlása). Ebben az esetben az eredmény évi 1,1 millió forint körüli bevétel kiesés. (Vagy plusz bevétel lehetőség. Nézőpont kérdése.)  Tehát a sebesség igenis számít és fontos szempont!

A google „Impact calculator” alkalmazásával számolva
Google Impact Calculator

Természetesen ezek a számok nem a valóságot tükrözik csupán becslések!

 
 


Végszó

A minden eszközön gyors webáruház még sosem volt ennyire fontos, és bizony mérhető a várható bevétel kiesés egy lassú webáruházzal!

 


2018 Jun 27 - Szabó Zoltán


Vélemények

Még nincs vélemény ehhez a cikkhez legyél te az első aki véleményezi


Mit gondolsz a cikkről?
captcha text
Ha látja ezt a mezőt kérem hagyja üresen
A csillaggal (*), jelölt mezők kötelezőek. Az értékelés jóváhagyásunk után lesz látható.

Szeretne egyszer webáruházat de nem éppen most!

Mindent elmondunk amit érdemes tudni az e-kereskedelemről

Ingyenes anyagok