Lottie animácie a Core Web Vitals: ako ovplyvňujú rýchlosť webu

Lottie animácie a Core Web Vitals: kde animácia web spomaľuje

Animovaná ikona alebo hero ilustrácia dokáže stránku oživiť, no zároveň patrí medzi prvky, ktoré najčastejšie zhoršia metriky rýchlosti. Lottie animácie a Core Web Vitals spolu súvisia, lebo Lottie animáciu neprehráva prehliadač sám. Na stránku najprv príde JavaScriptový prehrávač a JSON súbor, prehrávač z neho vytvorí prvky a potom ich neustále prekresľuje. Každý z týchto krokov sa môže prejaviť v inej metrike.

Tento článok sa nevenuje výberu formátu. Otázku, kedy použiť Lottie, GIF alebo video, sme rozobrali v porovnaní formátov Lottie vs GIF vs MP4/WebM. Tu počítame s tým, že Lottie na webe už máte alebo ho plánujete nasadiť, a riešime, ako zmerať jeho vplyv na LCP, CLS a INP a čo konkrétne upraviť v kóde aj v zdrojovom projekte.

Aké hranice majú Core Web Vitals

Lottie animácie a Core Web Vitals sa posudzujú rovnakými prahmi ako každá iná stránka. Core Web Vitals tvoria tri metriky. Podľa prehľadu na web.dev platí za dobrý výsledok LCP do 2,5 sekundy, INP do 200 milisekúnd a CLS do 0,1. Hodnotí sa 75. percentil načítaní stránky, zvlášť pre mobil a desktop, takže jeden rýchly notebook v kancelárii nič nedokazuje.

INP je v tejto trojici od marca 2024, keď ako stabilná metrika nahradil FID. Ak niekde čítate o First Input Delay ako o aktuálnej metrike, zdroj je zastaraný.

Ako animácia ovplyvňuje LCP, CLS a INP

LCP: animácia v hornej časti stránky

LCP meria vykreslenie najväčšieho prvku v prvej obrazovke. Podľa web.dev sa o tento titul uchádzajú obrázky, poster alebo prvá snímka videa, pozadia načítané cez url() a bloky textu. Ak hero sekciu tvorí len animácia, návštevník aj metrika čakajú na celý reťazec: HTML, potom skript prehrávača, potom JSON a až nakoniec vykreslenie.

Sprievodca optimalizáciou LCP upozorňuje, že veľký rozdiel medzi FCP a LCP naznačuje obsah riadený JavaScriptom, ktorý prehliadač nevie objaviť v úvodnom HTML. Presne to je Lottie v hero sekcii.

CLS: prázdny kontajner, ktorý sa zrazu naplní

Prehrávač vkladá animáciu do kontajnera až po načítaní. Ak kontajner nemá pevný rozmer, po vykreslení sa obsah pod ním posunie. Sprievodca optimalizáciou CLS pripomína, že dynamicky vkladaný obsah bližšie k hornému okraju spôsobuje väčšie posuny než obsah nižšie na stránke. Hodnota posunu sa počíta ako súčin dvoch podielov: koľko z obrazovky posun zasiahol a ako ďaleko sa prvky presunuli.

Samotný pohyb vo vnútri animácie CLS nepridáva, kým má jej box pevné rozmery. Pozor treba na CSS animácie okolo nej. Podľa web.dev posuny nespôsobujú kompozitované animácie cez transform, zatiaľ čo zmena vlastností ako top, left, width alebo height vyvoláva nové rozloženie stránky.

INP: prehrávač na hlavnom vlákne

Prehrávač lottie-web počíta a kreslí snímky v JavaScripte, teda na hlavnom vlákne. Rovnaké vlákno musí obslúžiť kliknutie na tlačidlo. Podľa návodu na INP vzniká oneskorenie vstupu, keď je hlavné vlákno zaneprázdnené napríklad sťahovaním, parsovaním a kompiláciou skriptov. Nepretržitá náročná animácia preto môže zhoršiť INP, aj keď sa stránka načíta rýchlo.

