Jak Fotocasa opravila INP a zvýšila konverze o 27 %

Podrobná případová studie o tom, jak španělský realitní portál Fotocasa diagnostikoval a opravil problémy s INP v jejich React aplikaci, což vedlo k 27% růstu klíčových obchodních metrik.

Jak Fotocasa opravila INP a zvýšila konverze o 27 %

Problém: Skokový propad v Core Web Vitals

Před přechodem z FID na INP byly téměř všechny stránky Fotocasa v kategorii "Dobré". Po přechodu na INP v březnu 2024 se však téměř všechny stránky propadly do kategorie "Vyžaduje zlepšení" nebo dokonce "Špatné", protože hodnoty INP konzistentně přesahovaly 200 milisekund.

Proč INP odhalilo skryté problémy

Zatímco FID měřil pouze zpoždění úplně první interakce, INP hodnotí responzivitu všech interakcí a zahrnuje:

  • Zpoždění vstupu (Input delay)
  • Doba zpracování (Processing duration)
  • Zpoždění prezentace (Presentation delay)

    • Toto širší měření odhalilo problémy, které FID nikdy nezachytil.

    Diagnostické nástroje

    1. Google Chrome DevTools

    Záložka Performance byla použita pro:

  • Zpomalení CPU (4x a 6x) pro simulaci slabších zařízení
  • Nahrávání a analýzu traces
  • Identifikaci long tasks blokujících hlavní vlákno

    • 2. Vlastní RUM systém v Datadog

    S využitím knihovny web-vitals vytvořil tým Fotocasa systém pro real-time monitoring:

  • Sledování INP a dalších Core Web Vitals v reálném čase
  • Rozklad INP na input delay, processing duration a presentation delay
  • Detekce anomálií a automatické upozornění

    • 3. React Developer Tools

    Profiler byl použit pro:

  • Zvýraznění komponent, které se překreslují
  • Identifikaci zbytečných překreslení
  • Nalezení příčiny každého překreslení (Context, Hooks, Props, State)

    • Řešení: Cílené optimalizace v Reactu

    Odstranění zbytečných překreslení (rerenders)

    Tým Fotocasa identifikoval dva hlavní scénáře způsobující zbytečné překreslení:

  • Při načítání stránky - Zvyšování počtu long tasks a zpoždění první interakce
  • Při uživatelských interakcích - Zvyšování doby zpracování

    • Kolokace stavu (State Colocation)

    Přesunutí stavu blíže k místu, kde je skutečně používán, snížilo rozsah překreslení. Místo ukládání stavu filtrů na nejvyšší úrovni byl přesunut do komponenty, která ho skutečně používá.

    Odložení nekritických úkolů

    Pro plynulé UI interakce byly nekritické aktualizace stavu odloženy pomocí:

  • startTransition pro aktualizace s nižší prioritou
  • Rozdělení monolitických komponent na menší části

    • Výsledky

    | Metrika | Před | Po | Zlepšení |

    |---------|------|-----|----------|

    | INP (4x CPU) | 440 ms (Vyžaduje zlepšení) | 64 ms (Dobré) | 85% rychlejší |

    | INP (6x CPU) | 633 ms (Špatné) | 222 ms (Dobré) | 65% rychlejší |

    | Kontakty/Leady | Základ | +27% | 27% růst |

    | Desktop URL | "Vyžaduje zlepšení" | 100% "Dobré" | 100% úspěšnost |

    | Mobil URL | "Špatné"/"Vyžaduje zlepšení" | "Dobré" | Výrazné zlepšení |

    Klíčové poznatky

  • INP odhaluje, co FID skrývalo - Problémy s responzivitou napříč všemi interakcemi, nejen první
  • Real-time monitoring je nezbytný - 28denní okno Google Search Console je příliš pomalé pro debugging
  • React optimalizace jsou důležité - Zbytečné překreslení může výrazně ovlivnit INP
  • Výkon je obchodní metrika - 27% růst leadů dokazuje ROI práce na výkonu

    • ---

    > Zdroj a atribuce: Tento obsah vychází z případové studie "How improving Fotocasa's INP contributed to 27% growth in key metrics" publikované na web.dev pod licencí Creative Commons Attribution 4.0. Původní autoři: Andrés Alvarez, Oriol Hilari, Nacho Rodriguez, Joan León.