A couple of people have complained about my pages taking too long to load. I make extensive use of high quality gifs and it seems they all load at once on page load.
This uses a lot of bandwidth and has slow ux.
Can you add lazy loading to the images based on what is visible?
Here is gpt-4s response:
Here are several libraries for lazy loading images:
lozad.js: Lozad.js is a lightweight option for lazy loading and multi-serving images, videos, iframes and more. It uses the Intersection Observer API, which is a modern and efficient way to react when an element enters or leaves the viewport.
lazysizes: Lazysizes is a high performance and SEO-friendly lazy loader for images, iframes, scripts, and more. One of its unique features is that it can automatically calculate the sizes attribute for responsive images based on actual layout width.
Remember to test lazy loading libraries with your specific use case to ensure compatibility and effectiveness. Also, as of late 2021, native lazy loading has been introduced to modern browsers like Chrome, Firefox, and Edge with the
loading="lazy" attribute for
<iframe> tags, so you may not need a library at all for simpler use cases.
Rather than ask the site Admins to re-code their site in order to accommodate your "extensive use" of large files, could you maybe not be so "extensive"? Seems rather self-indulgent.
Gif is a horrible format for video - it's very data hungry. Implementing lazy loading as a remedy is like a bandaid over a bullet hole.
I do not approve this approach.
You are by far the only one who is trying to change this thing.
While others are using regular, very small gifs.
So, my answer is:
Instead adding some bandaid like @jiwenji said, it could be helpful to add frame+size limit on thumbnail gif, to prevent the problem itself... If you want to use it as thumbnail, its fine, but make sure its fast and small (so even the oldest android wont get stuck on loading/viewing it). We do not need 15MB 300frame HQ gif on every posted model and every one of them being lazy-loaded.
That's just, so... bad.. idea.
Use a smaller filetype instead of gif. Like webp, or apng, or avif if they're supported. I know at least webp animations are supported and can have better quality than gif at half the size. That would make your animations load twice as fast.
Also, civitai already implements lazy loading. That's why when you scroll down it has to load more posts. And why when you click next image it hasn't always loaded it yet. Their lazy loading could potentially be optimized further but I wouldn't say it's worth the time investment for the tiny performance improvement it would bring.
When I visit your pages I don't experience any extra "page load" time. The pages load normally for me then I'm just waiting for the gif animations to fully load, but they are at least showing the first few frames right away.