Koľko to je milisekúnd, závisí od zariadenia, počtu prvkov animácie a toho, čo ešte na stránke beží. Žiadne univerzálne číslo neexistuje, preto sa oplatí merať na spomalenom procesore, nie len na vlastnom počítači.

Ako zmerať Lottie animácie a Core Web Vitals v praxi

Bez merania sa zlepšenie aj zhoršenie ľahko domyslí. Pomôžu tri nástroje a každý odpovedá na inú otázku.

• PageSpeed Insights, terénne dáta. Podľa dokumentácie PageSpeed Insights ukazujú skúsenosť reálnych používateľov z Chrome User Experience Report za predchádzajúcich 28 dní. Ak pre konkrétnu adresu nie je dosť dát, nástroj sa vráti na úroveň celej domény.
• PageSpeed Insights a Lighthouse, laboratórne dáta. Simulované načítanie na jednom zariadení a s pevnými podmienkami siete. Hodí sa na hľadanie príčin, no môže sa líšiť od reality, a preto meranie zopakujte viackrát.
• Panel Performance v Chrome DevTools. Nahrá aktivitu hlavného vlákna ako graf, v ktorom širší pruh znamená dlhšiu udalosť. Podľa dokumentácie DevTools v ňom môžete spomaliť procesor 4-násobne alebo 20-násobne a približne simulovať slabší telefón.

Praktický postup na jednej stránke vyzerá takto:

1. Zmerajte východiskový stav. Spustite PageSpeed Insights pre mobil a poznačte LCP, CLS a INP, ak sú dostupné terénne dáta.
2. Zmerajte stránku bez animácie. Na testovacej kópii animáciu odstráňte a meranie zopakujte. Rozdiel ukáže, koľko z problému skutočne pochádza z nej.
3. Nahrajte načítanie v DevTools. Nastavte spomalenie procesora a hľadajte dlhé bloky, ktoré patria skriptu prehrávača, a to pri načítaní aj počas prehrávania.
4. Upravte jednu vec naraz. Odloženie skriptu, rozmery alebo zjednodušený zdroj testujte samostatne, inak neviete, čo pomohlo.
5. Sledujte terénne dáta. Keďže sa počítajú za posledných 28 dní, zlepšenie sa v nich ukáže postupne.

Skôr než začnete ladiť animáciu, skontrolujte aj základ. Podľa web.dev má pri optimálnom rozložení LCP na čas do prvého bajtu (TTFB) pripadnúť približne 40 %, takže pomalý server dokáže pokaziť aj ideálne nasadenú animáciu. Ako vybrať hosting, opisuje článok o WordPress hostingu, a celkový postup pre LCP, INP a CLS nájdete v návode ako zrýchliť WordPress web. Pri obchode sa hodí aj zrýchlenie WooCommerce, kde animácie často sedia na kategóriách a v košíku.

Hero animácia a LCP: čo má byť vykreslené ako prvé

Prvok, ktorý bude LCP, má byť v úvodnom HTML a prehliadač ho má nájsť bez čakania na JavaScript. Najčastejšie je to nadpis alebo statický obrázok. Animácia sa potom dotiahne až po ňom a plynulo ho nahradí.

• Poster ako prvý obraz. Do HTML vložte statický obrázok, ktorý vyzerá ako prvá snímka animácie, s atribútmi width a height.
• Vysoká priorita pre poster. Web.dev odporúča nastaviť fetchpriority="high" na <img>, ktorý bude pravdepodobne LCP prvkom.
• Žiadne lazy-loading na poster. Podľa web.dev sa LCP obrázok nemá načítavať lenivo, pretože to vždy pridá zbytočné oneskorenie načítania.
• Video v hero sekcii. Použite atribút poster, pretože poster videa patrí medzi kandidátov na LCP.

Atribút loading="lazy" sa týka obrázkov a nič nerobí so skriptom prehrávača ani s JSON súborom animácie. Podľa dokumentácie MDN navyše funguje len pri zapnutom JavaScripte a rozmery obrázka sú pri ňom obzvlášť dôležité. Animácie pod prvou obrazovkou preto odkladáme iným spôsobom, o ktorom je nasledujúca časť.

