Optimisation
A primer on the Livelink displayed size, optimisation percentage, and what it all means.
Last updated
A primer on the Livelink displayed size, optimisation percentage, and what it all means.
Last updated
In the Livelink section of the export panel, you will see an information box that displays the current size of the Lottie hosted via the link. This infobox also includes the unoptimised, uncompressed file size for comparison.
With Livelink, the Lottielab CDN delivers the animation to your users and visitors in the fastest and most efficient way possible. The displayed size is the total amount of data that will be downloaded when the animation is played in a browser. This includes the compressed and optimised Lottie contents, plus the optimized size of any images and other resources that your Lottie contains.
Web browsers, such as Chrome or Safari, try their best to avoid exposing the user to technical concepts such as compression. For example, even if you save the Lottie JSON to your computer, the browser will save it in uncompressed form. So, to measure actual transferred size, you have to use the browser's Developer Tools.
Here's how you can measure the Livelink size yourself in Chrome. The steps will be similar for other browsers.
Copy the Embed link of your Livelink from the Export panel by clicking the Embed Link tab and then clicking the Copy link button.
Open a new tab in your browser and paste the link in the address bar to visit the page. You'll see your Lotttie playing.
Press F12 (on PC) or Command+Option+I (on Mac) to bring up the Developer Tools.
Navigate to the network tab in the Developer Tools.
Select "Other" In the Request Types section at the top. This is a convenient way to ignore the size of the Lottie player library that will also be loaded by the page in order to play the animation. If you are interested in the total size including the Lottie player, skip this step.
Make sure that the "Disable Cache" and "Preserve log" options are OFF.
Hit Control+Shift+R (on PC) or Command+Shift+R (on Mac) to force-reload the page.
The total lottie size will be displayed in the status bar, towards the bottom of the Developer Tools window. The number after the slash (128KB in this example) is the total weight of the page, which also includes a Lottie player needed to play the animation. (See below.)
The larger, reference file size we display is the size you would get by exporting the full Lottie JSON file directly, by clicking the Download button in the Downloafd Lottie tab of the export panel.
The percentage displayed in the parentheses is the total size reduction that Livelink provides, when comparing this reference size to the optimised Livelink size.
Neither of the two displayed sizes include the size of the Lottie player itself. This is because this heavily depends on the exact player you are using. Additionally, the player is normally included once per page, not per animation, which makes page weight impact calculations trickier.
To ensure that you're using the most lightweight player library possible, consider using your Lottie in one of the following ways:
By following the instructions in the Code Export tab of the export panel in Lottielab.
By embedding the Livelink directly into your page by using the Embed Link or iFrame code tabs in the Export panel.
Those methods will ensure you're using the best possible player for the platform, in most cases Lottielab's own optimized lottie player, itself hosted on Lottielab's CDN. This ensures that the page weight impact of the player is minimal (less than 50 KB).
Web technologies that Lottielab CDN relies on to achieve the displayed size reduction are near-ubiquituous, with more than 97% of browsers in usage today, and all browsers released in the past 4 years supporting them fully. However, there are some browsers and devices that, for example, support only older-generation compression and image formats.
In such cases, your Lottie will be delivered using less efficient methods, which can lead to a larger amount of transferred data than the displayed size. Lottielab CDN will still ensure that the data is delivered in the best possible way subject to the browser's constraints, and this will still be considerably smaller than the uncompressed JSON.
Additionally, for JSON files, browsers will typically reference their uncompressed size, and will allow saving uncompressed versions of the file only. To view the actual amount of data transferred via the network, use the browser's developer tools.
