Rendering only when visible

There is a page loading performance improvement that can be made when rendering components. It is only a benefit if you have a page that scrolls, and components are initially drawn off the visible page. Only use this technique if you have scrollbars, otherwise you'll actually be slowing your page render.

If the component is off the page initially, then this method can be used to only begin rendering the component when it becomes visible on the page.

This method uses the "intersection observer" technology behind the scenes. Technically speaking, when the "isIntersecting" property of the observed element is true, then the component renders.

The component being observed should ideally have a CSS height. If you have lots of components one after the other of zero height, then they otherwise may all render at once. Setting a height to the component at the CSS level will allow the component to render only when it would be visible on the page when fully drawn.

To set up a component to do this, add the render-when-visible option to the component.

Eg.

@component hello-world render-when-visible {
    html {
        <p>Hello world.</p>
    }
}

All the code editors on this website use render-when-visible, and you will see a massive improvement in page loading times if you have a lot of components to draw on the same page, one below the other. The liability is that the user will actually see the component render, and this is noticeable when the code editors on this website are drawn. It doesn't particularly matter in this scenario, all things considered. It saves on resource loading and makes the page render faster on page load, and the staggered drawing doesn't really matter because it is very fast. The benefits of using this option far outweighs the slightly staggered render time.

However, there are other benefits to using this method. This is especially true for components that perform animations at a certain scroll point and have a definite starting sequence that you want the user to see. Using render-when-visible means that the user can see the start of the animation sequence, and not catch it half-way through or miss it entirely. Just remember to set the CSS height property for the components that use render-when-visible.