Cloudflare's Laggy Animation
Shoaib Shaikh's Blog
Click to view full size
This screenshot shows the resource usage when cloudflare's 3D homepage animation is running.
Cloudflare's 3D animation caused my PC to lag.
Cloudflare's homepage showcases a visually striking 3D globe animation. While impressive, this Lottie-based animation is 841 Kilobytes in size, containing 95 Layers of Shapes - making it a significant performance bottleneck.
What is Lottie?
Lottie is an open-source animation library, first developed at Airbnb, that allows you to render After Effects animations on web and mobile platforms using JSON data.
Lottie animations are vector-based and rely on JavaScript for rendering, making them smooth and scalable — but they can be CPU-intensive because they:
- Animate many DOM elements (SVG),
- Redraw full frames frequently (Canvas),
- Handle complex vector math,
- May skip GPU acceleration.
How Lottie Works on the Client Side?
-
JSON Animation File
A .json file defines the animation – it's a structured description of vector shapes, transformations, timings, keyframes, etc. It's like a vector movie script. -
Lottie Library (JavaScript)
Lottie (typically via lottie-web) parses this JSON and renders it:- SVG mode: each frame is drawn using SVG elements.
- Canvas mode: drawn to a
<canvas>using vector instructions. - HTML mode (less common): using HTML + CSS.
-
Rendering Loop
Animations are updated frame-by-frame using requestAnimationFrame, like any smooth animation.
Why Lottie Can Be Resource-Intensive
-
SVG Manipulation (DOM-heavy)
- In SVG mode, each shape or layer is often a separate DOM element.
- Animating many DOM elements continuously leads to layout reflows, repaints, and high JavaScript + paint CPU usage.
- The browser has to recompute styles and re-render parts of the page frequently.
-
Canvas Mode (CPU/GPU load)
- Canvas-based Lottie is often smoother but requires redrawing the full frame each tick.
- That means constant pixel-level drawing on each animation frame (60 FPS = 60 full draws per second).
-
Complexity of Animation
- Layered After Effects animations often have many shapes, masks, gradients, path interpolations, etc.
- These get translated into JavaScript math and DOM ops or canvas draws – intense for heavy scenes.
-
No Hardware Acceleration (sometimes)
- Vector animations in SVG/Canvas don't always benefit from GPU acceleration like videos or CSS transforms do.
- The heavier the JSON (especially frame-by-frame keyframes), the harder the load.
What is the solution?
There are a few solutions to this problem:
Reduce the number of layers (good).
Click to view full size
This is the most obvious solution, but it can be difficult to do without losing the visual appeal of the animation.
Challenges:
- It's not always possible to reduce the number of layers without losing the visual appeal of the animation.
- Time-consuming to do manually.
- Reducing few layers might not make a significant difference in performance.
- Not scalable for a large animations.
Compress the lottie file (better).
Click to view full size
LottieFiles provides option to download the compressed/optimized version of the lottie (JSON) file.
Compressed + CDN (Best)
LottieLab is a web-based tool that lets you create, edit, and collaborate on Lottie animations visually—kind of like Figma but for animations.
They provide amazing features:
- Optimize lottie files to reduce file size and improve performance.
- Host lottie files on CDN (Content Delivery Network) for faster global delivery.
- Iframe embeddable player for easy integration into any website.
Click to view full size
I had imported the cloudflare's lottie file into LottieLab and optimized it.
As you can see in the image above, the original file size was 3.5 MB (I'm not sure why it shows 3.5 MB when it was originally 841 KB - LottieLab probably pre-optimizes the file on import). The Lottie file's size was reduced from 3.5 MB to 60 KB (98% reduction), which is mind-blowing. Additionally, since the Lottie file is hosted on a CDN, it loads even faster.
Optimized Cloudflare's Lottie
View Animation Demo
Loading...
Click to view full size
As you can see in the image above, the optimized Lottie is utilizing ~36% of CPU, whereas before it was utilizing ~140% of CPU. However, it still makes my PC lag, but significantly less than before.
Conclusion
In conclusion, while Cloudflare's 3D globe animation is visually impressive, it can be a significant performance bottleneck due to its size and complexity. By understanding the intricacies of Lottie animations and their impact on performance, we can take steps to optimize them.
Using tools like LottieLab to compress and host animations on a CDN can drastically reduce file sizes and improve load times, as demonstrated by the reduction from 3.5 MB to 60 KB. This optimization not only enhances user experience by reducing CPU usage but also ensures smoother performance across devices.
If you're dealing with similar performance issues, consider exploring these optimization techniques. They can make a substantial difference in how animations perform on your website, leading to a more efficient and enjoyable user experience.