Good Practices for Deployment
This section provides tips for successfully deploying yFiles for HTML-based JavaScript web applications.
Problem
Although you are bundling and minifying your web application’s JavaScript files, your application still takes a long time to load.
Analysis and Background
The complete yFiles library is about ~8.8 MB in size. Downloading that much data in a browser, especially on a slow connection, can take what feels like a very long time. This is not as bad as it sounds, though, as most landing pages these days include images and videos that are even larger.
Nonetheless, there is room for improvement.
Solution
Fortunately, JavaScript files are mostly text, and text can be compressed very well without much effort. In fact, almost all web server software and browsers already support this kind of compression.
Widely used compression algorithms on the web are gzip and Brotli. Brotli compresses better than gzip and has been available in all major browsers since 2017, so it should now be the preferred option.
Compression has to be enabled on the web server serving your application. There are many guides on the internet that cover how to do that for most popular web server software. A web search for keywords like “enable [gzip|brotli] compression [name of your server software]” will certainly point to the relevant documentation.
Once enabled, your application’s files will be compressed on the fly, reducing the amount of data the browsers have to download.
In combination with a working configuration for caching, this will become a one-time download. Your users will only need to download the compressed JavaScript files the first time they access the application.
The following table shows some file sizes of common file formats with and without compression:
| File | Uncompressed Size | gzip-compressed Size | Brotli-compressed Size |
|---|---|---|---|
As you can see, the JavaScript bundle and CSS file compress well, while the video file does not, since it is already compressed.
In comparison to the sizes of other applications (at the time of writing):
| File | Size Without Compression | Size With Compression | Size Reduction |
|---|---|---|---|
Enabling compression on your web server can greatly reduce your application’s size and load time.
However, since all JavaScript code still has to be parsed and compiled by the browser (even when cached), reducing the code to what is really needed (for example, by not loading the whole yFiles for HTML bundle if only part of the functionality is required) will still improve page loading times and how long it takes for your application to become responsive to user input.