Majitelka menšího e-shopu s outdoorovým oblečením zaznamenala zvláštní čtvrtletí. Prodeje na počítači držely, tržby přesto klesaly. Když si data poprvé rozdělila podle zařízení, bylo to jasné. Většina návštěv přicházela z telefonů a skoro celá ztráta byla právě tam.
Nejdřív zkoušela to, co zkouší většina: jinou barvu tlačítek, nové texty, výraznější bannery. Nic se nezměnilo. Skutečná příčina byla nenápadnější. Produktové stránky byly na mobilu těžké a pomalé, tlačítko do košíku bylo až pod několika obrazovkami fotek a popisů a hlavní fotky měly velikost, která dávala smysl na velkém monitoru, ne na telefonu v horách se slabým signálem.
U outdoorového vybavení je to obzvlášť zrádné. Zákazník je nejvíc rozhodnutý přesně na produktové stránce a přesně ta stránka je nejtěžší: galerie plná fotek, videa, tabulky velikostí, recenze. Nejvyšší zájem se potká s nejpomalejší stránkou.
Proč produktová stránka na mobilu prodává hůř
Problémy s konverzí na mobilu mají nejčastěji tři nenápadné příčiny: pomalé načítání, tlačítko do košíku, které zmizí z obrazovky, a zbytečně těžké fotky produktů. Ani jedna z nich nevypadá jako chyba, ale dohromady umí mobilní konverzi výrazně stáhnout.
Postup je ve třech krocích: změřit rychlost produktových stránek přímo pro mobil, zajistit, aby bylo tlačítko do košíku na telefonu vždy po ruce, a zmenšit fotky na velikost, kterou mobil opravdu potřebuje.
Proč se problém na mobilu tak špatně hledá
Jedno číslo za všechna zařízení
Většina přehledů ukazuje konverzi jako jedno číslo za všechna zařízení. Klesající konverze na mobilu se tak zprůměruje s počítačem a výsledek pořád vypadá přijatelně.
Testování na počítači
Web se obvykle kontroluje v prohlížeči na počítači, případně zúženém tak, aby vypadal jako telefon. To zachytí jen malou část problémů, na které zákazník narazí na skutečném telefonu s pomalejším připojením a menší obrazovkou.
Nenápadné přírůstky
Každá úprava šablony a každý nový doplněk může stránku o něco zpomalit, aniž by se změnil její vzhled. Na počítači s rychlým internetem si toho nikdo nevšimne. Na telefonu se to sčítá.
Pohodlná vysvětlení
Když konverze na mobilu klesne, je snadné to svést na horší návštěvnost, sezónu nebo konkurenci. Skutečná příčina přitom může celou dobu sedět v rychlosti, umístění tlačítka nebo velikosti fotek.
Rychlost produktové stránky na mobilu
Co měří Core Web Vitals
Google hodnotí, jak stránka působí při načítání a používání, sadou metrik Core Web Vitals. Sledují tři věci:
- rychlost načtení hlavního obsahu, tedy jak brzy zákazník uvidí to podstatné
- odezvu na interakci, tedy jak rychle stránka zareaguje na klepnutí
- stabilitu rozvržení, tedy jestli se obsah během načítání neposouvá
Google tyto signály bere jako součást celkového dojmu ze stránky, ne jen jako rychlost. Pomalá stránka na mobilu tak může škodit zároveň viditelnosti ve vyhledávání i konverzi.
Nejčastější viníci
Většina problémů s rychlostí na mobilu má opakující se příčiny:
- velké hlavní fotky a bannery
- automaticky přehrávaná videa
- příliš mnoho doplňků, z nichž každý přidává vlastní skripty
- externí písma a měřicí kódy načítané z dalších serverů
- widgety třetích stran, například chaty nebo recenze, které se načítají hned na začátku
Nic z toho v souhrnném přehledu konverzí neuvidíte. Ukáže se to až v měření rychlosti pro mobil.
Jak rychlost změřit
Otestujte několik svých produktových stránek v nástroji PageSpeed Insights a dívejte se na výsledek pro mobil, ne pro počítač. Výsledky se mezi mobilem a počítačem často výrazně liší. Pokud máte e-shop ověřený v Google Search Console, najdete tam přehled Core Web Vitals, který ukazuje, jak stránky fungují u skutečných návštěvníků.
Testujte hlavně produkty s nejvyšší návštěvností, ne úvodní stránku. Právě na produktu se rozhoduje o nákupu.
Tlačítko do košíku musí být vždy po ruce
Na telefonu se fotky, popis, parametry a recenze skládají pod sebe do jednoho sloupce. Tlačítko do košíku se tak snadno ocitne pod několika obrazovkami obsahu. Zákazník, který si přečte recenze úplně dole, se musí vracet nahoru hledat tlačítko. Část lidí to neudělá.
Pomůže plovoucí lišta s tlačítkem do košíku, která zůstává vidět při scrollování. Je to malá úprava s velkým dopadem na mobilu. U některých šablon Shoptetu ji lze řešit úpravou šablony, v katalogu Shoptet Doplňky jsou také doplňky třetích stran, které plovoucí nákupní lištu přidávají. Před instalací ověřte kompatibilitu s vaší šablonou a po instalaci zkontrolujte rychlost stránky.
Kromě plovoucí lišty zkontrolujte:
- velikost tlačítka, aby se na něj dalo pohodlně trefit palcem
- odstup od ostatních prvků, aby se neklepalo omylem jinam
- viditelnost ceny a dostupnosti vedle tlačítka
Fotky produktů na mobilu
Fotky jsou často nejtěžší částí produktové stránky a zároveň nejsnáze opravitelnou.
Co dělá Shoptet sám
Podle blogu Shoptetu se od května 2024 obrázky produktů, loga a bannery automaticky převádějí do formátu WebP při doručení do prohlížeče zákazníka. Fotky tedy nahráváte v běžných formátech, třeba JPG nebo PNG, a převod na úspornější formát proběhne sám.
Co musíte hlídat vy
Automatický převod formátu neznamená, že na velikosti nahraných fotek nezáleží. Shoptet doporučuje držet velikost fotek produktů pod 1 MB, ideálně v nižších stovkách kB. Fotka nafocená profesionálním fotoaparátem a nahraná bez úprav může mít několikanásobně víc.
Praktická pravidla:
- fotky před nahráním zmenšete na rozměr, který šablona opravdu zobrazuje
- pro fotky produktů používejte JPG, PNG si nechte pro grafiku s průhledností
- omezte počet fotek, které se načítají hned na začátku
- vyplňte popisek obrázku, který slouží jako alternativní text pro vyhledávače i čtečky obrazovky
Cílem není fotky odebírat. Cílem je posílat na telefon fotky ve velikosti, kterou telefon potřebuje.
Postup krok za krokem
1. Rozdělte data podle zařízení
Porovnejte konverzi, přidání do košíku a dokončení objednávky zvlášť pro mobil a počítač. Pokud mobil výrazně zaostává, pokračujte dalšími kroky.
2. Změřte rychlost tří hlavních produktů
V PageSpeed Insights otestujte tři nejnavštěvovanější produkty a zapište si výsledky pro mobil. To je váš výchozí stav.
3. Projděte produkty na skutečném telefonu
Vypněte Wi-Fi a otevřete stejné produkty na vlastním telefonu. Sledujte, jak rychle uvidíte fotku a cenu, jestli se obsah při načítání posouvá a kde je tlačítko do košíku, když scrollujete k recenzím.
4. Zmenšete fotky hlavních produktů
Zkontrolujte velikost nahraných fotek u nejnavštěvovanějších produktů a příliš velké nahraďte zmenšenými verzemi.
5. Projděte doplňky
Sepište si všechny nainstalované doplňky a u každého se zeptejte, jestli ho opravdu potřebujete. Doplněk, který nikdo nepoužívá, jen zpomaluje.
6. Zajistěte viditelné tlačítko do košíku
Pokud tlačítko na mobilu mizí z obrazovky, řešte plovoucí lištu úpravou šablony nebo doplňkem.
7. Měřte znovu po každé změně
Po každé úpravě šablony a instalaci doplňku otestujte rychlost znovu a porovnejte ji s výchozím stavem.
Proč na tom záleží hlavně u outdooru, módy a dalšího vizuálního zboží
Čím víc fotek, videí a tabulek na produktové stránce máte, tím víc na rychlosti záleží. U outdooru, oblečení, obuvi nebo nábytku zákazník potřebuje hodně vizuálních informací, takže tyto stránky bývají nejtěžší. Zároveň jsou to stránky, kde se rozhoduje o nákupu.
Řešením není ubrat informace. Řešením je načítat je chytře: nejdřív hlavní fotku, cenu a tlačítko, zbytek galerie a video až ve chvíli, kdy je zákazník opravdu potřebuje.
Typické chyby
- Oprava barev a textů místo rychlosti. Kosmetické úpravy nevyřeší pomalou stránku.
- Měření jen pro počítač. Mobilní výsledek bývá výrazně horší.
- Testování jen úvodní stránky. O nákupu se rozhoduje na produktu.
- Nahrávání fotek přímo z fotoaparátu. Zbytečně těžké soubory zpomalí stránku.
- Doplněk na všechno. Každý doplněk může přidat další skripty.
- Kontrola jednou a dost. Každá změna šablony nebo nový doplněk může rychlost zhoršit.
Časté otázky
Proč e-shop prodává dobře na počítači, ale ne na mobilu?
Protože mobil a počítač narážejí na jiné překážky. Stránka, která se rychle načte na rychlém připojení v kanceláři, může být na telefonu pomalá, a tlačítko, které je na širokém monitoru hned vidět, může na úzkém displeji zmizet pod obsahem.
Převádí Shoptet obrázky do WebP automaticky?
Podle blogu Shoptetu ano, od května 2024 se obrázky produktů, loga a bannery převádějí do WebP při doručení do prohlížeče. Velikost nahraných fotek je ale pořád potřeba hlídat.
Co je plovoucí lišta s tlačítkem do košíku?
Lišta s tlačítkem do košíku, která zůstává vidět při scrollování, takže zákazník nemusí tlačítko hledat. Na Shoptetu se řeší úpravou šablony nebo doplňkem.
Jak často kontrolovat rychlost e-shopu?
Po každé úpravě šablony a instalaci doplňku a jinak aspoň jednou měsíčně u hlavních produktů.
Praktický checklist
- konverzi sleduji zvlášť pro mobil a počítač
- rychlost hlavních produktů měřím v PageSpeed Insights pro mobil
- sleduji přehled Core Web Vitals v Google Search Console
- produkty jsem prošel na skutečném telefonu bez Wi-Fi
- tlačítko do košíku je na mobilu vždy po ruce
- fotky produktů mají rozumnou velikost, ideálně v nižších stovkách kB
- u fotek je vyplněný popisek obrázku
- mám sepsané doplňky a nepotřebné jsem odinstaloval
- po každé změně šablony nebo nového doplňku měřím rychlost znovu
Autor: Jan Bartoníček