Does anyone think I need to implement lazyload for this site?
https://sashaportis.com/cindy/starterkit-master-FINAL/archive/graphica
The above page is about the max of how many images will be on the exhibition pages. I tried implementing but couldn’t get it to work, and not even sure it’s needed…?
For image-heavy sites, I usually recommend it at some point. There are great libraries like lazysizes, layzr etc just check GitHub and see what fits your bill - implementing them mostly requires only replacing src with data-src and you’re set.
Nevertheless, even with lazyloading, the images should be optimized first for use on the web and make sure you use srcset to load the right image for different screen/usage sizes.
I used to use lazysizes, but lately I don’t use it anymore in favor of browser level lazy loading icw height and width attributes on <img> to avoid page layout yank.
I see it as progressive enhancement; it works in all chromium browsers and firefox. Safari’s status is “in progress”, so it should get in sooner or later.
Many JS plugins (lazysizes as well, using a plugin) respect an image’s native loading attribute - but you do t want layout shifts, totally!
Hmm, that seems great. I tried loading that into the img tag, and I have chrome 85, so should work. But not seeing it working in the network developer window.
<img loading="lazy" src="<?= $image->url() ?>" alt="" >
I assume your images are in the viewport on load (there is no text between them so they aren’t really “pushed down” to make the lazy loading offset define if they should be loaded or not. Try again, but with some text between each image. Or, add at least the width and height attributes to each image.
PS: your images are huge. Please fix this too.