Skip to content

Commit

Permalink
move some scripts and sprite.css to the head section
Browse files Browse the repository at this point in the history
  • Loading branch information
@timo
timo committed Nov 9, 2015
1 parent 1cd9db9 commit ecf43bf
Showing 1 changed file with 6 additions and 6 deletions.
12 changes: 6 additions & 6 deletions web/index.tmpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,12 @@
type="image/x-icon">
<link rel="stylesheet" href="assets/css/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://code.jquery.com/jquery-2.1.4.min.js"
integrity="sha256-8WqyJLuWKRBVhxXIL1jBDD7SDxU936oZkCnxQbWwJVw"
crossorigin="anonymous"></script>
<script src="assets/js/jquery.tablesorter.js"></script>
<script src="assets/js/main.js"></script>
<link rel="stylesheet" href="assets/css/sprite.css" property="stylesheet">
</head>

<body>
Expand Down Expand Up @@ -101,11 +107,5 @@
</footer>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"
integrity="sha256-8WqyJLuWKRBVhxXIL1jBDD7SDxU936oZkCnxQbWwJVw"
crossorigin="anonymous"></script>
<script src="assets/js/jquery.tablesorter.js"></script>
<script src="assets/js/main.js"></script>
<link rel="stylesheet" href="assets/css/sprite.css" property="stylesheet">
</body>
</html>

3 comments on commit ecf43bf

@zoffixznet
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm curious about the reasoning behind this commit.

All of those assets were deliberately placed in the footer so we don't block rendering of the page by waiting for them.

It's a pretty common tactic. In fact, we now lost some kudos from Google; it's telling us we should move non-essential assets from head to end of page: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fmodules.perl6.org%2F

The difference might not be obvious on a broadband connection, but if I try it on my mobile, I get about a 3 second delay before I see anything at all.

@timo
Copy link
Author

@timo timo commented on ecf43bf Nov 9, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Huh! I did this because the browser will notice these things as soon as it sees them in the incoming data stream and kicks off a request to get that stuff; in my local tests, it made loading everything a bit faster, but i may have misjudged it. feel free to revert this and the following commit!

@zoffixznet
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It does kick off requests, but then it blocks parsing until the scripts download and execute 😸 I think if you have a fast enough connection it might appear to load faster because the document you see is loaded all at once and you don't notice separate loading and instantiation of sprite and JS sorter plugin that modifies the way table headers look.

I've copied the repo to a local test server, limited speed to 11Mbps (average speed in US; sudo wondershaper eth1 11000 11000) and ran some benchmarks. Judging by when DOMContentLoaded event fires, moving only scripts to the bottom of the page shaves off 0.72 seconds off DOM load and moving both scripts and the non-essential sprite CSS to the bottom shaves off 2.32 seconds, which is 43% less than the 5.37 seconds until DOM load when everything is in the <head>.

Based on these results, the suggestion to do so on Google PageSpeed, and the suggestion to do so by YSlow Firefox plugin, I'm reverting this commit and moving scripts and non-essential CSS back to the bottom of the page.

Everything in <head>:

all-in-head

Only scripts at the bottom of page:

only-scripts-at-end

Scripts and sprite CSS at the bottom of page:

scripts-and-sprite-at-end

Please sign in to comment.