How to reduce dotLottie initial rendering time due to Wasm

dotLottie
1

hello. I am using dotLottie-react library for my web page. I’m doing some performance testing, and I’m running a .lottie animation on the front(first) page.

Then I found out that in order to play the .lottie extension, a web decoder called dotlottie-player.wasm is needed, and the browser is also requesting that decoder.

However, the loading time of dotlottie-player.wasm is longer than expected, which is affecting the LCP score.

What do you think about this issue?

4

To improve the LCP score, you may consider the following solutions:

1. Dynamically Load the dotlottie-react Library

Load the dotlottie-react library dynamically based on specific events, such as user interaction or when a part of the page becomes visible. This approach reduces the initial bundle size by excluding the dotlottie-react library from the main application bundle and loading it as a separate JavaScript chunk. As a result, it effectively removes the library from the critical rendering path, improving load times.

Example:

import React, { Suspense } from 'react';

// Dynamically import the DotLottieReact component

const DotLottieReact = React.lazy(() =>

import('dotlottie-react').then((module) => ({ default: module.DotLottieReact }))

);

const App = () => {

const placeholder = '/path/to/placeholder-image.png'; // Replace with your image path

return (

<div>

<Suspense fallback={<img src={placeholder} alt="Loading animation..." />}>

<DotLottieReact

src="/path/to/your-animation.lottie"

autoplay

loop

/>

</Suspense>

</div>

);

};

export default App;

2. Self-Host the dotlottie-player.wasm File

Self-host the dotlottie-player.wasm file as part of your application assets. This eliminates the need for CDN requests, which may introduce latency depending on user location and CDN performance.

For guidance on self-hosting, refer to GitHub Discussion #198.

Also, consider preloading the .wasm file to ensure it is fetched early in the loading process:

<link rel="preload" href="/path/to/dotlottie-player.wasm" as="fetch" type="application/wasm" crossorigin="anonymous">
1 Like