Lottie loading strategies

Scroll down to each variant — every player loads lazily via IntersectionObserver, so the network waterfall below matches what a real visitor pays. Open DevTools → Network, filter by JS, and compare the three.

↓ scroll to trigger lazy loads ↓

A · Current: <dotlottie-player>~496 KB gz player

waiting to enter viewport…
code 
<script type="module"
  src="https://unpkg.com/@dotlottie/player-component@2.7.12/dist/dotlottie-player.mjs"></script>

<dotlottie-player
  src="./Home-PFA-July-9.json"
  autoplay
  loop></dotlottie-player>
↓ keep scrolling ↓

B · Recommended: lottie_light + lazy init~45 KB gz player

waiting to enter viewport…
code 
<div id="lottie-target" style="width:100%;height:100%"></div>

<script src="https://cdn.jsdelivr.net/npm/lottie-web@5.12.2/build/player/lottie_light.min.js"></script>
<script>
  lottie.loadAnimation({
    container: document.getElementById('lottie-target'),
    renderer: 'svg',         // 'canvas' if you hit paint jank
    loop: true,
    autoplay: true,
    path: './Home-PFA-July-9.json',
  });
</script>
↓ pure-CSS option ↓

D · Pure CSS @keyframes on inline SVG0 KB JS

paused until in viewport · 0 KB JS · 0 KB JSON
code 
<style>
  .ring, .pip, .disk {
    animation: ring-move 3s cubic-bezier(0.5, 0, 0, 1) infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
  .ring { fill: none; stroke: rgb(0,112,245); stroke-width: 2; }
  .pip  { fill: rgb(245,61,0); }
  .disk { fill: rgb(245,61,0); stroke: #000; stroke-width: 2; }
  @keyframes ring-move {
    0%, 47%   { transform: translate(0, 0); }
    74%, 100% { transform: translate(var(--dx, 0px), var(--dy, 0px)); }
  }
</style>

<svg viewBox="0 0 977 718">
  <g transform="translate(115.2 -11.2)">
    <circle class="ring" cx="374.5" cy="370.5" r="274"/>
    <circle class="ring" cx="374.5" cy="370.5" r="258" style="--dx:13px;--dy:-9px"/>
    <!-- ...15 more rings, each with its own --dx/--dy delta... -->
    <circle class="ring" cx="374.5" cy="370.5" r="11"  style="--dx:189px;--dy:-155px"/>
    <circle class="pip"  cx="374.5" cy="370.5" r="6"   style="--dx:114px;--dy:-92px"/>
  </g>
  <g>
    <circle class="disk" cx="489" cy="359" r="60" style="--dx:151px;--dy:-124px"/>
    <circle class="disk" cx="369" cy="462" r="48" style="--dx:151px;--dy:-124px"/>
    <circle class="pip"  cx="278" cy="539" r="28" style="--dx:151px;--dy:-124px"/>
  </g>
</svg>