A place to gather resources, issues, and solutions to optimize website speed

Develop, Build & Integrate CMS Development
,
10

Hi Jon!

I think the option to use native lazy loading would be great! I recently created a custom image module that incorperates lazy loading, but having this loading=“lazy”, native browser option in hubspot would a +1.

Here’s a preview into the code:

{% if module.image_field.src %}
	{% set sizeAttrs = 'width="{{ module.image_field.width }}" height="{{ module.image_field.height }}"' %}
	{% if module.image_field.size_type == 'auto' %}
		{% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
	{% elif module.image_field.size_type == 'auto_custom_max' %}
		{% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.image_field.max_width }}px; max-height: {{ module.image_field.max_height }}px"' %}
	{% endif %}
	<img src="{{ module.image_field.src }}" alt="{{ module.image_field.alt }}" {{ sizeAttrs }} loading="lazy">
{% endif %}

The only thing is, this is a LOT of work to switch out our old image modules with the new lazy loading one. If there was an option to flip a switch to automatically turn all the OLD image modules to native lazy loading that would be AMAZING. Because we still haven’t switched all our image modules, as you can see it’s very time consuming and feel as if I will never get finished with it as there are some pages like blogs that don’t have an image modules used in the design manager (and this is just one example) etc etc.. very convuluted!