Question: Image - inline Script - image, are the images parallel?

Souders just posted the following tweet.

Someone out in #webperf land should test how inline scripts block downloads - eg, image - inline script - image - are the images parallel?

So here is my response to the question...

Answer: No

The Test Page

The page itself is pretty simple, two images served from placehold.it and in between them, jQuery 1.5.2 in an inline script block. Take a look at the sample test here.

The Tests

Using webpagetest.org, I ran the scriptTest.html file through IE6|7|8|9 and Chrome 11. In each of the browsers the waterfall graph comes out the same. The inline script blocks any more downloads until the script has finished parsing and been run.

Waterfall Graphs

Here are the waterfall graphs for each of the browsers on webpagetest.org

IE6

Test Results

IE7

Test Results

IE8

Test Results

IE9

Test Results

Chrome 11

Test Results

But Wait!

This isn't just about images and inline style blocks. What happens when we use a style sheet? Will it give the same behavior?

Next Test

Here is a new test, it has an external style sheet (style.css), the inline JavaScript block, another external style sheet (screen.css) and an image from placehold.it.

Results

In each case the inline JavaScript is blocking the page from getting any more resources. As soon as the JavaScript has been processed it can then move on to getting the background image, screen.css and the placeholder.it image.

IE6

Test Results

IE7

Test Results

IE8

Test Results

IE9

Test Results

Chrome 11

Test Results

Conclusion

Be careful with your inline blocks. They CAN AND WILL hold up the rest of your page when they are encountered.