How to Speed up Rendering pages which include lots of JavaScript

When referencing an external JavaScript file within the head tag of your HTML, the rendering of the page is halted while the external JavaScript file is downloaded and loaded.

In order to speed up rendering of the page, you can move your javascript_include_tag from your head tag to the last line within your body tag like this:

<head>
...
</head>
<body>
...
  <%= javascript_include_tag :defaults %>
</body>

If you have a lot of inline JavaScript, you may also decide to move them from the head tag into the body tag.

The amount of time spent viewing an empty page in the browser is shortened when doing the above.

VN:F [1.9.22_1171]
Rating: 5.0/5 (2 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)
How to Speed up Rendering pages which include lots of JavaScript, 5.0 out of 5 based on 2 ratings
Facebook Twitter Email

One Comment to “How to Speed up Rendering pages which include lots of JavaScript”

  1. Mike Fischer 9 January 2010 at 7:36 pm #

    Thanks! I’ve been using yslow to optimize my site, and it suggested moving the JS to the bottom, but I hadn’t gotten around to it till I came across your post.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: +1 (from 1 vote)

Leave a Reply