top of page
Writer's pictureBrent D. Payne

Defer offscreen images

The URL in question here is found with images loaded entirely by the browser, despite not being immediately seen on the screen by the user.


Why is this important?

As a browser brings up a webpage, it insists on loading all elements, comprising images tucked away offscreen. These images are not an immediate necessity for the initial page view, thus prolonging the Time to Interactive—the total time until the page is fully available for user interaction.


What does the Optimization check?

The Optimization is activated for any internal URL harboring offscreen or concealed images that don't employ lazy-loading techniques.


How do you resolve this issue?

You can tackle this concern by adopting lazy-loading for images that situate below the visible area of the webpage, ensuring the browser loads only what's needed for the immediate viewport display. To reduce Time to Interactive, implement lazy-loading after the browser has finished handling essential resources.


Here's an example of how it can be done:

<img src="example.jpg" loading="lazy" alt="Example image">


Different methods for enabling lazy-loading exist, requiring a cooperative effort with your developer to pin down the optimal path for your specific website situation.


Further Reading

6 views
bottom of page