9 možností, jak zrychlit web a zvýšit tím konverze

Viceprezidentka Googlu Marissa Mayer se zeptala uživatelů, zda chtějí ukazovat místo 10 výsledů na stránce 30. Většina souhlasila. Stránky se  zpomalily o půl sekundy. A o 20 % se snížila návštěvnost.

S podobnými výsledky se setkal:

  • Amazon (prodleva 0,1 sekundy znamenala snížení obratu o 1 %),
  • Walmart (zrychlení o 1 sekundu znamenalo zvýšení konverzního poměru o 2 %),
  • Tagman (zpomalení o 1 sekundu znamenalo snížení obratu o 7 %).

Navíc Matt Cuts z Googlu prohlásil, že rychlost stránek je jeden z faktorů ovlivňující pozici vaší stránky ve výsledcích vyhledávače.

A pokud se vám stránka e-shopového produktu nenahraje do 3 sekund, tak ztrácíte 50 % návštěvníků. Na mobilu ztratíte 74 % návštěvníků, pokud se stránka nenahraje do 5 sekund.

Tak teď jsem vás postrašil a jdeme to opravit.

Jak zjistím rychlost svého webu?

80-90 % problémů s rychlostí stránek je v samotném kódu stránek. Takže se (zatím) vykašlete na optimalizaci databáze a řešte to důležité.

A jak zjistíte, co je to důležité? Pomocí těchto nástrojů:

Google Page Speed

Základní nástroj od Googlu včetně tipů.

Google Page Speed

Pingdom Website Speed Test

Dostanete nejenom bodové hodnocení, ale i přehledné schéma, jak se nahrávají jednotlivé prvky pomocí tzv. vodopádového schématu.

Pingdom vodopádový graf nahrávání stránek

GTmetrics

Tento nástroj kombinuje YSlow od Yahoo! a PageSpeed od Googlu. Vše přehledně na jednom místě.

GT metrics

11 možností zrychlení stránek

Seřadil jsem možnosti podle toho, jak často se problém vyskytuje a jak jednoduché je ho odstranit. Pravděpodobně na tohle budete potřebovat programátora.

1. Optimalizace obrázků

Compressor.io

Většinu dat vašeho webu zabírají obrázky.

  1. Obrázky ukazujte v originální velikosti. Nezmenšujte je pomocí html.
  2. Ukládejte obrázky s kompresí cca 50-70%.
  3. Pro fotky použijte jpg, pro čárovou grafiku nebo „placaté“ barvy gif, pro obrázky s průhledností png.
  4. Z obrázků vyhoďte metadata.
  5. Malé obrázky (ikony) sdružte do jednoho a použijte css pozicování.
  6. Zkuste použít speciální nástroje na optimalizaci obrázku – tiny PNG, Compressor.io
  7. Použijte nahrávání obrázků pod ohybem, jen když tam lidi doskrolují (tzv. lazy load)

Obrázky takto můžete zmenšit o cca 40-60 %.

2. Zapnutí komprese (gzip, deflate)

Stejně tak, jako používat zip pro soubory v e-mailu, můžete použít něco podobného na vašem web serveru. Dokážete takto zmenšit prezentaci až o 70 % bez ztráty květinky. Navíc je to přidání jedné řádky v souboru htaccess, takže vám to potrvá i s uděláním kafe 5 minut.

Zkontrolujte si, zda váš server má zapnutou gzip kompresi.

3. Optimalizace javascriptu (js) a kaskádových stylů (css)

Kaskádové styly:

  • vyhoďte nepoužívaný kód (použijte CSS Lint),
  • sdružte více css souborů do jednoho,
  • u obsahu stránek nad ohybem vnořte css přímo do stránek (doporučení Googlu).

Javascript:

  • dejte na konec stránky,
  • sdružte více souborů do jednoho.

4. Zredukování elementů na stránce (http requests)

Lings cars

Čím více prvku na stránce máte, tím častěji probíhá komunikace se serverem a tím později uvidíte webovou stránku. Snažte se tak:

  • zredukovat počet prvků na stránce,
  • stejné prvky sdružit do jednoho (malé obrázky, css, js),
  • mít stejný prvek externě a odkazovat na něj odevšad.

