<aside> 🧑‍🎓 This guide refers to critical request chains and LCP elements. Refer to these guide to learn how to identify them:

How to identify critical request chain?

How to identify critical rendering path?

</aside>

Hiding components off-screen can help to eliminate non-critical requests made by critical components. For example, given 24 products displayed on PLP, only 1 image will be counted as LCP element, while bandwidth for its load will be slowed down by 23 other images.

To avoid that, we can hide off-screen elements (products on PLP), resulting in decrease of consumed bandwidth. Instead of downloading LCP media along with 23 images, it will now just be 3, improving the overall time spent on critical chain load. Let’s consider the PLP critical request chain:

After, hiding off-screen components, will look as follows (less requests made along LCP media):

To achieve it, the following actions are required:

1. Wrap the component with RenderWhenVisible

Consider the following rendering logic (rendering product cards):

return (
  <li
    block="ProductCard"
    mods={ mods }
    mix={ mix }
  >
    <Loader isLoading={ isLoading } />
    { this.renderCardListContent() }
  </li>
);

First, import the RenderWhenVisible component:

import RenderWhenVisible from 'Component/RenderWhenVisible';

Next, wrap the logic of interest with it, providing fallback:

<RenderWhenVisible
  fallback={ () => <div block="ProductCard" elem="PlaceHolder" /> }
>
  <li
    block="ProductCard"
    mods={ mods }
    mix={ mix }
  >
    <Loader isLoading={ isLoading } />
    { this.renderCardListContent() }
  </li>
</RenderWhenVisible>

<aside> 🎉 This is how you hide off-screen components!

</aside>