A képek fő bűnösek a túlméretezett weboldalak okozásához (átlagosan 2,2 MB), amelyek lassan végezhetnek mobileszközökön.
A múlt héten megnéztük Hogyan optimalizálhatja mobil webhelyének sebességét És vizsgálja azokat a problémákat, amelyek lassíthatják webhelyét. A Google egyre nagyobb hangsúlyt fektet a mobil webhely gyorsaságára és felhasználói élményére a jó rangsor elérése érdekében, és kulcsfontosságú a mobil webhelyek gyorsaságával kapcsolatos problémák felfedezése. De hogyan oldhatja meg ezeket a kérdéseket, ha ott van?
Ez az oszlop, a második a három, megvitatja a különböző módokat, hogy csökkentse a képek hatását a mobil webhely teljesítményére.

Javítania kell mobil képproblémáját. Nem vagy egyedül. Amint az az előző oszlopban részletezett, a Az átlagos mobil weboldal ma nevetséges 2.2MB És ez súlyosan megakadályozhatja, hogy az oldal gyorsan töltődjön le mobileszközön.
A teljes oldal súlyának 68% -a, a képek a fő bűnösök. Ez az oszlop meg fogja vizsgálni a különböző módszereket, amelyekkel csökkentheti a kép hatását webhelye teljesítményére.
Azok számára, akik szeretik a lépésenkénti megközelítést, itt tíz lépést tesznek a gyorsabb mobil weboldalakhoz.
Sebességmérés: milyen gyorsan töltődik be webhelye mobileszközön; A késedelem okai.
Vizsgálati képhatás: a képek javítják vagy megölik a felhasználói élményt.
Képszabályzat: a vállalati politika áttekintése a képeken; Mindenki oktasson.
Képellenőrzés: számok, formátum, méret, helyzet, hatás.
Vágja le a zsírt: távolítsa el azokat a képeket, amelyek nem adnak hozzáadott értéket.
Képhatás: a képek jobban működjenek.
A képek kiegyensúlyozása hozzáférhetőséggel.
Optimalizálja a képeket: megfelelő formátum, megfelelő méret.
Alternatív technikák: ikonok és gombok.
Még nagyobb sebesség: webdesign technikák.
Az 1-4. Lépéseket többnyire lefedték 1. rész . Ez az oszlop az 5-7 lépésekre koncentrál. A 3. rész a 8-10 lépésekre koncentrál.
Vágd le a zsírt
Az első és legegyszerűbb lépés az oldalsebesség javítására a felesleges képek eltávolítása. Ha a képek nem adnak hozzá értéket, és értékes ingatlanokat vásárolnak, megszabaduljanak tőlük. Crappy stock kép csak ott tölteni helyet? Legyél távol.
Ha meglévő oldalait ellenőrzi vagy újakat hoz létre, kérdezd meg: ezt a képet igazolja-e:
A mobil képernyőn elfoglalt hely?
30KB, 50KB, 100KB stb. Hozzáadása az oldal méretéhez?
Robert Gaines, az amerikai, amerikai és webes alkalmazások fejlesztője, Kansas tanácsos:
“Mielőtt hozzáad egy képet egy weboldalhoz, döntse el, hogy valóban szüksége van-e rá; Ha tényleg hozzáadja az értéket. Minden hozzáadott kép lassítja a weboldalt, hatással a felhasználói élményekre és a keresési rangsorokra. Ha nincs szüksége egy képre, vágja le a zsírt!
A csúszka kép egy nagyszerű példa a weboldalra vágható képekről. Tanulmányok Azt mutatták, hogy a csúszkák nem rendelkeznek szignifikánsan pozitív hatással sem a konverziókra, sem a felhasználói élményekre – ezek felesleges felhők. ”
Hőlapok, felhasználói tesztelés és A / B tesztelés (lásd: E sorozat 1. része ), Hogy felmérje a képek felhasználói hatását. Pozitív, elhanyagolható vagy negatív?
Képek számítanak
Miután megvilágította azokat a képeket, amelyek nem adnak hozzá értéket, koncentráljon arra, hogy a maradék képeket nehezebbé tegye a pixelek / KB-k számára.
Raluca Budiu, a Nielsen Norman Group kutatási igazgatója szerint:
“Mivel a webes képek hosszabb időt vehetnek igénybe a mobileszközökön való betöltéshez, általában jó ötlet, ha információval rendelkeznek, és nem pusztán díszítő jellegűek. A felhasználók ritkán értékelik a szép képet, amely nem kapcsolódik egy cikkhez. Az e-kereskedelmi webhelyeket, különösen a jó képeket igénylik – az emberek ritkán vásárolhatnak, ha nem látják jól a terméket. ”
Esettanulmány: Unilever mobil készen álló hős kép
Az egyik vállalat, amely valóban kiaknázta a súlyát, a képek hasznosabbá tétele az Unilever.
A Cambridge University Inclusive Design csapattal együttműködve a cég minden márkaújságát átformálta minden márkája számára, hogy megkönnyítse a webes ügyfelek számára, hogy azonnal felismerjék és kiválasszák a megfelelő terméket, csak a vizuális felismerést használva, mivel gyorsítják a kiskereskedői termékkatalógust. ” Vegas stílusban “(azaz olyan eredményeken keresztül, mint a nyerőgépek tekercsei).
Az ötlet az, hogy a lényeges részletek – a márka, a terméktípus, a méret és a mennyiség – kiemelése a képen, a vásárlóknak nem kell minden példányt elolvasniuk.
Abban az esetben, ha kíváncsi vagy, a hős kép a “zsíros” kattintható / kattintható banner kép, gyakran egy karusszel, különösen a honlapok tetején, egy új termékkel, promócióval és cselekvésre való felhívással. A Mobile-Ready Hero Images a kisméretű miniatűr képek, amelyek a terméklisták egyik oldalán találhatók, akár egy kategóriában, akár egy keresést követően. Férfi dezodor.

