Srovname.cz: o 25 % více konverzí na mobilech díky zrychlení
Srovname.cz je český cenový srovnávač, který pomáhá uživatelům najít nejvýhodnější nabídky napříč e-shopy.
Mobilní web Srovname.cz jsme v roce 2016 zrychlili tak, že se konverzní poměr na mobilech zvedl o čtvrtinu. To nejsou jen čísla v reportech, ale skutečné peníze na účtu.
Rychlost webu přímo ovlivňuje příjmy firmy. Není to jen technická vychytávka, ale obchodní nutnost. Rychlejší web vám přinese vyšší konverze, levnější PPC, vyšší šance v SEO a spokojenější návštěvníky.
Konkrétní úpravy: chirurgické zásahy místo revoluce
Srovname.cz jsme rozebrali na součástky a zaměřili se na nízko visící ovoce. Například to následující:
- Štíhlejší CSS: méně souborů, vyšší rychlost
Spojili jsme všechny styly do jednoho souboru a zmenšili ho. Kritické CSS (styly potřebné pro zobrazení první obrazovky) jsme vložili přímo do HTML kódu stránky. - Paralelní zpracování díky asynchronnímu JavaScriptu
Problém byl, že se veškerý JavaScript načítal postupně a blokoval zobrazení obsahu. Změnili jsme to na asynchronní načítání, takže se důležitý obsah zobrazí hned a méně důležité skripty se načtou na pozadí. Uživatel vidí stránku okamžitě, interaktivní prvky se doladí později. - SVG grafika: Vektorové ikony místo pixelových obrázků
Hlavní ikony a komponenty jsme převedli na SVG a vložili přímo do HTML kódu. Prohlížeč tak nemusel stahovat desítky malých obrázků zvlášť.
Spolupráce s týmem Srovname.cz byla perfektní. Úpravy probíhaly hladce a v reálném čase.
Měřitelné výsledky: stránky rychlejší až o 80 %
Optimalizace bez měření je jen střelba naslepo. Pro měření jsme tehdy používali hlavně WebPageTest.org a metriku Speed Index.
Speed Index (SI) měří, jak rychle se obsah stránky postupně zobrazoval uživateli. Čím nižší číslo, tím rychlejší načítání. Tato metrika byla důležitá v roce 2016, dnes už je zastaralá – místo ní používáme modernější indikátory rychlosti načtení jako je Largest Contentful Paint (LCP).
Jak dopadly optimalizace Srovname.cz?
| Stránka | Speed Index před | Speed Index po | Zlepšení |
|---|---|---|---|
| Úvodní stránka | 6 664 ms | 1 340 ms | 80 % rychleji |
| Seznam produktů | 3 654 ms | 2 275 ms | 38 % rychleji |
| Detail produktu | 4 001 ms | 1 506 ms | 62 % rychleji |
Obsah se na mobilu začal zobrazovat pod 1,5 vteřiny místo původních šesti sekund. To je rozdíl, který uživatel pozná na první pohled.
Syntetické metriky tedy ukázaly dramatické zlepšení. Ale co na to řekli uživatelé?
Konverze: kde se ukáže skutečná hodnota
Konverzní poměr na webu Srovname.cz ukazuje, kolik lidí ze srovnávače proklikne na detail e-shopu. Jak se po optimalizaci změnil?
| Zařízení | Změna konverzního poměru |
|---|---|
| Desktop | +1,3 % |
| Tablet | +4,5 % |
| Mobil | +24,8 % |
Na mobilu jsme dosáhli zvýšení konverzního poměru o téměř 25 %, což je skvělé.
Zdroj dat: 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.
V případě Srovname.cz jsme měli výhodu, že se na webu v té době dělaly jen minimální další úpravy, takže vliv rychlosti je zde vidět v takřka ryzí podobě.
Co dál? Optimalizace není jednorázová akce
Rychlost webu není cíl, který se dosáhne jednou a pak se na něj zapomene. S vývojem každého webu se totiž rychlost více či méně zhoršuje.
Rychlost by měla být součást vašich firemních procesů, jinak platíte zbytečně.
Tým v PageSpeed.cz vám umí pomoci automatizovaným monitoringem, dozorem specialistů, školeními nebo vysoce expertními službami jako je zhodnocení vlivu rychlosti na byznys.
Optimalizace Srovname.cz ukázala, že rychlost webu není technická hračka, ale obchodní výhoda. Zvlášť na mobilu platí: rychlejší web = více peněz.
Poznámka: Optimalizaci Srovname.cz v roce 2016 provedl Martin Michálek, který nyní vede tým PageSpeed.cz. Původní článek najdete na Vzhůru dolů.