So, the client wants me to implement lazy loading.
I thought, what the fuck is lazy loading!?
Cuckzilla:
https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading
> Overview
>
> As the web has evolved, we have come to see huge increases in the number and size of assets sent to users. Between 2011 and 2019, the median resource weight increased from ~100KB to ~400KB for desktop and ~50KB to ~350KB for mobile. While Image size has increased from ~250KB to ~900KB on desktop and ~100KB to ~850KB on mobile.
So basically, you're aware that there's a problem, great!
> One of the methods we can use to tackle this problem is to shorten the Critical Rendering Path length by lazy loading resources that are not critical for the first render to happen. A practical example would be when, you land on the home page of an e-commerce site which has a link to a cart page/section and all its resources (JS, CSS, images…) are downloaded only when the user navigates to that cart page.
Motherfucker...
How about we just reduce the size by cutting out stuff we don't need, and making images weight less?
It was possible 10 years ago, it was the norm 20 years ago, and absolutely mandatory 30 years ago, so why should it be impossible today?
Furthermore, the right way is to load all necessary resources, render it all, and then make the website accessible, not the other way around!
I thought, what the fuck is lazy loading!?
Cuckzilla:
https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading
> Overview
>
> As the web has evolved, we have come to see huge increases in the number and size of assets sent to users. Between 2011 and 2019, the median resource weight increased from ~100KB to ~400KB for desktop and ~50KB to ~350KB for mobile. While Image size has increased from ~250KB to ~900KB on desktop and ~100KB to ~850KB on mobile.
So basically, you're aware that there's a problem, great!
> One of the methods we can use to tackle this problem is to shorten the Critical Rendering Path length by lazy loading resources that are not critical for the first render to happen. A practical example would be when, you land on the home page of an e-commerce site which has a link to a cart page/section and all its resources (JS, CSS, images…) are downloaded only when the user navigates to that cart page.
Motherfucker...
How about we just reduce the size by cutting out stuff we don't need, and making images weight less?
It was possible 10 years ago, it was the norm 20 years ago, and absolutely mandatory 30 years ago, so why should it be impossible today?
Furthermore, the right way is to load all necessary resources, render it all, and then make the website accessible, not the other way around!
It's the default, so no attribute is necessary.
