Jak Economic Times snížil míru opuštění o 43 % díky Core Web Vitals

Zjistěte, jak The Economic Times, jeden z největších byznys zpravodajských portálů s 45+ miliony měsíčních uživatelů, optimalizoval LCP, CLS a FID, aby splnil prahy Core Web Vitals a výrazně snížil míru opuštění.

Jak Economic Times snížil míru opuštění o 43 % díky Core Web Vitals

Výzva: Vysoká návštěvnost, vysoké sázky

The Economic Times zpracovává přes 45 milionů měsíčních aktivních uživatelů. S neustále se zlepšujícími rychlostmi internetu uživatelé očekávají, že weby budou reagovat rychleji než kdy jindy. Optimalizací Core Web Vitals napříč celou doménou, na AMP i non-AMP stránkách, se týmu podařilo výrazně snížit míru opuštění a zlepšit čtenářský zážitek.

Měření dopadu

Tým se zaměřil na Largest Contentful Paint (LCP) a Cumulative Layout Shift (CLS), protože nejvíce ovlivňují čtenářský zážitek.

Klíčové výsledky:

  • CLS se zlepšil o 250 % - z 0,25 na 0,09
  • LCP se zlepšil o 80 % - ze 4,5 sekundy na 2,5 sekundy
  • Míra opuštění se snížila o 43 % napříč celým webem

    • Strategie optimalizace LCP

    1. Kritické požadavky jako první

    Všechny moderní prohlížeče omezují počet souběžných požadavků. Tým upřednostnil načítání kritického obsahu - vyhodnotil, které prvky jsou potřebné pro LCP a zajistil jejich přednostní načtení.

    2. Optimalizace zobrazení fontů

    Tým experimentoval s vlastností font-display. Použití font-display: swap vykreslí text nejprve v nejlépe odpovídajícím dostupném fontu a po stažení přepne na vlastní font. Výsledkem je rychlé vykreslení textu nezávisle na rychlosti sítě.

    3. Lepší komprese s Brotli

    Přechod z Gzip na Brotli kompresi dosáhl:

  • JavaScript soubory o 15 % menší
  • HTML soubory o 18 % menší
  • CSS a fontové soubory o 17 % menší

    • 4. Preconnect a DNS Prefetch

    Použití preconnect pro známé domény třetích stran a dns-prefetch pro občasné zdroje jako sociální sítě a analytika pomohlo snížit čas navazování spojení.

    5. Rozdělení kódu

    Načítání pouze nezbytné obchodní logiky a kritických zdrojů pro vykreslení nad záhybem v hlavičce. Rozdělení kódu do chunků dále zlepšilo LCP.

    6. Redis cache vrstva

    Přidání Redis vrstvy pro front-endové routy servíruje šablony z cache, čímž se snižuje výpočetní čas serveru a zlepšuje LCP pro následné požadavky.

    Strategie optimalizace CLS

    1. Placeholder prvky

    Použití stylovaných placeholderů pro reklamní jednotky a mediální prvky se známými rozměry zabraňuje posunům layoutu při načítání obsahu.

    2. Definované rozměry kontejnerů

    Explicitní definování rozměrů pro všechny kontejnery s dynamickým obsahem zajišťuje, že prohlížeč alokuje správný prostor před načtením obsahu.

    Výsledky CLS:

  • Špatné hodnoty sníženy o 65 %
  • Dobré hodnoty zvýšeny o 20 %

    • Strategie optimalizace FID

    1. Rozdělení dlouhých JavaScript úloh

    Rozdělení dlouhých JavaScript úloh na menší kusy umožňuje prohlížeči reagovat na uživatelský vstup mezi úlohami.

    2. Odložení nepoužívaného JavaScriptu

    Přesunutí nekritického JavaScriptu na odložené načítání snižuje blokování hlavního vlákna.

    3. Redukce polyfillů

    Moderní prohlížeče nepotřebují mnoho polyfillů. Odstranění nepotřebných polyfillů zmenšilo velikost JavaScript balíčku.

    4. Líné načítání reklam

    Líné načítání reklam zabraňuje blokování hlavního vlákna během počátečního načítání stránky.

    Klíčové poznatky

  • Zaměřte se na uživatelsky orientované metriky - LCP a CLS přímo ovlivňují čtenářský zážitek
  • Prioritizujte kritickou cestu - Načtěte nejprve to, co je důležité
  • Komprese je důležitá - Brotli poskytuje výrazné zmenšení velikosti
  • Cachujte agresivně - Redis caching dramaticky zlepšuje opakované návštěvy
  • Definujte rozměry - Zabraňte posunům layoutu rezervováním místa pro dynamický obsah

    • ---

    > Zdroj a atribuce: Tento obsah vychází z případové studie "How The Economic Times passed Core Web Vitals thresholds and achieved an overall 43% better bounce rate" publikované na web.dev pod licencí Creative Commons Attribution 4.0. Původní autoři: Anshu Sharma, Prashant Mishra, Sumit Gugnani.