Případová studie Footshop: 2,5⨉ lepší rychlost načtení za rok a půl spolupráce

Footshop během spolupráce s PageSpeed.cz za několik měsíců násobně zrychlil své weby a zlepšil tak uživatelský prožitek.

Jste zvědaví, jak jsme postupovali a k čemu společně došli?

Footshop je výrazná značka, kterou neminete.

Footshop je e-shop s teniskami a streetwearovým oblečením, který funguje u nás, ale také na Slovensku, v Maďarsku, Rumunsku a dalších zemích střední a východní Evropy. Zaměřuje se na prémiové a limitované produkty, díky nimž si vybudoval silnou komunitu fanoušků.

Pojďme se nyní podívat, jak jsme Footshopu pomohli zrychlit jejich weby.

V prvé řadě jsme chtěli zjistit, které metriky jsou jsou pro klienta nejdůležitější. Naše analýza ukázala, že jde o TTFB (rychlost odezvy serveru) a pak CLS (stabilita layoutu) a LCP (rychlost načtení) ze sady Core Web Vitals.

Optimalizujeme cílové metriky

Když máme dobře nastavenou analytiku a kvalitní data, jdeme optimalizovat. Od konce roku 2023 jsme se postupně zaměřovali na jednotlivé metriky rychlosti podle jejich priority:

• Rychlost odezvy backendu (TTFB) a rychlosti načtení (LCP) – tým vývojářů z Footshopu se zaměřoval na ladění serverů, my jsme pomáhali s frontendovou performace, například pomocí optimalizace přechodu z klientského vykreslování cachovaného pomocí Service Workeru k serverovému renderingu.
• Zrychlení odezvy na interakce (INP) – v březnu 2024 přišel Google s metrikou INP. Rychlost odezvy na interakce nebyla ideální a my jsme začali pracovat na analýze SpeedSprint, jejímž výstupem bylo několik konkrétních úprav.
• Ladění nechtěných posunů stránky (CLS) – další fáze práce koncem roku 2024 spočívala v odladění renderování některých komponent a snížení hodnot metriky CLS.

Jednu ukázkovou optimalizaci vidíte na obrázku.

Optimalizace INP pomocí ladění výkonu výběru varianty na detailu produktu.

Výsledky spolupráce: až několikanásobně lepší metriky

S dosaženými změnami metrik a hlavně uživatelského prožitku můžeme být spokojení.

Asi za rok a půl stále běžící spolupráce došlo k následujícím zlepšením metrik:

• Footshop.cz má nyní 2,5⨉ lepší rychlost načtení (LCP) na mobilech.
• Hodnota metriky posunů layoutu (CLS) ze zlepšila více než 8⨉.
• Odezvy na interakce (a metriku INP) jsme zlepšili o 30 %.

Změny v metrikách LCP a CLS od začátku spolupráce.

Co na to říkají lidé z Footshopu?

Spolupráce s Footshopem nás baví, nejen pro značku samotnou, ale i pro kvalitu celého týmu a jeho tah na branku. Jsme proto vážně moc rádi, že spolupráci s námi dobře hodnotí i pánové z Footshopu.

„Moc fajn spolupráce, která do našeho malého týmu přinesla naskillovaného parťáka (= tým PageSpeed.cz). Ten nepřišel jen s know-how, ale hlavně s konkrétními tipy na úpravy, které jdou odbavovat po částech, ale přitom mají velký výsledný efekt.“

Jiří Hykel, frontend vývojář

Daniel Urban, CIO Footshopu, dodává:

„Na spolupráci s PageSpeed.cz oceňuji rychlou orientaci ve web performance a jasnou komunikaci i pro netechnické lidi. Největší přínos je unikátní know-how. K tomu bychom se sami těžko dostali.”

Daniel Urban, CIO Footshopu

Takto úspěšná spolupráce na optimalizaci webu vyžaduje vždy několik splněných podmínek na obou stranách. Pojďme si je shrnout:

1. Klient bere rychlost jako důležitou součást uživatelského prožitku a je ochotný do ní investovat, protože ví, že se mu investice vrátí.
2. Je nastavené kvalitní měření a máme dostatek dat. (Zde náš monitoring a SpeedCurve RUM)
3. Naši poradci mohou s týmem aktivně a intenzivně komunikovat, navržené úpravy dostávají prioritu ve vývojářských plánech.
4. Spolupráce není jednorázová, ale funguje dlouhodobě, takže je možné vyhnout se opětovnému zhoršení a tým klienta průběžně vzdělávat.

Děkujeme Footshopu za dosavadní plodnou spolupráci a těšíme se na její pokračování!