IMG vs TEXT?

2018-06-03 09:31:20

The timeline shown here (captured using IE's F12 developer tools) illustrates how IE handles a page where an <img> tag is located after of a bunch of text :

在这里输入图像描述

The second row shows the retrieval of the image. Since the image is small, all of the image data is included with the HTTP response headers in the same packet.

However - The next timeline shows what happens when the <img> tag is located close to the beginning of the file so that it's in the first packet of data received by IE:

However, the request for the image starts shortly after the first packet of HTML arrives.

As a result, it takes less total time to retrieve the page and the image

But (IMHO) it is better to put images (with defined dimensions) on the bottom of that page. ( so that the page will load faster)

However - by my example it shows that the page is loading faster when the img is on top.

What am I missing ?

PS my question is a briefly summarized text of this section

You are missing several points. First, the best practices are not only about downloading, but about rendering as well, because if the whole page is downloaded for 3s but in require another 2s to be rendered, the user waits 5s, not 3s. I don't know best practice for putting images at the bottom (there is such for scripts), the best practice I know is to include width and height attributes so you do not block rendering while the image is being downloaded.

Another thing you are missing in your test is parallel downloading, as browsers limit the number of concurrent connections and you are testing with only one image. Make your tests with more images, or best - with a real web page, in order to have reliable results.

I'd rather bother about lessing number of connections, - loading whole page at once. Split interface and content parts. Once interface loaded - it can ask user to wait and inform him about connection speed. Then put a progress bar and inform user about how things go.