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.

Úvod Seznam Detail
SpeedIndex 6 664 3 654 4 001
Obsah 6 s 3 s 4 s

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:

Úvod Seznam Detail
SpeedIndex před 6 664 3 654 4 001
SpeedIndex po 1 340 2 275 1 506

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

Srovname.cz - před optimalizací se obsah zobrazil kolem šesté vteřiny. Po ní už kolem první.

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:

Desktop Tablet Mobil
Konverzní poměr + 1,3 % + 4,5 % + 24,8 %

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.

Chcete pomoci se zrychlením webu? Pošlete své vývojáře na školení Optimalizace rychlosti načítání nebo se mi ozvěte.

Komentáře

comments powered by Disqus

Podobné články

zařazené v kategorii Rychlost načítání.

Atributy responzivních obrázků: srcset a sizes

23. 5. 2017 v příručce

Nové atributy elementu img, které řeší potřebu autorů stránek zobrazovat v různých stavech responzivního designu různé varianty obrázků. Přečtěte si zcela novou verzi článku.

Kompletní průvodce obrázky v responzivním designu

17. 5. 2017 v příručce

V responzivním designu často potřebujeme volit mezi různými variantami jednoho obsahového obrázku.

Vydal jsem nový e-book: „Vzhůru do (responzivního) webdesignu“

E-book „Vzhůru do (responzivního) webdesignu“

E-book „Vzhůru do (responzivního) webdesignu“
Jak navrhovat a implementovat responzivní UI?

Více informací