I redesigned my data loading strategy following this answer. My page displays a list of objects components (on a single page, between 30 and 150 items, sorted by section of one to 5 items maximum). Each of these objects have an image component.
The loading order is as follows:
- The objects data isn't loaded, so I use a placeholder like this:
- The objects data is here so I display the objects components, but since I have not the image yet, I use a dataUrl low definition placeholder, as described here. FYI, the placeholder is 120 Bytes and shipped with the original data, the real image is 1.7 Kbyte so this is a nice deal.
- I have several parameters attached to my image component. One of them is lazy loading: if it is on, it will fetch the image only when its related object is in screen.
The final result is awesome, very clean and fast. The initial load has this "wait for it... coming...." feeling that helps a lot with the loading times related user experience.
However, I noticed that on the big websites such as Quora, Medium, etc. images are not lazy loaded, or at least not the way I do it: after the page has been loaded, even if it is not in the screen, the image is fetched in order to avoid to rely on the low definition placeholder everywhere.
That makes sense to complete the closest off-screen elements when you can, in preparation of the next user moves.
I would like to know if the options have been studied and if there is a consensus on how to do it right. As I see it it can be done 3 ways (possibly all-together):
- You load only what the user can see (what I do)
- After x second on the page, you load (some or all of) the off-screen assets
- You load the closest off-screen assets, e.g. those placed x pixels below the current position.