Optimize Core Web Vitals - FCP and LCP: Lazy-Loading Offscreen
To ensure the
style="display: none".title
Welcome to HTML Test Content
A simple example for practicing HTML and CSS
About This Page
This page contains various HTML elements to help you test
and practice.
Text formatting
Images and links
Tables and lists
Forms and inputs
Show Map
Enter fullscreen mode
Exit fullscreen mode
However, when inspecting the page, we can see that the contentDocument of the is fully loaded even before any user interaction, as shown in the image below:To prevent unnecessary resource loading before user interaction, add the attribute loading="lazy" to the .
...
...
Enter fullscreen mode
Exit fullscreen mode
When inspecting the page, we notice that the element has an empty contentDocument before the user interacts with it.Additionally, when we check the Network tab, we can see that the resources for the are not loaded before the user clicks the button.After clicking the button, the resources for the are successfully loaded:Feel free to follow me on GitHub 🎉