Automatically insert loading="lazy", height, and width attributes on grid images?
Google pagespeed is dinging us for not having height and width attributes on all of our images, but one of the other things we discovered is that there is a browser supported function for lazy loading images.
( https://caniuse.com/loading-lazy-attr )
Browsers that don't support the attribute don't process anything so the images load the same -- pretty nice for backwards compatiblity.
Slimsy looks interesting, but I think we're looking for options like the /Views/Partials/grid/editors/media.cshtml
Do you know how the RTE media picker applies attributes / where that is done? (it would be nice to modify that for future media picker embeds in RTE. I can modify the existing ones via uSync + reimport)
It also appears that when I edit and hit save on the RTE, it is scrubbing/removing the loading="lazy" attribute. Thus, even manually editing doesn't stick.
Automatically insert loading="lazy", height, and width attributes on grid images?
Google pagespeed is dinging us for not having height and width attributes on all of our images, but one of the other things we discovered is that there is a browser supported function for lazy loading images. ( https://caniuse.com/loading-lazy-attr ) Browsers that don't support the attribute don't process anything so the images load the same -- pretty nice for backwards compatiblity.
More Info: https://web.dev/browser-level-image-lazy-loading/
Are there any strategies to automatically insert loading="lazy", height, and width attributes on grid images?
Thank you!
Hi Chris
With the old grid, you can update the rendering of images in the partial view:
/Views/Partials/grid/editors/media.cshtml
to update the img tag.
I'm not sure you've seen the plugin called 'Slimsy':
https://github.com/Jeavon/Slimsy
It does a lot of the hard work for generating responsive and lazy images...
but also on the Slimsy demo site, they have an example of how they have updated the above partial view to customise the img tag:
https://github.com/Jeavon/Slimsy/blob/dev-v4/src/Slimsy.TestSite/Views/Partials/grid/editors/media.cshtml
but all you might need to do is add the new attribute in the img tag!
Slimsy might get you a better page score though!
regards
marc
Slimsy looks interesting, but I think we're looking for options like the
/Views/Partials/grid/editors/media.cshtmlDo you know how the RTE media picker applies attributes / where that is done? (it would be nice to modify that for future media picker embeds in RTE. I can modify the existing ones via uSync + reimport)
It also appears that when I edit and hit save on the RTE, it is scrubbing/removing the
loading="lazy"attribute. Thus, even manually editing doesn't stick.you need to add
loadingto the allowed attributes for img in the ValidElements for the RTEis working on a reply...