preload hints?

[peixotorms]

Hi there, when using this script with several js files, I noticed that they are downloaded in a sequential manner, one after the other instead of simultaneously.

I understand we can preload them, but that would defeat the purpose when using the delay until interaction option.

Cloudflare's Rocket Loader feature had a similar issue during early stages of development, and they sorted it by adding preload hints. I suggest looking at this article, under "Taming the Waterfall". https://blog.cloudflare.com/too-old-to-rocket-load-too-young-to-die/

Would it be possible to do the same on your script, by adding preload hints before actually starting to transform the html and loading the script, for deferred scripts?

Ideally, for defer and delay scripts should include their own hints separately.

CF Rocket Loader source: https://gist.github.com/peixotorms/f48cfb8f104a292c3267f699524f0e48

Thanks

[shinsenter]

@peixotorms

Thank you for the ideas as well as links for easy reference.

I also had similar experiences when doing page speed optimization for my previous projects. And I think with current web technology, the combination of defer and preload hints is probably the most effective option.

Regarding the Defer.js library, my ultimate goal is to create a library that is as compact as possible, but still ensures its main function: defer the loading of the resources.

Since the library is written entirely in JavaScript and can only be run on the client's browser side, I think it should be limited to changing the original HTML structure of the server side. Of course, a tiny library cannot meet all the needs of many different websites, so I decided to leave the optimization at the HTML generation step to the website owner. They can apply preload hints etc if they want a more dramatic result, like the one you suggested.

I also have an open source PHP library that allows the server side to automatically change the HTML structure of the web page before it is sent to the browser. You can refer to it here: https://code.shin.company/defer.php

Finally, if you have any idea on how to do something, I'd love to get your ideas via pull requests. I would be more than happy to accept it if it were lean.

Regards.

[peixotorms]

Well, after some testing, the way I am adding preloading is with the following JavaScript in the footer. This is loading in parallel as intended, instead of sequentially.

<script>document.querySelectorAll('script[type="deferjs"][src]').forEach(function(t){var e=document.createElement("link");e.setAttribute("rel","preload"),e.setAttribute("as","script"),e.setAttribute("href",t.getAttribute("src")),t.crossOrigin&&e.setAttribute("crossorigin",t.crossOrigin),document.head.appendChild(e)});</script>

Your script ideally should get the list of scripts to process, add the preload hints like the above code and then process them as usual. I would love to add this inside of the Defer.all function, but your code is highly minified and my level of JavaScript proficiency is not high enough to fully understand it and adapt it, sorry.

For delayed scripts I am wrapping the same code above inside a function (with a different value on the type attribute), and then calling the Defer.all with the lazy attribute. It works so it's ok, but probably adding preload on your end would simplify things.

[shinsenter]

@peixotorms I got your idea, I am thinking of a smart way to implement it without adding too much code to the library.

By the way, I noticed that on Chrome and Safari (macOS) browsers automatically preload resources without preload hints, custom script tags just got preloaded before the type attribute changes.

[shinsenter]

@peixotorms I released v3.2 with preload hints feature added. Please make a look at the latest version.

[peixotorms]

Thanks a lot, I can confirm it's working as intended

[shinsenter]

@peixotorms Good to hear that. Thank you for the idea.