static

Static webpage files

JavaScript and CSS files

General

This package and the simulation uses bootstrap 5.1.3

Create compressed version

Why

To speed up the data transfer between the device and a browser, many of them accept CSS and JS files as compressed .gz files.

Additional informations

In some cases the following warning can be seen in the web console of the page

Layout rendering was forced before the page was fully loaded.

This might be due to the reason of loading multiple (CSS) files within a given time frame. As a less powerfull device, such as an ESP32 or ESP8266, will have difficulties to provide these data in the expected time frame, the layout rendering might be forced, leading to a not as expected view.

To avoid such issues, try to serve as less files as possible in the most compact way. To do so, use minified versions of CSS files (*.min.css) and combine multiple files into one. An even better performance is reached by compressing the file as shown onwards.

To minify custom CSS files, search online for a CSS minifier or use this one

How to

To compress a file use gzip instead of tar. tar seems to break something in the compressed file. As a result the style might not be as with the non compressed version.

This example shows how to compress bootstrap.min.css to a new file called bootstrap.min.css.gz

cd css

gzip -r bootstrap.min.css -c > bootstrap.min.css.gz