Will using Lazy Loading make my webpage appear quicker

Question

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.)

Answer 1

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

Answer 2

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.