Oliver Bradley, az Unilever globális eCommerce Experience Design igazgatója elmagyarázza:
“A Mobile-Ready Hero képeket kifejezetten az online kiskereskedelem számára hozták létre, hogy az elsődleges képként működjenek a keresési / kedvenc miniatűrök eredményei között. Úgy tervezték, hogy jól működjön az online kiskereskedelemre jellemző összes képernyőméretnél (16 mm mobilon, 23 mm-es táblán és 48 mm-en laptopon / asztalon).
Lehetővé teszik az online vásárló számára, hogy jobban felismerje a márkát, a formátumot, a változatot és a méretét, mivel végrehajtják a gyors függőleges görgetést, ami tipikus viselkedés, amikor átvizsgálja a termékek hosszú listáját mobil vagy táblagépen.
A képek nagyíthatók és / vagy kivághatók, így jobban olvashatóak és felismerhetők a márka és a variánsok. Portrécsomagoláson. Ha szükséges, a márkák hozzáadhatják a termék méretét vagy a tartalom számát a jobb alsó sarokban. Szükség esetén a terméktípust a jobb oldali csíkkal lehet hozzáadni (portrécsomagolás), vagy csíkként az alján (tájcsomagolás). Jobban kihasználja a helyet, mint egy hagyományos csomagolással. ”

