The average size of a web page has been growing at an accelerating rate over the last few years. Last week, when the open-event webapp was tested, it was very slow to load because of loading 67.2 MB data ( which contained audio and image files ) on the web page.I have taken following steps which are good to read to make any web application load faster.
1. Stop preloading of audio files
The HTML5 audio player loads all audio files by default on the page. To stop this we have to change the code as
Setting preload option to none help us to load audio only when it is clicked. Hence it decreases the HTTP calls and decreases the page loading time.
Network tab with Audio files takes 68.0MB load and 13.6 minute loading time.
Network tab with option <audio controls preloaded=”none”> takes 1.1 MB load and 1 minute loading time. This was a huge improvement but more optimizations can be done.
2. Using Compression Middleware
Express compression middleware works like a charm by compressing the response coming to the web page. It is too simple to add.
$ npm install compression
var compression =require('compression')
var express =require('express')
var app =express()
// compress all requestsapp.use(compression())
// add all routes
This has compressed the responses and decreased the page load time.
3. Reduce the number of HTTP requests
Another great way of speeding up your web pages is to simply reduce the number of files that need to be loaded.
After such optimizations, the webapp loads now in 8-15 seconds with DOM loaded in 2 seconds.
The result of these optimizations are awesome. We can test the page speed by using various tools like pagespeed, speedtracer etc.
Until yesterday, I was exploring all around the internet, to find the best possible way for the theme concept in the web app. The theme concept allows an organizer to choose the theme for the web app from the set of provided themes.
After some time, I realised that this awesomeness to the web app can be added by using Syntactically Awesome Stylesheets.
The main file that includes all the required style is the application.scss. Here, $corp-color takes default value from _config.scss. It can be overwritten by the themes.
/* Offsets for fixed navbar */
Making a light theme
The light theme will overwrite the $corp-color value to $gray-light which is defined in _config.scss. This will change the background-color defined in application.scss to #c9c8c8. So, in this way a light theme is generated. The similar approach can be followed to generate the dark theme.
We can easily compile these SASS files by using command
sass /path/application.scss /path/schedule.css
For generating light theme and dark theme:
sass /path/_light.scss /path/schedule.css
sass /path/_dark.scss /path/schedule.css
Optimization of Code
SASS is very powerful for optimizing the code. It allows the concepts such as nesting, mixins which reduce the line of code. I have rewritten schedule.css into application.scss to make it more optimized.