Rubriky

Nejnovější články

Videonávody

Youtube
← Zpět

Lottie animace ve WordPressu: jak je používat a správně nasadit v Elementoru (bez zpomalení webu)

Rubrika: ,

lotties

Lottie animace jsou dnes jedna z nejčistších cest, jak dodat webu „wow efekt“ bez těžkých videí, GIFů nebo složitých SVG skriptů. Jsou ostré na každém displeji, skvěle se škálují a při správném nasazení mohou být rychlé i na mobilu. V tomhle článku si ukážeme, kdy se Lottie hodí, jak je implementovat do Elementoru krok za krokem a hlavně jak je optimalizovat, aby nezabily Core Web Vitals.

Co jsou Lottie animace a proč jsou tak populární

Lottie je formát animací uložený jako JSON soubor (většinou export z After Effects přes plugin Bodymovin). Místo videa se animace vykresluje přímo v prohlížeči pomocí SVG nebo Canvas renderu.

Výhody oproti GIF/video:

  • Menší velikost než video nebo GIF (často desítky až stovky KB)
  • Perfektní ostrost (vektorové vykreslení)
  • Možnost interakce (spuštění při scrollu, hover, klik, loop, přehrání jen jednou)
  • Snadné barvení/úpravy (někdy i bez překódování)
  • Moderní UX bez „těžké“ grafiky

Kdy se Lottie hodí nejvíc:

  • Hero sekce (jemný pohyb místo statického obrázku)
  • Ikony a micro-interactions (hover efekty, potvrzení akce)
  • „How it works“ bloky (krok 1–2–3)
  • CTA zvýraznění (šipka, pulzující prvek)
  • Loading / skeleton stavy
  • Sekce s benefity (animované piktogramy)

Kde Lottie sehnat (zdroje)

  • LottieFiles (největší knihovna, často i s náhledem a úpravami)
  • Vlastní export z After Effects (Bodymovin)
  • Agenturní / designérská tvorba na míru (nejlepší pro brand konzistenci)

Implementace Lottie v Elementoru (2 nejčastější způsoby)

1) Elementor Pro: widget „Animation“ / „Lottie“ dle verze
elementor lottie
Lottie animace ve WordPressu: jak je používat a správně nasadit v Elementoru (bez zpomalení webu) 2

V Elementoru Pro bývá Lottie pod vlastním widgetem (názvy se mohou lišit podle verze).

Postup je podobný: nahrajete JSON → nastavíte trigger → doplníte responzivní velikosti → hotovo.

Pro tip pro responzivitu:

  • nastavte šířku v % (např. 60–80 % v desktopu, 90–100 % v mobilu)
  • nepřehánějte výšku: velká animace „pod foldem“ může zbytečně zatížit první načtení
2) Univerzální řešení: HTML widget + lottie-web (největší kontrola)

Pokud widget nemáte, nebo chcete maximální kontrolu (lazy load, interakce, fallback), použijte HTML widget a knihovnu lottie-web.

<div id="lottie-cta" style="width:240px;max-width:100%;margin:auto;"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    lottie.loadAnimation({
      container: document.getElementById('lottie-cta'),
      renderer: 'svg',
      loop: true,
      autoplay: true,
      path: '/wp-content/uploads/2026/01/animace.json'
    });
  });
</script>

Výkon a Core Web Vitals: jak nasadit Lottie správně

Lottie může být rychlá… ale taky umí web zpomalit, když:

  • máte obří JSON (MB+),
  • animace běží všude a pořád (loop),
  • vykresluje se hned v hero a brzdí LCP,
  • přehrává se na mobilu ve více instancích současně.

Praktická pravidla (rychlá a funkční)

  • Velikost JSON ideálně do 150–300 KB (u ikon často 20–80 KB)
  • Loop jen tam, kde dává smysl (ikonky: raději přehrát 1×, nebo po hoveru)
  • Autoplay jen nad foldem a u krátkých animací
  • On Scroll / On Viewport je často nejlepší trigger
  • Omezte počet Lottie na stránce (typicky 1–3 je safe, 6+ už je risk)

Optimalizace samotného JSON

  • exportujte bez zbytečných vrstev
  • vyhněte se raster obrázkům uvnitř Lottie (pokud to jde)
  • omezte blur, glow a extrémně detailní shape animace
  • v LottieFiles často najdete „optimize“ / „compress“

Lazy load (zásadní rozdíl)

Nechte animaci načíst až ve chvíli, kdy je blízko viewportu.

Jednoduchý princip:

  • stránka se načte rychle (lepší LCP/INP),
  • animace se stáhne až při scrollu.

Nastavení ve WP Rocket (aby Lottie nezpomalovala web)

Pokud běžíte na WordPressu + Elementor, WP Rocket je jedna z nejrychlejších cest, jak srazit zátěž JS.

Doporučené kroky ve WP Rocket:

  • Enable Delay JavaScript Execution (odloží JS až po interakci – často obrovský boost)
  • Load JavaScript deferred (snižuje blokování renderu)
  • Minify JS (opatrně: testovat, někdy může rozbít některé widgety)
  • Pokud je problém s Lottie, přidejte výjimku pro lottie skript (vyloučit z delay/minify) – typicky jen v ojedinělých případech

Tip: Pokud máte Lottie v hero sekci, “Delay JS” může způsobit, že animace naskočí až po první interakci. V tom případě buď animaci přesuňte níž, nebo řešte výjimku jen pro konkrétní stránku.

SEO a UX: kdy animace pomáhá a kdy škodí

Lottie sama o sobě SEO „nezlepší“, ale zlepšuje UX metriky, které se do SEO propisují:

  • delší time on page,
  • vyšší engagement,
  • nižší bounce rate,
  • lepší čitelnost a pochopení nabídky.

Kdy škodí:

  • pokud ruší (příliš rychlá, blikající, agresivní loop)
  • pokud zpomaluje LCP/CLS (špatné rozměry, načítání bez rezervace prostoru)
  • pokud překrývá obsah nebo CTA

Přístupnost (na to se zapomíná)

  • respektujte prefers-reduced-motion (uživatelé citliví na pohyb)
  • u důležitých sdělení vždy mějte textovou alternativu (Lottie není „obsah“, je to doplněk)

Nejčastější chyby při implementaci v Elementoru

  1. Animace nemá rezervovaný prostor → poskakuje layout (CLS)
  2. Loop na 10 místech → zbytečný CPU drain na mobilu
  3. Autoplay všude → rušivé + žravé
  4. Obří JSON z AE bez optimalizace → pomalé načtení, lag
  5. Špatný renderer (SVG vs Canvas) → artefakty nebo zbytečná zátěž
  6. Cache/CDN konflikt (vzácně) → animace se nenačte kvůli CORS nebo path

Doporučené scénáře použití (rychlé inspirace)

  • Hero: krátká animace, autoplay, bez loop nebo loop pomalu (speed 0.8), ideálně pod 200 KB
  • Benefit ikony: přehrát 1× při scrollu (On Viewport), bez autoplay na load
  • CTA šipka: hover trigger, loop vypnout
  • Pricing / onboarding: On Scroll, postupné kroky, jeden JSON na sekci
Sdílejte článek