Yesterday I wrote a topic "Your social widgets are losing you visitors right now".
Today I present you solution to very old problem of scripts delaying page loads: just change src="" to extsrc="" and use 'extsrc.js':
<script extsrc="..."></script>
Now all of your scripts are loading AFTER the page renders. It works even if scripts use document.write
I've tested with Chrome/Ubuntu and Firefox/Ubuntu - works like it should.
ALPHA! Test it and let me know if your browser matches the reference rendering. If it doesn't - maybe we can do some fallback.
Quite a few bugs fixed by now. Please test it and leave bug reports.
Asynchronous document.write (http://github.com/eligrey/async-document-write) does mostly the same thing, and actually supports real async and deferred script execution on browsers that support it. Also note that extsrc.js waits until everything, including large images which may take a while, on your page is loaded before running the "asynchronous" scripts, which doesn't sound that asynchronous to me.
The only reason is so that you can use the browser's native async and defer script scheduling. And yes, you need to modify the external scripts (only adding a single line to the start and end).
If you can't convince the widget provider to change the script, you can place <script>document.write.to = "the URI of the following widget script";</script> right before the widget script itself.
Also, on your fixed loading time thing: with onload, it still won't run until every image and iframe on your website has loaded too.
It uses browser-specific event. onload is fallback.
I've tested the slow image (20 second delay instead of image) - no, it doesn't require loading of images, scripts fire up as soon as HTML finishes loading. Sorry.
document.write.to isn't something used by any browsers, it's something that my asynchronous document.write library uses instead of polluting the global namespace. Those image results are interesting, and I admit that I only took a quick skim of your code, so I may have been wrong to assume that it would be limited by onload.
It was. Thank you for noting that. It was your comment that made me look into window.onload and scrape it, replacing with more sophisticated browser-specific code. Thank you!
async= works as you would think but extsrc= loads all javascript sequentially which can make total page load times longer. I wrote up a bit about the tests here:
I've tested with Chrome/Ubuntu and Firefox/Ubuntu - works like it should.
ALPHA! Test it and let me know if your browser matches the reference rendering. If it doesn't - maybe we can do some fallback.
Quite a few bugs fixed by now. Please test it and leave bug reports.