Using defer for JS Bundle | Experiment | Performance

Tips and Tricks
#1

Hi,

It was mentioned in docs that it is good practise to put scripts in the head of the page with defer attribute. That gives a very good performance boost since the loading of the main scripts is not blocking the rendering of the HTML on a first load.

We are using the hot-controls and have them inside pages and partials as js[] = “path/to/controls.js”

These scripts are loaded prior framework, causing errors then first loaded. Is there a way to defer load them something like: {% scripts defer %} or {% put scripts defer %} ? Through the compoment imho that was possible.

If there is another approarch please assist with idea.

Best, Max

P.s.: We tried to put all the scripts into one js file and defer load it. Works great, but having few third party libs in there is not an option for pages without these functionality.

#2

Hey Max

With {% put %} you can put <script defer />, however, with js[] that is an interesting point, we may need to find a way to support it.

So we don’t lose track of this, could you create an issue for it on GitHub? You can link to this post too if you like.

Best regards

#3

Done: Using defer on frontend for JS Bundle, Libs and custom scripts | Hot-controls and Turbo router · Issue #5833 · octobercms/october · GitHub

1 Like