Először 2014-ben mutatkozott be, az Unilever gyorsan haladt, hogy meggyőzze a kiskereskedőket 20 országban, köztük sok kiskereskedelmi óriást, pl. A Walmart, a CVS, a Walgreens, a Tesco és a Carrefour – bemutatja a továbbfejlesztett képeket az e-kereskedelmi webhelyekhez.
Néhány kiskereskedő, például az Asda.com (Walmart brit leányvállalata), minden Unilever terméket ma már Mobile-Ready Hero képen forgalmaznak.
Mi több, az Unilever a Cambridge csapatával a Mobile-Ready Hero képeket szabványosítottá tette: nyílt forráskódú és szabadon elérhető bármelyik versenytárs számára. És sok Unilever legnagyobb versenytársa is ezt tette, mondja Bradley:
“Rájöttünk, hogy egy sokoldalú kategória megoldást kell létrehoznunk ugyanolyan vizuális architektúrával és konzisztenciával az egész fórumon. Mióta örömmel látjuk, hogy a L’Oréal, a GSK, a P & G, a Kellogg, a Kimberly Clark és a J & J követik a megközelítést. ”
Az alábbi képen két képernyőkép látható. Az első egy dezodor keresést készít a Walmart.com-ról, és két Unilever márkát mutat be hősképekkel, a terméktípus és méret mellett, a termék lövés mellett. A két rivális terméknél sokkal nehezebb megállapítani a termék típusát vagy méretét, anélkül, hogy nagyítaná a terméket.
Mivel a Walmart nem tartalmazza ezeket a részleteket a forgalomból, ez a hős képeket kétszer is hasznos lehet.
A második kép egy shampoo-keresést rögzít az Asda.com-ból, bemutatva egy Unilever terméket (TreSemme), egy P & G terméket (Herbal Essences), mindkettőt a hőskép segítségével. A harmadik termék, egyben a P & G márkanév (Pantene), nem használja a hős képet. Miközben a hős képek sokkal nagyobb hatást fejtenek ki, az Asda a terméktípust és -méretet tartalmazza a reklámban … feltételezve, hogy a fogyasztó olvassa.

Tehát mi a hatása az UX-nek?
A projekt kezdetén az Unilever és a Cambridge csapat 3000 vásárlóval végzett kvantitatív kutatást (azaz interjúkat és felméréseket), majd több mint 100 vásárlóval végzett szemrevételezési tesztek során ellenőrizte megállapításait / munkáját. Webhelyet és a képeket a mobileszközökön a mobilon ellenőrizni.
Ez a felhasználói tesztelés jó helyzetbe hozta az Unilever-t, hogy megcáfolja a kiskereskedelmi üzletből származó kételkedőket.
“Néhány kiskereskedő azt állítja, hogy csomagcsomagok szükségesek az e-kereskedelemhez, mert a csomagolás melletti szöveges leírás minden olyan információt tartalmaz, amelyet nem lehet a fényképen beszerezni. De a szem követéséből tudjuk, hogy az e-kereskedelmi oldal 90% -át figyelmen kívül hagyják.
Tudjuk, hogy a vásárlók többsége nem zavarja a termék nevét, méretét vagy formátumát a kiskereskedők weboldalain vagy alkalmazásán. Ezért szinte minden vásárlónak, akit interjút készítettünk, véletlenül véletlenül vásárolt egy online terméket, ami kiderült, hogy nem a vártnál (különösen a méret). Ha egy csomag hasonlít a korábban használthoz, akkor nem zavarják meg ellenőrizni a szöveget.
Az online élelmiszerbolt lényege a kényelem és a megtakarítás. Ez nagyszámú termék kiválasztásáról szól, amilyen gyorsan csak tudnak. Mivel a szövegnek hősképekkel nem kell ellenőriznie, a vásárlást még gyorsabbá teszi.
Tudjuk, hogy ez igaz a hőskép által átadott konverziókból. Az A / B teszt eredményei elképesztőek voltak: a Magnum 24% -os emelését, a Simple 19% -os emelését és a Ben & Jerry 4% -os emelését. ”

