Loading render blocking script before image

Question

I have a page with the following structure:

<html>
  <head>
    <script type="text/javascript" src="//example.com/s1.min.js"></script>
    <script type="text/javascript" src="//example.com/s2.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
  </head>
  <body>
    ... template initiation, layout, etc. ...
    <ul>
      <li><img src="https://cdn.example.com/img1.jpg"/></li>
      <li><img src="https://cdn.example.com/img2.jpg"/></li>
      <li><img src="https://cdn.example.com/img3.jpg"/></li>
      ... and a lot more images ...
    </ul>
    ... a bunch of scripts here ...
  </body>
</html>

When I simulate slow connection using Chrome devtool, the page was blank for up to 1 minute because the jquery script in head was blocking the DOM. The script took that long to load because Chrome was downloading the images at the same time as the script, saturating the bandwidth.

I don't understand this behaviour. I thought render blocking scripts in head gets downloaded first before anything else in body? The test evidence proved otherwise.

I can't easily move the jquery to the bottom of page or make it async as it might break other scripts in the page that I don't own.

I have seen a lot of discussion about removing render-blocking script. But my question is more about why the render-blocking script not getting 'priority' download? And if there is anything I can do to guarantee the 32KB script is downloaded the DOM loaded before the network gets saturated by image download?

Edit: Here's the timeline graph. Notice how jquery is requested first, but does not block the images. timeline graph

[Scripts have to be loaded and executed before the loading of the images can start.](https://stackoverflow.com/questions/28635141/sequence-in-which-html-page-loads) At least that's what the browser is supposed to do. — Derek 朕會功夫, Oct 21 '17 at 06:47
there is a discussion of the same topic here https://stackoverflow.com/questions/2703468/is-it-possible-to-run-javascript-before-any-image-loads — Muhammad Soliman, Oct 21 '17 at 06:47
@Derek朕會功夫 Yes, that agrees with my understanding as well. I am now suspecting the browser is being smart and tries to do speculative fetching. I can't find any documentation about this behaviour though. — Hendrik Poernama, Oct 21 '17 at 07:58

score 0 · Accepted Answer · answered Oct 21 '17 at 07:38

A common aproach to delay the loading of the images would be something like this:

$(function(){
  $('img[data-src]').each(function(){
    if(!this.src) this.src = this.dataset.src;
    delete this.dataset.src;
  })
  //just to show the resulting markup, as the image-urls are just placeholder
  console.log($('ul').html());
})

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
... template initiation, layout, etc. ...
<ul>
  <li><img data-src="https://cdn.example.com/img1.jpg" /></li>
  <li><img data-src="https://cdn.example.com/img2.jpg" /></li>
  <li><img data-src="https://cdn.example.com/img3.jpg" /></li>
  ... and a lot more images ...
</ul>

Loading render blocking script before image

1 Answers1