At Lordicon, we prioritize achieving the best page loading speed. We begin by displaying an SVG placeholder, followed by a heavier Lottie player loading. When the user interacts (hovers or clicks), the SVG is replaced by an animation. This process has helped us achieve an outstanding score of 98/100 on Google Page Speed Insights. You can verify this by visiting this URL.
We've created a custom element for our users that supports the use of a placeholder (e.g., an SVG file) before the animation is loaded. It can also be configured to delay the loading of the animation until it's actually needed, such as upon user interaction. We've provided a series of examples (docs / web / loading-placeholder + loading-lazy) that demonstrate the possibilities.
