Script loading is bloating my page
-
Currently, The calendar is loading the following scripts:
Require.js 2.1.2 – 16k
main.js – negligible
require_jquery (wrapper?) – negligible
jquery_lib – 91k
common_frontend (wrapper?) – negligible
common_frontend – 21ktotal- ~128k not gzipped
While it is nice that you are making an effort to create modular code, this adds upwards of 100kb of js to my page. While it may not block slow down the page significantly (require’s async loading and all), this is not desirable for mobile phones, since it will chew through data quickly.
common_frontend (the one that starts the app) and require_jquery can all be placed into main.js as require’s config settings. Since most wordpress sites can be assumed that it is already making use of jQuery, you should probably check for the existence of window.jQuery before loading a whole new copy.
Your version is really outdated too, so I have to now load two different copies of jQuery.
Finally, for production I would recommend optimizing this code using rjs – https://requirejs.org/docs/optimization.html and almond – https://github.com/jrburke/almond.
After everything is said and done, you should end up with:
almond.js – ~2k
main.js – ~3k
jquery_lib (only if jquery is not detected) – 0k additional or 91k
common_frontend – ~21 kTotal – 25k (assuming jquery is loaded prior) not gzipped
all minimized and concatenated. This will allow the code loaded to be decreased from around ~128k to ~25k
If you want any help with achieving this, I would be glad to lend a helping hand.
- The topic ‘Script loading is bloating my page’ is closed to new replies.
