Defer offscreen images

Overview

Deferring offscreen images (or lazy-loading) refers to the practice of delaying the loading of images that aren’t in your visitors’ viewport until they are needed.

When the browser loads a page, it downloads all the images requested, including ones that aren’t immediately visible to your visitors.

Lazy-loading offscreen images is considered an industry best-practice as it ensures that the browser only downloads the images that are actually needed for display in the viewport.

How does deferring offscreen images affect page performance?

Images are often the largest resources on your page and require more time to download compared to text-based resources.

Lazy-loading offscreen images ensures that they only load when they are needed.

How to defer offscreen images?

Using Staq Cache

No need for risky WordPress plugins or Javascript coding experience, Lazy Load images using Staq Cache plugin.

Staq allows you to optimize and compress images automatically.

You can compress the following images:

• png
• jpg
• WebP

Inside Staq Hosting, click Media in the horizontal tab. Then, click WEBP Image and Standard Image. From there, you can play with the settings:

You can then specify images that you don’t want to lazy load – this is usually images above the fold that you will see as soon as you load the page, such as site logos, banners etc.

Please note that when an image is uploaded via Media Library in WordPress whilst hosted on Staq, we transfer the original image into an AWS S3 bucket for safekeeping and via AWS Lambda, compress and optimize the duplicate image.

Staq will always have the original image you’ve uploaded just in case you wish to change the compression settings in the future.