Megközelíthetőség
A legfontosabb probléma bármilyen kép, de különösen a fontos szöveges adatokat tartalmazó kép, az, hogy láthatatlanok a látássérültek számára. Azok, akik nem látják jól vagy egyáltalán, használják a képernyő-olvasókat, hogy hangosan olvassák el a szöveget.
Nincs semmi baj a képek vagy a hősképek használatával abban a pontban, de elengedhetetlen, hogy a kép tartalmát vagy a webmásolaton és / vagy az alt címkékben írják (ezek a címkék leírják a képet egy képernyőolvasóra, de A láthatatlan olvasó számára láthatatlanok).
Általánosságban a hozzáférési szakértők ráncolják a szövegen belüli képek használatát, mivel a képernyőolvasók vakok az általa tárolt adatokra. Ezért például az elérhetőségi szempontból előnyösebb, ha az adatok táblázatait html táblázatokként készítik el, nem pedig egyszerűen a táblázat képének feltöltése – de ez mindig több időt vesz igénybe, és általában nem fog megjelenni jó.
Marco Zehe a Mozilla akadálymentesített evangélista és QA mérnöke:
“A mobil képeknek természetesen az alt szövegnek is meg kell felelniük, mint az asztalhoz. De segít, ha a képek érzékenyek, mivel a gyengén látók vagy az idős emberek számára előnyös lesz a nagyítás.
“Azonban a képernyőolvasók nem teszik a képfelismerést az interneten, mégis, így ha van szöveg a képen, akkor ez elérhetetlen lesz. Elviekben kerülni kell a képekről szóló szöveget. De ha a szöveg segít a fotók tisztázásában, különösen a gyengén látók számára, és mindaddig, amíg csak a másolatban és az alt szövegben megfogalmazott szövegeket ismeri fel, ez elfogadható. ”
Tehát, ha a szöveg valóban hozzáad egy értéket egy képhez, mint például a Mobile-Ready Hero Images esetében, akkor biztos lehet abban, hogy ez elfogadható, feltéve, hogy a másolatban és az alt tagben duplikált.
Tehát visszapillantva Walmart és Asda példáira a fenti képen:
A Wotherart Dove szagtalanító forráskódja tartalmazza az alt szöveget: “Dove Men + Care extra friss dezodor, 3 oz, Twin Pack”, amely leírja a terméket, a méretet és a mennyiséget. Az oldal másolata leírja a terméket, de nem tartalmazza a méretét vagy mennyiségét.
Az Asda TRESemme Sampon forráskódja a következő szöveget tartalmazza: “TRESemme Moisture Rich Shampoo Rollback”, amely leírja a terméket, és kínálja, de nem a méretét. A vásárlónak át kell kattintania, hogy felfedezze ezt az információt.

Ez a cikk egy három részből álló sorozat 2. része, amely arról szól, hogyan optimalizálhatja mobil webhelyének sebességét. Ellenőrizze a jövő héten a 3. részt, amely megvizsgálja, hogyan finomíthatja és újraformázhatja mobil webhelye képeit.
Vagy olvassa el az előző részletet: Hogyan optimalizálhatja mobil webhelyének sebességét: problémák tesztelése .
Ezt az oszlopot eredetileg a testvér oldalunkon tettük közzé, a ClickZ-t, és itt reprodukáltuk, hogy meghallgassák a közönségünket az SEW-n.

Andy Favell a Search Engine Watch újságírója a mobilon. London-alapú szabadúszó mobil / digitális tanácsadó, újságíró és webszerkesztő. Lépjen kapcsolatba vele LinkedIn Vagy Twitteren Andy_Favell .

Andy Favell a Search Engine Watch, web szerkesztő és mobil / digitális tanácsadó írója.

Szeretne maradni a legújabb keresési trendek tetején? A legfrissebb információkat és híreket kereshet a keresési szakértőktől.

Kapcsolódó olvasmány

Ez az oszlop meg fogja vizsgálni, hogyan lehet felismerni, elkerülni és orvosolni a problémákat a mobil videóval kapcsolatban, hogy a nézők a lehető legjobb élményt nyújtsák a videotartalmakkal kapcsolatban, és tartsák meg őket a videók megtekintésekor.

A Google fejlesztői jamboree-jában, a Google I / O-ban a múlt héten a kereső óriás számos nagy névkutatási tanulmányt és kényszerítő statisztikát mesélt két sikeres kezdeményezéssel a mobil web jobb és gyorsabbá tételéhez: Progressive Web Apps (PWA) és gyorsított Mobil oldalak (AMP).

A mobil videó a tartalom legfontosabb trendje, ahol a márkák mindenhol találkoznak az új és jövedelmező mobil videópiacon. A háromrészes sorozatunk 2. részében megnézzük az autoplaying videók vitatható témáját és azok hatását a mobil weboldal teljesítményére, valamint arra, hogy az audio hogyan késleltetheti az oldal sebességét.

A millenniumokkal összehasonlítva, akik mobil úttörők voltak, a Gen Z teensek – a jelenlegi 13-17 évesek – mobil indiánok. A Google gondolkodója által készített jelentés rámutatott a szokásaikra, preferenciáikra és a marketinghez fűződő jellegére.

Ha tetszett, kérlek oszd meg barátaiddal!