Improving front-end performance using the onLoad event

Question

I've been trying to improve our front-end webpage performance and trying go use webpagetest for some insights. Our current page load time is 8 secs.

Here is a waterfall view of our site - https://i.sstatic.net/uGMQr.png The blue line indicates the load event fired which decides the load time.

And here is a waterfall of another site which has a page load time of 4secs - http://i.imgur.com/NuO1Mao.png

The waterfalls of both the sites look similar apart from one glaring difference - The blue line (load event fired) of the second one is way earlier even though a lot of content is loaded after the onLoad firing event.

Am I right in thinking that if somehow I can make the onLoad firing earlier on my site, I will see improved perceived performance for the user? If yes, how do I go about it?

We're already using lazyload.js for lazy loading images
Most of our third part js files (Google Ads / Analytics) are being called near the bottom of the body element

Thanks a lot!

MildlySerious · Accepted Answer · 2013-10-29 08:22:47Z

1

There is the alternative "domready" event, which is also what jQuery uses. It is triggered when the DOM tree was built and does not wait for external resources (mostly images) to load, what the onload event does.

With that loading time it's pretty likely you are using a JS framework that is supporting the domready event already, which you should consider using, then.

You will likely have to rewrite a good portion of your scripts, mostly if you are expecting image width/height to be correctly set.

If you have access to jQuery, you can use something like that:

$().ready(function() {
    loadHandler();
});

If jQuery is no solution, you should propably take a look at this extraction of jQueries domready function, because there are a lot of quirks to look out for.

edited Oct 29, 2013 at 8:22

answered Oct 29, 2013 at 8:16

MildlySerious

9,2403 gold badges31 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Prakhar Over a year ago

I'm not sure if I understand what I need to do. Yes we are using jquery and we are running code on domready. To call the onLoad event earlier will using the code above do the needful?

MildlySerious Over a year ago

You can't call the onload event earlier. You can only migrate your scripts to use domready instead of onload. For anything that doesnt require the width/height of images or their parent elements, that shouldn't be a problem.

Collectives™ on Stack Overflow

Improving front-end performance using the onLoad event

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related