« HE:labs

Put Scripts at the Bottom

Postado por Dirceu Pauka Jr em 23/07/2014

While a script is downloading the browser won't start any other downloads, even on different hostnames. Have you ever noticed in some websites where the page seems to be loaded but the screen hangs white for some time while it's still loading more?

This does not happen when all scripts are placed at the bottom. It is a best practice in order to speed up your website: Put scripts at the bottom.

In some situations, it isn’t easy to move scripts to the bottom. It’s also a best practice not to have inline JavaScript in your pages. But it may have some inside a specific page and it may need a variable or a framework to work correctly.

In this case and when using HAML you can define a place in your layout to page specific scripts be executed after what they need is loaded:

1 <script src="/jquery.js"></script>
2 <script src="/app.js"></script>
3 = yield :after_js_code

And then in the specific page:

1 - content_for :after_js_code do
2   :javascript
3     $('section').hide();

One more thing

Loading secondary content after page style and script will help your page load faster. For external widgets, for example, Facebook Like box, you can do the following:

1 $(window).load(function() {
2   $('#facebook_like_box')
3     .html('<iframe src="https://www.facebook.com/...></iframe>');
4 });

For images you can use Lazyload, the standalone JavaScript lazyloader or the jQuery Lazyload plugin.

Thank you for your attention and for making a faster Internet.

More best practices for speeding up your website: https://developer.yahoo.com/performance/rules.html


Sabia que nosso blog agora está no Medium? Confira Aqui!