Každá sekunda načítání webu stojí vaši firmu peníze. A příliš velké obrázky jsou často hlavním viníkem. Zatímco vy obdivujete krásné fotografie produktů v plném rozlišení, návštěvníci čekají, ztrácejí trpělivost a odcházejí ke konkurenci. Pojďme si říct, proč komprimovat obrázky.
Obrázky jako brzda vašeho webu
Návštěvník klikne na odkaz na váš web. Za 1 sekundu se zobrazí záhlaví. Za 3 sekundy vidí text. Za 5 sekund se stále načítá hlavní fotografie. Za 8 sekund odchází pryč. Proč? Protože ta krásná fotografie má 4 MB místo rozumných 150 KB.
Průměrná webová stránka dnes “váží” kolem 2-3 MB. Z toho tvoří obrázky 50-60 % celkové velikosti. Jeden nekomprimovaný obrázek z fotoaparátu má běžně 3-6 MB. Když jich máte na stránce pět, už mluvíme o 15-30 MB dat. Na rychlém připojení to trvá několik sekund, na mobilním internetu to znamená minuty čekání.
Prohlížeč musí každý obrázek stáhnout, dekódovat a vykreslit. Velké soubory zabírají více času při stahování, více paměti při zpracování a zatěžují procesor. Výsledek je ten, že stránka zamrzá, scrollování se škube, uživatel je frustrovaný.
Co se děje v hlavě návštěvníka?
Váš potenciální zákazník přijde na web a čeká. Po dvou sekundách začíná být nervózní. Po třech sekundách přemýšlí, jestli má problém s připojením. Po pěti sekundách klikne zpátky a zkusí konkurenci. Statistiky to potvrzují jasně: 53 % mobilních uživatelů opustí stránku, která se načítá déle než 3 sekundy.
Každá sekunda zpoždění stojí e-shopy v průměru 7 % konverzí. Amazon spočítal, že pouhých 100 milisekund zpoždění stojí firmu 1 % zisku. U malého e-shopu s obratem 100 000 Kč měsíčně znamená pomalý web ztrátu 7 000 Kč měsíčně. Za rok to dělá 84 000 Kč ztráty. A to jen kvůli nekomprimovaným obrázkům.
Uživatelé dnes očekávají okamžitou odezvu. Vyrostli na rychlých aplikacích a stránkách. Tolerance k čekání klesá rok od roku. Web, který se načítá 5 sekund, dnes působí zoufalým dojmem, i když před deseti lety to byla norma.
Google vás pozoruje a hodnotí
Rychlost stránky přímo ovlivňuje pozici ve vyhledávání. Google od roku 2010 oficálně zahrnul rychlost načítání mezi faktory ovlivňující SEO. Pro mobilní vyhledávání to platí dvojnásob od roku 2018.
Core Web Vitals představují sadu metrik, které Google používá k hodnocení uživatelské zkušenosti. Largest Contentful Paint (LCP) měří, jak rychle se načte hlavní obsah stránky. Optimálně by to mělo trvat méně než 2,5 sekundy. Velké obrázky LCP výrazně zhoršují.
Když váš web běží pomalu, Google vyhodnotí uživatelskou zkušenost hůře. Stránky s lepším skóre dostanou přednost ve výsledcích vyhledávání. Konkurence s komprimovanými obrázky vás předežene, i když máte lepší obsah.
Crawlery Googlu mají omezený čas na každý web. Když se stránky načítají pomalu, robot nestihne projet tolik obsahu. Efektivně to znamená, že část vašeho webu Google vůbec nezaindexuje. Komprimované obrázky uvolní kapacitu pro indexování dalšího obsahu.
Čísla, která mluví jasně
Web s průměrnou stránkou 3 MB se načte na standardním připojení asi 5 sekund. Stejný web s komprimovanými obrázky (celková velikost 800 KB) se načte za 1,2 sekundy. To je rozdíl 3,8 sekundy.
Zmenšení doby načítání z 5 na 2 sekundy zvýší konverzní poměr v průměru o 74 %. U e-shopů to znamená téměř dvojnásobný počet prodejů při stejné návštěvnosti.
Komprese kvalitní fotografie z 3 MB na 200 KB (tedy 15× menší) vytvoří vizuálně identický výsledek. Lidské oko nerozpozná rozdíl, ale načítání je 15× rychlejší.
Bounce rate (míra okamžitého opuštění) klesá o 32 % při zrychlení načítání z 3 na 1 sekundu. Návštěvníci zůstávají, prohlížejí si víc stránek a častěji dokončí nákup nebo vyplní formulář.
Mobilní svět má jiná pravidla
- Víc než 60 % návštěvníků dnes přichází z mobilních zařízení. Mobilní připojení má výrazně nižší rychlost než domácí WiFi. Co se na počítači načte za sekundu, trvá na mobilu třeba pět sekund.
- Mobilní data stojí peníze. Když váš web spotřebuje 10 MB dat místo 2 MB, uživatel to doslova zaplatí. V zahraničí na roamingu to vnímá ještě citlivěji. Návštěvník si rychle najde konkurenční web, který šetří jeho data.
- Mobily mají slabší procesory než počítače. Dekódování velkých obrázků zabere víc času a vybije baterii rychleji. Optimalizované obrázky šetří nejen data, ale i výdrž baterie návštěvníka.
- Responzivní design načítá menší verze obrázků pro mobilní zařízení. Bez správné komprese ale i tyto „menší“ verze mohou být zbytečně velké. Kombinace správných rozměrů a komprese dělá ten skutečný rozdíl.
Zlatá střední cesta
Nekomprimovat znamená ztrácet návštěvníky kvůli pomalému webu. Komprimovat příliš agresivně znamená ztrátu kvality a neprofesionální dojem. Ideální nastavení se pohybuje mezi 75-85 % kvality pro fotografie.
Testování na reálných zařízeních odhalí optimální hranici. Otevřete stránku na mobilu, na tabletu, na notebooku. Vypadají obrázky dobře? Načítá se to rychle? Pak máte správné nastavení.
Různé typy obrázků snášejí různou míru komprese. Produktové fotky na bílém pozadí vydrží agresivnější kompresi než portréty. Grafika s textem potřebuje vyšší kvalitu než pozadí.
Stačí pár hodin práce a váš web poběží výrazně rychleji. Projděte všechny stránky, zkomprimujte obrázky a zaveďte změny. Pak sledujte statistiky. Uvidíte nižší bounce rate, delší dobu na stránce a víc konverzí. Rychlý web není luxus, ale dnes už nutnost. A komprimované obrázky představují nejsnazší cestu, jak toho dosáhnout.
Související příspěvky
