-->
Page 1 of 1

Serving Bootstrap content quickly with SPIFFS

PostPosted: Tue Mar 06, 2018 7:30 am
by RichardS
I used an example from Asyncwebserver and put all my files for the webpage in SPIFFS, these files ranged from the index.html (1KB) to bootstrap.min.css (142KB) bootstrap.min.js (37KB) styles.min.css (3KB) font files (300KB) and jquery.min.js (95K)

When I pull up the index.html the webpages are served very very slowly and most of the times do not complete.

I also tried coding all the files to const char arrays and serving them up the old fashion way win server.on() and still it does not work.

I am using Arduino 1.8.5 and also the ESP8266 support files for it 2.4.0

Hope to find some experts in the crowd!

Thanks!
RIchardS

Re: Serving Bootstrap content quickly with SPIFFS

PostPosted: Tue Mar 06, 2018 8:19 am
by Pablo2048
Hi,
try to:
1. put .css together into one file
2. compress everything with gzip and store gzipped files instead of plain ones
3. write lazyloader for sequential file loading aka try to let maximum 3 TCP connections @ one time
I'm using this technique load:
index.htm.gz (3kB)
app.js.gz (43kB)
blockly.js.gz (188kB)
app.css.gz (17kB)
+ some logo image (~1.5kB gif) + some on-demand loaded small ogg/wav/mp3 files. All loaded under 2.5 seconds. Main page responsive after ~1.2 second.

Re: Serving Bootstrap content quickly with SPIFFS

PostPosted: Wed Mar 07, 2018 4:08 am
by Cosmic Mac
Hi Richard,

In addition to Pablo's excellent advice, you should consider loading bootstrap and jquery from a CDN instead of embeding them (except if your client has no internet access, of course).