top of page
  • Writer's pictureBrent 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

1 view0 comments

Recent Posts

See All

The skip-link target should exist and be focusable

At Loud Interactive, we're committed to ensuring that digital accessibility is at the forefront of website design and development. During our SEO audits, we look for and attempt to identify an area of

Timed meta refresh must not exist

At Loud Interactive, we regularly perform a SEO audits. We often stumble upon an important issue that could significantly impact user experience and accessibility on websites. We're talking about the

bottom of page