Reputation: 231

using linebreaks to optimize html page load

Please find the code given below:

<img src="test1.jpg" width=50%/>
<img src="test2.jpg" width=50%/>
<img src="test3.jpg" width=50%/>
<img src="test4.jpg" width=50%/>

Will the performance be improved if I include linebreaks in the relevant places? (as below):

<img src="test1.jpg" width=50%/>
<img src="test2.jpg" width=50%/>          <br/>
<img src="test3.jpg" width=50%/>
<img src="test4.jpg" width=50%/>

Upvotes: 2

Answers (2)

Misunderstood

Reputation: 5665

YES

I did not think it would have any affect, but it did.

But in your case probably NO.

I benchmark all sorts of page load scenarios., one of them being images without width and height. Where the HTML looks like this:

elseif(intval($_GET['rev']) == 5){ 
echo<<<EOT
<!DOCTYPE html><html lang="en">
<head><title>img no wxh</title><style type="text/css"></style></head>
<body><div>
<img  alt="image 00001" src="Image00001.jpg"/>
<img  alt="image 00002" src="Image00002.jpg"/>
<img  alt="image 00003" src="Image00003.jpg"/>
<img  alt="image 00004" src="Image00004.jpg"/>
...
<img  alt="image 00055" src="Image00055.jpg"/>
<img  alt="image 00056" src="Image00056.jpg"/>
<img  alt="image 00057" src="Image00057.jpg"/>
<img  alt="image 00058" src="Image00058.jpg"/>
</div></body></html>
EOT;

I copied that test and added <br/> after each image.

elseif(intval($_GET['rev']) == 6){ 
echo<<<EOT
<!DOCTYPE html><html lang="en"><head><title>base64</title><style type="text/css"></style></head><body><div>
<img  alt="image 00001" src="Image00001.jpg"/><br/>
<img  alt="image 00002" src="Image00002.jpg"/><br/>
<img  alt="image 00003" src="Image00003.jpg"/><br/>
<img  alt="image 00004" src="Image00004.jpg"/><br/>
...
<img  alt="image 00055" src="Image00055.jpg"/><br/>
<img  alt="image 00056" src="Image00056.jpg"/><br/>
<img  alt="image 00057" src="Image00057.jpg"/><br/>
<img  alt="image 00058" src="Image00058.jpg"/><br/>
</div></body></html>
EOT;

I ran each scenario two times. Tested with Google Chrome Browser.

FIRST RUN NO BREAKS

TTFB    200 mS
DOM Loaded  326 mS
First Paint 791 mS
Start Render    985 mS
Load Time   2,074 mS
Rendering   1,198 mS
Fully Loaded    2,240 mS
Visual Complete 2,183 mS

SECOND RUN NO BREAKS

TTFB    277 mS
DOM Loaded  358 mS
First Paint 656 mS
Start Render    692 mS
Load Time   2,138 mS
Rendering   1,500 mS
Fully Loaded    2,221 mS
Visual Complete 2,192 mS

WITH Line Breaks

Faster Page Rendering and Visually Complete was much sooner.

FIRST RUN WITH BREAKS

TTFB    220 mS
DOM Loaded  377 mS
First Paint 894 mS
Start Render    991 mS
Load Time   2,263 mS
Rendering   199 mS
Fully Loaded    2,426 mS
Visual Complete 1,190 mS

SECOND RUN WITH BREAKS

TTFB    206 mS
DOM Loaded  355 mS
First Paint 866 mS
Start Render    889 mS
Load Time   2,267 mS
Rendering   399 mS
Fully Loaded    2,422 mS
Visual Complete 1,288 mS

The question I had was Why?

The answer is in the difference between Visually Complete and Fully Loaded.

This is why Google is so concerned about "above the fold content" in Page Speed Insights.

These images were small as shown here with width and height:

<img width="90" height="90" alt="image 00001" src="Image00001.jpg"/>
<img width="120" height="79" alt="image 00002" src="Image00002.jpg"/>
<img width="112" height="90" alt="image 00003" src="Image00003.jpg"/>
<img width="111" height="90" alt="image 00004" src="Image00004.jpg"/>
<img width="75" height="90" alt="image 00005" src="Image00005.jpg"/>
<img width="92" height="90" alt="image 00006" src="Image00006.jpg"/>
<img width="90" height="90" alt="image 00007" src="Image00007.jpg"/>
<img width="112" height="90" alt="image 00008" src="Image00008.jpg"/>
<img width="118" height="90" alt="image 00009" src="Image00009.jpg"/>

Without the line breaks every image was visible "above the fold"

Why will this not work for you?

A width of 50% will likely render the same as if there was a line break after each image. 50% does not allow two images to be side by side because the small space between the images which take the horizontal over 100%.

If the CSS removed the right and left margins and the images did not have the actual line feed they might render two side by side. Or if the width were 49%

This HTML will convert the line feed to a space between the images:

<img src="test1.jpg" width=50%/>
<img src="test2.jpg" width=50%/>

No space between

<img src="test1.jpg" width=50%/><img src="test2.jpg" width=50%/>

Or if the width were 49%

<img src="test1.jpg" width=49%/>
<img src="test2.jpg" width=49%/>

Plus large images will fill the above the fold faster than small images.

First paint vs. Start Rendering

First Paint layout the "wire frame". In my test scenario with width and height the first paint layout the images and the box they image will occupy. I can actually see the alt text in the boxes.

Without the width and height First Paint does not know the size of the image so it cannot save the space required in the wire frame boxes.

The rendering must rearrange everything as each image is retrieved.

UPDATE

I added a width="50%" to every image in both scenarios.

No Line Break

<img width="50%" alt="image 00001" src="Image00001.jpg"/>

TTFB    211 mS
DOM Loaded  365 mS
First Paint 1,022 mS
Start Render    1,091 mS
Load Time   2,319 mS
Rendering   0 mS
Fully Loaded    2,494 mS
Visual Complete 1,091 mS

TTFB    203 mS
DOM Loaded  256 mS
First Paint 546 mS
Start Render    594 mS
Load Time   1,838 mS
Rendering   0 mS
Fully Loaded    1,987 mS
Visual Complete 594 mS

WITH line breaks

<img width="50%" alt="image 00001" src="Image00001.jpg"/><br/>

TTFB    256 mS
DOM Loaded  352 mS
First Paint 740 mS
Start Render    793 mS
Load Time   2,110 mS
Rendering   0 mS
Fully Loaded    2,260 mS
Visual Complete 793 mS

TTFB    200 mS
DOM Loaded  285 mS
First Paint 653 mS
Start Render    691 mS
Load Time   1,978 mS
Rendering   0 mS
Fully Loaded    2,132 mS
Visual Complete 691 mS

UPDATE TWO

Regarding your comment about the 50% and side by side I tested in

Chrome
FireFox
Safari
Opera
IE 8

And the results were just as I predicted., not side by side. I change the code like this:

<img width="50%"  alt="image 00001" src="Image00001.jpg"/><img width="50%"  alt="image 00002" src="Image00002.jpg"/>
<img width="50%"  alt="image 00003" src="Image00003.jpg"/><img width="50%"  alt="image 00004" src="Image00004.jpg"/>
<img width="50%"  alt="image 00005" src="Image00005.jpg"/><img width="50%"  alt="image 00006" src="Image00006.jpg"/>
<img width="50%"  alt="image 00007" src="Image00007.jpg"/>
<img width="50%"  alt="image 00009" src="Image00009.jpg"/>
<img width="50%"  alt="image 00011" src="Image00011.jpg"/>
<img width="50%"  alt="image 00012" src="Image00012.jpg"/>
<img width="50%"  alt="image 00013" src="Image00013.jpg"/>

I also tried it with and without the div surrounding the images.

In all five Browsers, the page renders like this:

Upvotes: 2

Pritam Parashuram Thakur

Reputation: 133

When HTML page is loaded in browser, all elements are displayed in floated style, if second image width is larger than maximum page width, it will be displayed below first image, this is managed by browser internally. What does matters here is how much byte size your image is, because page load means transfer of data between server and client.

Upvotes: 1