Items could be displayed "lazily"

[benel]

When the portfolio contains thousands of items, the display of items takes time. One solution could be "lazy loading" (or to be more precise "lazy display").

Pull request #130 tried that already, but to be integrated it should be cleaned up and precisely tested (with metrics about the optimization benefits).

[benel]

@garnier5 Did you test it with with react-lazyload:2.3.0 (like in pull request #130) or with the last version (2.6.7)?

[benel]

@garnier5 I realize also that while the pull request did use react-layzload only for <img> this could be used instead for <Item>.

[garnier5]

Did you test it with with react-lazyload:2.3.0 (like in pull request #130) or with the last version (2.6.7)?

Indeed, I used the latest version of react-lazyload for my tests.

I realize also that while the pull request did use react-layzload only for this could be used instead for .

You can do it on items, but you have to take into account that the items names on which you haven't scrolled will not be available in the DOM, and therefore no possibility to do CTRL+F.

[garnier5]

Lazy-loading consists of waiting for an action from the visitor to load parts of the page. It allows, in pull request #130, to display images only when they are visible.

This practice has two main interests. First, the page loads faster. Without the lazy loading, the images appear together, and can block the consultation of the page for a more or less long period. Second, it saves server resources by limiting access to the database. The database is only queried to display the necessary images, saving a resource-intensive load if the user does not need the entire catalog.

However, based on the tests performed, the react-lazyload library used by pull request #130 does not provide the desired performance. First of all, from a factual point of view, it is true that lazy loading reduces the loading time of the different components of the page. Here are a few measurements made on a portfolio of 1770 items.

Lazy display for items (image and text) Corpus text	Items and topics text	First image	End of loading
173	2663	2713	4875

Lazy display for images Corpus text	Items and topics text	First image	End of loading
192	2875	3073	3375

Original loading Corpus text	Items and topics text	First image	End of loading
180	3850	4050	20000

At first it seems that the results are better for lazy loading. But the reality is quite different in the case of a machine with limited resources (CPU, RAM, internet connection...) : the user experience is clearly degraded. When scrolling the page, and the DOM has not yet been prepared, or the resources of the machine are already occupied by another task, all the content of the page disappears (text, css) and you scroll a completely blank page. The page loading time is never ending. Too bad for a technology that was intended to speed up page loading.

Conclusion

Lazy-loading is not a solution to give up. As we have seen, it has significant advantages when the page contains many items. However, the react-lazyload library doesn't seem to be optimized for low-powered machines: it should be avoided for the moment. Other libraries exist, and could be interesting to study to optimize the application. However, they seem to be optimized for the management of a list of items, and not only for the images of the items. https://github.com/bvaughn/react-virtualized Its improved version: https://github.com/bvaughn/react-window

Another very nice solution on image catalog sites: building an infinitely scrolling image gallery. In our case, it would be a gallery of items, but the principle is the same.

Here are a few examples: https://codepen.io/Chuloo/full/BMPXqy https://www.pexels.com/

One of the libraries that makes this possible: https://www.npmjs.com/package/react-infinite-scroll-component