Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

preload hints? #112

Closed
peixotorms opened this issue Aug 31, 2022 · 6 comments
Closed

preload hints? #112

peixotorms opened this issue Aug 31, 2022 · 6 comments

Comments

@peixotorms
Copy link

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
Copy link
Owner

shinsenter commented Aug 31, 2022

@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
Copy link
Author

peixotorms commented Aug 31, 2022

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
Copy link
Owner

@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
Copy link
Owner

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

@peixotorms
Copy link
Author

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

@shinsenter
Copy link
Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants