My wallpaper is a little fishy!

I've loved marine life for a long time. I finally downloaded a bunch of oceanic Unsplash photos for my wallpaper. It's awesome.

Irked by people who download the biggest images they can find on Unsplash for their blog posts and uploading them as is on the website.

I even showed them how to use squoosh.app to make them literally 70% smaller. It's THAT easy.

Lazy, much?

Definitly Unsplash' API! Being able to pull down images with specific sizes matching my criteria, or specific categories/search queries from a massive library have been useful on many occasions!
Quick filler images to test your website, booting up to a new wallpaper each morning... The list goes on!

💧

There was a 1 second delay when loading images on home page with a bunch of hot model babes in a masonry grid

Why? 💧💧

Maybe pagination is fucked. Lets reduce it from 100 per page to 10.

Still same shit.

What do you think why this could be?

Comment below 👇 right now

(The images im loading are just dummy images from unsplash)

I tried using rxjs. Observables. Flatmaps. Custom array push. Array loop. Change detection to update UI. Chatgpt.

Nothing

Every time i switch tab and come back then theres another second of delay with blank page before content appears

Wtf???

Turns out -- unsplash api was returning me 6K to 8K Fucking images. HEAVY. HEAVY FUCKING IMAGES. and i was apparently displaying 6000x8000 px images, 20 times per page. Thats a lot of fucking pixels! I reduced it with ?w=500 in unsplash api at the end and magically there is no delay now and everything works in an instant.

Fuck off