Stejně tak to znamená určitou střídmost. Takže co nejméně zbytečných legrací v javascriptu vč. knihoven (jquery, mootools). Maximálně 3 řezy písma v Google fonts nebo použití web-safe varianty písma (Arial, Helvetica). Používání cookies jen tam, kde je to opravdu nutné atd. Vypínání A/B testů po dosažení statistické validity.

5. Zapnutí mezipaměti (cache)

Část redakčních systémů umožňuje uložit poslední verzi stránek (WP Super Cache pro WordPress), aby se nemusela generovat pokaždé znovu. Ukáže se tak už vygenerovaná statická stránka a dosáhnete tak dramatického zrychlení stránek (v řádu násobků). Poslední dobou se objevují i generátory statických stránek.

Taky zkuste nastavit tzv. Expiry headers. Říkáte tím prohlížeči, jakou mají životnost jednotlivé elemeny a kdy je potřeba je stáhnout znova.

6. Distribuce obrázků na více serverů (CDN)

content delivery network

Prohlížeč stahuje soubory vždy po jednom. Pokud je ale dáte na jinou doménu, tak se stahují paralelně. Můžete toho využít pro umístění obrázků, videí, pdf atp. pomocí CDN (content distribution network). Soubory se také stahují ze serveru, který je nejblíže uživateli, takže se nahrávání dále zrychluje.

7. Vyčištění a minifikace kódu stránky

Zkuste psát kód stránky co nejstřídměji. Budete se v něm lépe orientovat, snadněji ho upravovat a výsledná stránka se bude rychleji nahrávat.

To například znamená, že místo obrázkových tlačítek použijete css tlačítka, že vyhodíte nepoužitý kód vč. komentářů a výsledný kód minifikujete. Může se stát, že se výsledné stránky budou zobrazovat nesprávně, tak to určitě odzkoušejte. Třeba pomocí BrowserShots.

8. Omezení množství přesměrování

žabka na vodě

Občas máte na webu stránku, která se přesunula. Pak musíte návštěvníkům (a vyhledávači) říct, kam se přesunula. Používá se pro to tzv. 301 přesměrování. Každé přesměrování ale zpomaluje nahrání cílové stránky. Tak s tím prosím šetřete. Použijte na to nástroj ScreamingFrog.

9. Rychlejší hosting

Někdy se vám vyplatí nový hosting. Ideálně s vlastním serverem, případně optimalizovaný pro program, který používáte. Existují např. hostingy speciálně pro WordPress.

Hezké shrnutí a podrobné návody od Varvy.com.

Výsledky, které můžete čekat

Firma Intuit prezentovala případovou studii, kde se snížila dobu nahrání stránky z 15 sekund na 3,6 sekundy (ppt). Včetně všech kroků, a jak to ovlivnilo obchodní výsledky firmy. Takže pokud nekliknete na nic jiného, tak tohle určitě stojí za to.

Zrychlení Intuit

zrychlení zvýšení konverze
z 15 s na 7 s +3 %
ze 7 s na 5 s +2 %
ze 4 s na 3 s +1 %

Závěr

Snad jsem vás přesvědčil, že rychlost stránek je důležitá. Nicméně důležitější je obsah. Pokud návštěvníka stránek nepřesvědčíte o koupi, tak můžete mít nejrychlejší stránky na světě a nebude vám to nic platné.

Takže používejte selský rozum. Pokud si myslíte, že jej máte, tak se zeptejte maminky. Pokud si nejste jistí, tak ho pravděpodobně nemáte :).

 

Trackbacks/Pingbacks

  1. Mobilní UX checklist pro e-shopy | ILINČEV | MOJE TÉMATA - 17. březen 2017

    […] Zrychlete nahrávání Obsah první obrazovky by se vám měl nahrát do 2 sekund. I na mobilu. Tady je pár tipů, jak stránky zrychlit. […]

  2. Jak udělat dobrý první dojem – Jedujedu.cz - 16. listopad 2018

    […] rychlost nahrávání, […]

Napsat komentář

Powered by WordPress. Designed by WooThemes