Optimalizálás kereskedelemre - Mobile Hungary 2014
1. Ilyen állat pedig nincs 3.
MobileHungary2014
BublikMáté
KERESKEDELEMRE
OPTIMALIZÁLÁS
2. E-commerce + M-commerce = Smart commerce
2015-re a netes eszközök több mint fele okostelefon, táblagép
Mobilos online eladások bevétele 15-20%-ra nő
Felhasználói és vásárlási élmény növelése szükséges
Optimalizálás fontossága online kereskedőknek
OKOSKERESKEDELEM
3.
4. Jó felhasználói élmény: 0-100 ms
Alig érezhető késés: 100-300 ms
Észlelhető késés: 300-1000 ms
Zavaró késés: 1+ másodperc
Oldal elhagyás: 10+ másodperc
Felhasználóiélmény
Google ajánlása alapján 1 mp alatti betöltődést kell elérni
5. A mobil oldalak többsége 7 másodperc alatt töltődik be
1 másodperc betöltési idő növekedés
o 7% konverzió veszteség
o 11%-kal kevesebb oldal megtekintés
o 16%-kal kisebb ügyfél-elégedettség
betöltésiidő
6. Amazon
o 0,1 mp oldal gyorsulás
» 1% bevétel növekedés
Shopzilla
o 6-ról 1,2 mp-ra gyorsulás
» 12% bevétel növekedés
» 25%-kal több oldalmegtekintés
OLDALGYORSULÁSHATÁSAI
7. Szerver válasz és layout renderelés legyen kevesebb, mint 200 ms
Átirányítások, kérések és forráskód minimalizálása
Optimalizált JavaScript futás és renderelés
Külső JS és CSS betöltésének mellőzése
hajtás feletti részben
TELJESÍTMÉNYNÖVELÉS
8. Gyors betöltéshez nem kell renderelni
egész oldalt, csak a hajtás feletti részt
Hajtás felett legyen inline stílusformázás
Késleltetett betöltés a maradék CSS és JS-hez
Kerülni kell a HTML-ben az inline JS kódot
HAJTÁSFELETTIRENDERELÉS
9. Ahol lehet, képek helyett CSS
Képek tömörítése
HTTP kérések minimalizálása
Kisebb felbontású képek kiszolgálása
Reszponzív képek JS-sel
KÉPOPTIMALIZÁLÁS
10. Gyors bejelentkezés
o aktív közösségi
média hozzáféréssel
BELÉPÉS,FIZETÉSkönnyítés
Mobilos fizetés
o PayU mobil alkalmazás
11. whatsmyua.com
o LG Nexus 5, Android 4.4 KitKat, Google Chrome Mobile
Mozilla/5.0 (Linux; Android 4.4; Nexus 5 Build/KRT16M) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/31.0.1650.59 Mobile Safari/537.36
o Apple iPhone 5s, iOS 7, Safari:
Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_2 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko)
Version/7.0 Mobile/11A501 Safari/9537.53
o Smartphone Googlebot:
Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko)
Version/6.0 Mobile/10A5376e Safari/8536.25 (compatible; Googlebot/2.1;
+http://www.google.com/bot.html)
User-Agent Switcher
o Böngészőbővítmény az asztali gépről való teszteléshez
USER-AGENT
12. Külön URL (pl.: m. aldomain)
User-agent alapján átirányítás
megfelelő eszközre
Duplikációk elkerülése szükséges
o desktop URL-ekre: link rel="alternate"
o mobil URL-ekre: link rel="canonical"
Egyszerűbb teljesítményoptimalizálás
Két verzió tartalmát és kapcsolatát
szinkronban kell tartani
KÜLÖNMOBILOLDAL
13. Azonos URL
User-agent alapján különböző HTML kód kiszolgálása
Eszközfüggő tartalom jelzése szükséges a Googlebotnak
(HTTP fejlécben Vary: User-agent használatával)
Nincs szükség átirányításokra, kanonizációs meta elemekre
DINAMIKUSTARTALOM
14. Google által leginkább javasolt megoldás
Egy HTML kód és egy URL
Media Query CSS szabályok
a szélességfüggő megjelenéshez
@media all and (max-width: 320px) { … }
Nincs átirányítás és több tartalom
Teljesítmény optimalizálás terén nem a legelőnyösebb
Mobil eszközökre is letöltődik minden elem
Régebbi böngészők nem támogatják a HTML5 és CCS3 technológiát
RESZPONZÍVDESIGN
15. Legnagyobb e-commerce webhelyek Google PageSpeed
Insights sebesség teljesítménytesztje (Mobil %, Asztali %)
TELJESÍTMÉNYTESZT
» Nem reszponzív oldalak:
o apple.com (59%, 74%)
o ebay.com (79%, 82%)
o amazon.com (75%, 86%)
o aliexpress.com (59%, 80%)
» Reszponzív oldalak:
o sony.com (41%, 57%)
o walmart.ca (51%, 63%)
o currys.co.uk (54%, 88%)
o real.de (40%, 55%)
16. Minta kódgyűjtemény: http://tedgoas.github.io/Cerberus
HTML-be beágyazott CSS stílusok
Táblázatok alkalmazása (table, tr, td elemek)
Media query-k használata
RESZPONZÍVE-MAIL
18. Kereső- és felhasználóbarát URL-ek
Egyedi meta és szemantikus elemek
Strukturált adatok, mikroadatok
Navigáció, átjárhatóság, indexelhetőség
XML webhelytérkép
Törölt termékek, megszűnt kategóriák
átirányítása
KERESŐOPTIMALIZÁLÁS
19. Hierarchia struktúra
Hasznos, egyedi tartalom
o Kategória listázó oldalakhoz
o Tematikus ismertetők, tájékoztatók
o Részletes termékleírások
o Felhasználók által generált tartalom
o Paraméterek, címkék
o Belső duplikációk elkerülése
TARTALOMFEJLESZTÉS
20. Not provided kulcsszó visszafejtése
Új Google Analytics (GA) nézet létrehozása szűrővel:
NOTPROVIDEDKULCSSZÓ
22. Brand
Nonbrand
o Head
o Torso
o Long tail
Google AdWords és
Webmestereszközök
közös kulcsszóriportja
KULCSSZóSZEGMENTÁLÁS
23. Google Analytics új működtetési szabványa (protokoll)
Jobb adatgyűjtés bármilyen digitális eszközről
Többplatformos, cross-device mérési megoldás
Megváltozott látogatás (session) kezelési mód
Böngészősütik tiltása esetén is képes adatokat gyűjteni
UNIVERSALANALYTICS
24. Egyelőre nincs új riport, működésében tér el
Egyéni dimenziók és mutatók
Offline konverziók mérhetősége
Új követőkód
Régi GA fiókokban elérhető az UA-ra történő frissítési lehetőség
Rövidesen minden fióknak kötelező lesz használni
TÖBBPLATFORMOSMÉRÉS
25. Sok beillesztett mérő- és követőkód helyett egy tároló kód
Elemzési és követési címkék
Aktiválási szabályok
Makrók: név-érték párok
Adatréteg (dataLayer): JS-objektum
Automatikus eseménykövetés
GOOGLETAGMANAGER