Rezervované miesto: ako predísť posunu obsahu pri Lottie

Kontajner animácie musí mať rozmer ešte predtým, než sa načíta prehrávač. Web.dev odporúča vždy uvádzať width a height pri obrázkoch a videách a pri responzívnom obsahu použiť CSS vlastnosť aspect-ratio. Rovnaký princíp platí pre Lottie: slot má pevný pomer strán a poster vo vnútri ho vypĺňa.

<style>
  .mv-lottie-slot {
    width: min(100%, 320px);
    aspect-ratio: 1 / 1;
  }
</style>

<div class="mv-lottie-slot" data-lottie-src="/animacie/ikona.json">
  <img src="/animacie/ikona-poster.webp"
       width="320" height="320"
       alt="Náhľad animácie">
</div>

Poster a slot musia mať rovnaký pomer strán ako samotná animácia, inak dôjde k skoku pri výmene. Animujte okolité prvky cez transform a nie cez top, left, width alebo height.

Odloženie a lazy-loading prehrávača Lottie

Skript prehrávača v hlavičke stránky blokuje spracovanie HTML. Podľa dokumentácie MDN k elementu script sa skript s atribútom defer sťahuje súbežne s parsovaním a vykoná sa po spracovaní dokumentu, kým async sa vykoná hneď po stiahnutí a môže tak blokovať stránku. Moduly sa odkladajú automaticky. Vo WordPresse môžete od verzie 6.3 pri funkcii wp_enqueue_script nastaviť 'strategy' => 'defer'.

Pri animáciách mimo prvej obrazovky ide odloženie ďalej: prehrávač sa nestiahne, kým sa slot nepriblíži k viditeľnej oblasti. Na to slúži IntersectionObserver. Podľa MDN umožňuje sledovať, kedy prvok vstúpi do viewportu, bez toho, aby to riešil kód na hlavnom vlákne, a cez rootMargin možno načítavanie spustiť ešte pred zobrazením.

const slot = document.querySelector('.mv-lottie-slot');
let anim = null;

const observer = new IntersectionObserver(async ([entry]) => {
  if (entry.isIntersecting) {
    if (!anim) {
      const { default: lottie } = await import(
        'lottie-web/build/player/esm/lottie_light.min.js'
      );
      anim = lottie.loadAnimation({
        container: slot,
        renderer: 'svg',
        loop: true,
        autoplay: false,
        path: slot.dataset.lottieSrc
      });
      anim.addEventListener('DOMLoaded', () => {
        const poster = slot.querySelector('img');
        if (poster) poster.remove();
      });
    }
    anim.play();
  } else if (anim) {
    anim.pause();
  }
}, { rootMargin: '200px 0px' });

observer.observe(slot);

Ukážka robí dve veci naraz. Prehrávač sa stiahne až pri približovaní slotu a animácia sa pri odchode z obrazovky pozastaví. Udalosť DOMLoaded v README lottie-web znamená, že sa prvky pridali do stránky, a vtedy poster odstránime. Cesta k súboru prehrávača závisí od vášho bundlera, takže ju upravte podľa projektu.

Pozastavenie animácií mimo obrazovky

Nekonečná slučka pracuje celý čas, aj keď sa už nikto nepozerá. Ukážka vyššie používa anim.pause() po opustení obrazovky. Ak animácia už nie je potrebná, destroy() uvoľní jej prvky zo stránky. Globálne metódy lottie.freeze() a lottie.unfreeze() zase zastavia a znova spustia všetky animácie naraz.

Pri stránke s viacerými animáciami, napríklad s mriežkou ikon, sledujte každý slot osobitne a nechajte bežať len tie viditeľné. Zvážte aj konečný počet opakovaní: parameter loop prijíma okrem true a false aj číslo, takže ikona sa môže prehrať dvakrát a zastať.

Podľa README lottie-web existuje aj lottie.setQuality() s hodnotami high, medium a low, ktoré má zlepšiť výkon prehrávača, pričom pri niektorých animáciách nie je rozdiel vidieť. Vyskúšajte ho ako doplnok, nie ako prvý krok, a vždy skontrolujte výsledok očami.

