Server Optimization

For better performance of the webservers, server optimization is done.
Checkout the previous post for adding web contents to arduino sketch https://dev.to/dhiranegi/web-contents-in-arduino-sketch-3o0c for a webserver running in esp8266.

Simple minification techniques can be used for removal of tabs and whitespaces. Many online tools are available for that. I use https://htmlcompressor.com/compressor/
Compress your html and custom js and css file.(graphics and text files can't be compressed using this)

Using GZIP compression Techinque

Download 7-zip https://www.7-zip.org/download.html .

It's good to make a GZIP folder to keep all your zipped versions of files. To minified versions of files, apply gzip compression.
(7-Zip>add to archive).

For adding GZIPPED files to arduino sketch, replaces C String with HEX values(convert the files to HEX values with any online tool like http://tomeko.net/).

Server has to inform clients that the data being sent is in GZIP format, that is done with content-encoding header by using server.sendHeader() function. Sending "content-encoding" "gzip" header for all server files. Here is one handler function and should be done for all the handler function in the code.

You can verify Content compression and server response time reduction with wireshark.
It is possible to further speed up server response time and reduce bandwidth usage by using cache control or expires header.

ESP Arduino core has some flash memory reserved for file system
called SPI Flash file system. You can choose from Tools>Flash Size

Flash Layout:

Follow the installation process from https://github.com/esp8266/arduino-esp8266fs-plugin

Make a folder "data" inside arduino sketch folder and place all GZIPPED files inside that. Do Sketch Data Upload.
You can remove arrays and handler functions from arduino sketch.

Reading files with file system library

You can find an examples here :
File>Examples>ESP8266WebServer>FSBrowser and study it.

Include FS.h library in your arduino code and initialize it by calling begin function in setup(SPIFFS.begin();)
Call handleFileRead() inside server onNotFound(). You can also send expires header before stream file function is called.

Get the code https://github.com/DhiraNegi/server-optimization

The method is same for mikroC TCP/IP libaray. Add HTTP header in simple uncompressed form on Start of Gzipped array, then use

Net_Ethernet_Intern_putByteTCP()

for sending only single array that contains both HTTP header and Gzipped data.
Use exactly same technique for STM32 or any other ARM chip with Lwip TCP/IP stack.

HAPPY LEARNING 😄