With the latest updates to JetSloth’s Gravity Forms Image Choices Add-on, we’ve included a highly requested feature, Image Choices Lazy Loading – to help with users that have lots of image choices in their forms.
If you’re already using a lazy loading plugin or have enabled lazy loading in an optimisation / caching plugin such as WP Rocket, you may have noticed that they don’t get applied to images in Gravity Forms, or in your Image Choices due to the way these are rendered. We realise that images usually make up the largest part of a page load, so we’ve finally tackled it with a dedicated implementation of lazy loading for image choices. Long overdue, we know.
We’ve helped reduce users page load times by half with this clever little feature just added to Gravity Forms Image Choices.
Image Lazy Loading in Image Choices
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 customers 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
How to activate lazy images in your Gravity Forms
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.
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.