Renderer, lottie_light a dotLottie: čo zaťažuje hlavné vlákno

Podľa README knižnice lottie-web sa pri loadAnimation() volí renderer hodnotou svg, canvas alebo html. Žiadny z nich nie je vždy najrýchlejší. Rozhodnutie závisí od konkrétnej animácie, preto ich porovnajte v DevTools na vlastnom súbore.

Podľa repozitára dotlottie-web vykresľuje DotLottieWorker na Web Workeri s OffscreenCanvas, čím uvoľňuje hlavné vlákno pre rozloženie stránky, posúvanie a ostatný kód. Práve tam sa rozhoduje o INP.

Zjednodušenie zdrojového projektu v After Effects

Najlacnejšia optimalizácia je tá, ktorá prehrávaču ušetrí prácu ešte pred exportom. Autori lottie-web v README uvádzajú, že ide o vykresľovanie v reálnom čase a že sa oplatí držať projekt v After Effects na nevyhnutnom minime. Nepoužívajte veľké tvary len na zamaskovanie malej časti, pretože príliš veľa uzlov ovplyvňuje výkon.

• Menej vrstiev a tvarov. Zlúčte prekrývajúce sa tvary a odstráňte vrstvy, ktoré nie sú v animácii vidieť. Každý tvar sa v SVG rendereri stáva prvkom na stránke.
• Striedma práca s maskami. README masky podporuje, no pri ďalších režimoch masiek varuje pred veľkým výkonnostným dopadom.
• Bez expressions a efektov. Ak chcete použiť lottie_light, prepíšte expressions na kľúčové snímky a efekty nahraďte tvarmi. Tým zároveň znížite riziko, že sa animácia v prehrávači vykreslí inak.
• Vektory namiesto rastrov. README odporúča konvertovať vrstvy na tvary, aby sa exportovali ako vektor. Rastrové obrázky sa ukladajú ako externé súbory a strácate malú veľkosť aj ostrosť. Obrazové sekvencie, video a zvuk podporované nie sú.
• Menej kľúčových snímok. Ak animácia vyzerá dobre aj s menším počtom kľúčových snímok, exportujte ich menej. Pri každej animácii to vyskúšajte, nejde o pevné pravidlo.
• Rozmer a snímková frekvencia. Kompozíciu nastavte na veľkosť, v akej sa zobrazí. Inštancia animácie má metódu setSubframe(false), ktorá drží pôvodnú frekvenciu z After Effects. Skúste, či vám to stačí a či sa zníži záťaž.

Ak ani po zjednodušení výkon nestačí, vráťte sa k voľbe formátu. Fotorealistický alebo veľmi bohatý pohyb patrí do videa, ako opisuje spomínané porovnanie formátov.

Problém, metrika, oprava: prehľad

Kontrolný zoznam: Lottie animácie a Core Web Vitals pred nasadením

Súvisiace návody a zdroje

• Lottie vs GIF vs MP4/WebM: ktorý formát animácie je najlepší pre web
• Ako zrýchliť WordPress web: LCP, INP a CLS krok za krokom
• Ako zrýchliť WooCommerce: košík, pokladňa a Core Web Vitals
• WordPress hosting: Ako vybrať rýchly a bezpečný hosting pre váš web
• UX audit webu a e-shopu: Čo odhalí a kedy sa oplatí
• Prístupné animácie na webe: prefers-reduced-motion, ovládanie a bezpečný pohyb
• 2D vs 3D animácia: ktorú zvoliť pre značku, produkt alebo kampaň
• 3D produktová animácia vs video vs fotografia: čo sa oplatí?

Na záver

Lottie animácie a Core Web Vitals sa dajú zladiť. Väčšina problémov vzniká pri troch rozhodnutiach: čo sa vykreslí ako prvé, koľko miesta animácia dostane a kedy sa načíta prehrávač. Zvyšok sa rieši v zdrojovom projekte.

Ak web animácie už má, začnite meraním. Často stačí poster, rezervovaný rozmer a odložený skript. Do renderera alebo do samotnej animácie zasahujte až potom, keď merania stále nevychádzajú.

Časté otázky