Případová studie Srovname.cz: jaký vliv má zrychlení webu na konverzní poměr?

Srovname.cz jsem pomáhal se zrychlením webu. Na mobilech se tím povedlo zvýšit konverzní poměr o jednu čtvrtinu.

Výchozí stav

Pomocí WebpageTest.org jsme měřili SpeedIndex a pomocí filmového pásu i rychlost zobrazení textového obsahu. Pro obě čísla platí, že čím jsou menší, tím lépe.

Nastavení WPT.org: Test Location = Praha, Browser = Chrome, Connection = 3G Slow, Chrome / Emulate Mobile = Nexus 5.

Udělali jsme si také testy největších konkurentů. Jejich nejlepší SpeedIndex vychází kolem 2 700 bodů a zobrazení textového obsahu kolem dvou vteřin. Obvykle se ale na jejich webech obsah zobrazí po tří- až osmivteřinovém čekání.

Jako cíl jsme si stanovili zobrazení textového obsahu pod 1,5 vteřiny.

Postup práce

Prošel jsem způsob načítání stránky a vytvořil seznam kroků ke zrychlení webu. Začali jsme od těch s největším efektem:

1. Oprava servírování CSS. Sjednotili jsme všechny styly do jednoho souboru a zmenšili jej. V druhém kroku pak nastavili proces vytváření kritického CSS. To vkládáme novým návštěvníkům přímo do HTML kódu a urychlíme tím zobrazení obsahu.
2. Oprava servírování Javascriptu. Zanalyzovali jsme skripty a ty, na které stránka nemusí čekat, nově posíláme jako asynchronní. Pomohlo také sjednocení a zmenšení velikosti JS díky refaktoringu, se kterým si kluci ze Srovname.cz dali práci.

Způsobu vykreslování stránky taky pomohl převod důležitých grafických komponent do SVG a jejich vložení přímo do HTML kódu. Prohlížeče tak pro podstatnou grafiku nemusejí posílat dotazy po pomalé síti.

V seznamu věcí k úpravě jsou i další body. Ty uvedené už ale stačily ke splnění hlavního cíle.

Kroky vypadají jednoduše, že? Vězte ale, že stály nezanedbatelné množství času a Srovname.cz v tomto není žádnou výjimkou. Další čas si vyžádalo nastavení firemního workflow tak, aby provedené úpravy nekomplikovaly další práci na webu.

A výsledek?

Konverzní poměr se na mobilech zvýšil o čtvrtinu

Čísla udávaná na WebpageTest.org se výrazně snížila:

Povedlo se díky tomu dosáhnout zrychlení vykreslení stránky:

Nejvíce zajímavý je ale samozřejmě dopad na obchodní ukazatele. Rychlé vyhodnocení po prvním kole optimalizace ukazuje vylepšení konverzního poměru na všech zařízeních:

Zdroj: Google Analytics. Srovnáváno období 14. 4. 2016 – 13. 4. 2017 se stejným o rok dříve. Měřeno na návštěvnosti v řádu vyšších stovek tisíc. U mobilů jde o vyšší řády desítek tisíc návštěv.