search

danielbergholz / techschool.dev

TechSchool is a collection of free programming courses from YouTube
https://techschool.dev
MIT License
272 stars 26 forks source link

Improve image loading/performance #55

Open danielbergholz opened 4 months ago

danielbergholz commented 4 months ago

Let's be honest, it's HORRIBLE when you visit a page and there is a bunch of images flashing on the screen after they load, and that's precisely what happens on TechSchool today. We need to find a more performant way of loading the images or maybe show some "loading skeleton" on the image while it loads (this could be a new component for image, that is reused on the entire website)

dmitry-sidorov commented 3 months ago

@danielbergholz Hey, I can take this one!

dmitry-sidorov commented 3 months ago

Images for courses are loading faster without lazy loading! It's almost impossible without throttling to figure out "adopt liveview" loaded latter, than the others.

With lazy loading lazy_loading 2.zip

Without lazy loading without_lazy_loading 2.zip

Looks like with lazy loading images are waiting until the biggest ("adopt liveview") finishes loading.

Images for courses (youtube videos) are loading blazing fast. I think, this is possible because of Google CDN, which gives fast speed for the most places around the world. (magic link https://i.ytimg.com)

Now I am looking for a way to hook the moment, when image ends loading and show it instead of loader/skeleton. It might be useful for low connection speed (see loading with throttling).

danielbergholz commented 3 months ago

Super interesting! Thanks for the insights! I'll assign this issue to you then, feel free to ask any other questions here. And feel free to remove the lazy loading for the courses images 🤝