PDA

View Full Version : Is it okay to load app.css and app.js in the body of the index.html / index.jsp?



samitta1
9 Sep 2015, 6:26 AM
Hi,

We are using ExtJs 4.2.1. Our application is heavy and the customer complains of high load time and wants to display a loader/text message till the time application loads.

Our app.js is 1MB (300kb over n/w as its gziped)
app.css is 300kb (70kb over n/w as gzipped)

Call to app.js and app.css are in the head section, so any div placed in the body will not show up till these files are loaded and after these files load, there is no need to display the mesage as page shows up.

So, my question is can sencha build generated app.js and app.css be placed in between body tags instead of head tag. Will there be any issues with this approach?

Note: We do not use sencha build generated index.html, we use a index.jsp which has hardcoded calls to all external scripts(few other css and scripts), so placing the scripts tag anywhere is not a problem.

Regards,
Saurav

bjdurham85
16 Sep 2015, 5:04 AM
Hi Saurav,


Besides moving the scripts down to body (untested with Cmd) have you tested caching to get down those load times? You can perform extra enhancements in the app.json.


Regards,
Bryan

samitta1
16 Sep 2015, 5:48 AM
Hi Bryan,

Thanks for responding. Yes, we already have the caching policy enabled on the server and the subsequent page loads are pretty fast.
Our issue is related to the 1st time loading and specially in low bandwidth countries in Africa and Indian subcontinent.
Moving app.js to the body will not be related to the sencha cmd, as the page (index.jsp) which has references to app.js, app.css etc, is a static one and is not part of the sencha build (in other words, we ignore the index.html generated by sencha build and use our index.jsp as a launcher for webapp).
What I have read so far is that the library js files or the js which modify DOM should be kept in head only and not moved to the body, but on testing in local setup, I didn't face any issue with app.js being in the body section.
So little confused about the approach to take. Local setup testing is always lightning quick as no network is involved, so i cannot benchmark the performance gain/loss.
Hence, wanted opinion of other sencha users on this.

Currently, I am looking into the uncss option and critical path rendering as well. The css generated by sencha is a huge overhead, as we use few GUI components compared to the options available.

Regards,
Saurav