Image Lazy Loading

For anyone not aware, lazy loading is the practice of delaying a load of resources until they’re actually needed, to improve performance and save system resources. Lazy loading reduces page weight, allowing for a quicker page load time. It conserves bandwidth by delivering content to users only if it’s requested. And it conserves both server and client resources because only some of the images actually need to be rendered.

We’ve helped drastically reduce some customer’s page load times with this clever little feature just added to Gravity Forms Image Choices. In one instance, with several hundred image choices, the initial page size went from approx 6Mb down to just over 1Mb by simply enabling this new setting

Activate image lazy loading for Image Choices

It’s fairly simple to get your form lazy loading your images in Gravity Forms. Firstly, update to the latest version of Gravity Forms Image Choices form your WordPress dashboard. From version 1.3.21 onwards, Image Choices now includes image lazy loading as an option. See the changelog for more updated details.

Once updated, go to your forms settings screen and navigate to the Image Choices settings. Activate the image lazy loading setting from the settings screen as seen below.

Image Choices Lazy Loading for large forms — Turn on image lazy loading

With lazy load enabled, the images in choices will be loaded only as they enter (or about to enter) the viewport. This reduces initial page load time, initial page weight, and system resource usage, all of which have positive impacts on performance.

You can set the lazy loading setting on at the global form settings level or override the setting at the form level, giving you the most control.

Bundle & Save

Activate image lazy loading for Image Choices

JetSloth