Non onload blocking async JS evolved

Evolutionary Page

This page will load 3rd party script files through "frame-in-frame" method which is not so new technic but was experimentally implemented into the facebook SDK as truly asynchronous loading.

Navigation Timing

Here's the timing of DOM ready (≒domContentLoadedEventEnd) and window.onload (≒loadEventEnd) mesured by Navigation Timing (see browser compatibility).

See more details...

Revisiting onload

What's the value of onload? Is it only a timing in order to know when to kick up some messy scripts?

If a site is free from curse of 3rd party script which blocks onload, the timing of firing onload will be equal to the best timing for the visitors to read main contents. This'll be ideal for the front-end.

And you have a good chance to claim fair rating to the site speed to Google.

Drawback

This method requires additional HTTP request. Minimizing HTTP request should be taken into the consideration before appling this approach as "Best Practices for Speeding Up Your Web Site" says.

After that, all of the request to 3rd party request should be packed into one file in order to add only one HTTP request.

Comments

comments powered by Disqus