Be Yours comes with an ability to make the initial page load much faster.
On this page
The mechanism
Typically, the browser renders almost all elements on a page. Even when you’re at the top, the parts at the bottom of the page are still involved.
But not anymore, there’s a new CSS property in town called content-visibility. You may want to ignore these complex terminologies. To visualize, the technique skips the rendering of page's elements until they’re about to come into your view. This ability is now integrated into Be Yours. We can tell the browser to defer the rendering work of certain page segments, like layout-heavy sections, and only render them when they are about to be visible.
In our demo, applying content-visibility to home page's sections gives a 5x rendering performance boost on initial load.
Pros and Cons
Obviously, this helps reduce the rendering cost of long pages without breaking in-page search or SEO. Imagine that you have a dropshipping store and many sections on the home page representing products or collections; or a kind of showcase store whose landing page is filled with plenty of images, and the technique is beneficial to these cases.
However, this technique also comes with its limitations and bugs. If you scroll the page, you’ll see that the scrollbar appears rather jagged, that’s the page content adjusting itself to the new content being rendered. And because the un-rendered elements loose their height in the layout, sometimes you can see the content appears in a bit laggy as the mouse scrolling.
It is also important to note that this technique is not full-compatible. It is currently not supported on Firefox and Interner Explorer:
Need Further Assistance
If you encounter any issues or need additional help with your theme, don't hesitate to reach out to Roartheme's support team for expert guidance.
Scan the QR code to get support within 8 hours via RoarTheme ’s Whatsapp
