0

I am creating a web page that will have 120 items (image + description + link) each displayed in a fixed sized div.

Will the page render quicker if I include only 30 items in the HTML, put blank (fixed size divs) in place of the other 90, and load the contents of the other divs as the user scrolls down the page?

I think possible advantages of this lazy loading might be:

  • HTML file less than 50% of original size (however, this may not affect loading speed as I would expect the browser to display the top-most elements as soon as they are loaded)

  • Top 30 images will load faster as they are not competing with the other 90.

Are these assumptions valid? Will the page render faster? What else is relevant? (e.g. fewer DOM elements at first, JavaScript overhead, etc.)

Paul S
  • 230
  • 2
  • 9
  • "Top 30 images will load faster as they are not competing with the other 90" I think the browser limit for concurrent connections in most browsers is 6, so all your images are contending for those 6 slots. – spender Nov 27 '14 at 20:17
  • ...that should read "the browser limit for concurrent connections *to a single host* in most browsers is 6" – spender Nov 27 '14 at 20:24

2 Answers2

1

Well, yes and no...

The page might start rendering slightly earlier because of the smaller document size, and the time to render the page might be slightly shorter because there are fewer elements, but neither of those are likely to be even noticable.

The images won't load faster because there are fewer images on the page. The number of simultaneous loads from the same host is still a lot lower than the 30 images that you plan to load initially. The images will normally start loading from the top, so for the top images you won't notice any difference from the missing images lower any page.

What's relevant is how much the browser will have to load and run before it can start to render the actual page. For example, any Javascript files that are loaded in the head of the page will have to load and run before the browser can render any of the content.

Guffa
  • 687,336
  • 108
  • 737
  • 1,005
  • Good point about the images, I'll make a test using robohash images to see if they seem to load in order. The JS for lazy loading can be put at the bottom of (or delayed loaded from an external file). That leaves 'the page might start rendering slightly earlier'. Are you able to suggest what order of time this might be? Even milliseconds seem to matter for page loading times: http://stackoverflow.com/questions/14510499/is-a-200ms-decrease-in-page-load-time-significant – Paul S Nov 27 '14 at 20:57
  • Here is a test loading 120 unique images (these seem to load in order when opening the link, but bizarrely load out-of-order if the link is opened in a new tab in Firefox v33 !) : http://web-c7e36bb1-c9f9-4fc7-95da-01d647d073c3.runnable.com/ – Paul S Nov 27 '14 at 21:15
  • @PaulS: You might be able to shave off some of the loading time, but whether that is enough to make a difference depends on your situation. As a comparison; a regular screen (60 Hz) updates about every 17 ms, so a change smaller than that is not even possible to see. – Guffa Nov 27 '14 at 21:22
0

I would say the page would render quicker, and feel quicker for the use.

However there are other things you could try:

  • I presume you have optimized your images to start with?
  • If there is a 'previous' page to this, you could pre-load the images in the background so that they are already cached when the user gets to this page?
  • Perhaps you can combine all your images into 1 big image (single http request) and use CSS to cut/position them separately
user3722152
  • 1
  • 2