Images are not blocking, so pushing them wherever, especially to web worker seems like a bad idea, because web worker needs to be downloaded, executed as well. Thats adding links to the chain. Not only it would load slower (and its a header image, which you want to load fast) but it would also add complexity in a place where browsers are very good at optimizing.
And all the below-the-fold images are pushed to low priority so they are not blocking anything (especially if loading="lazy" is used)
Except the article is based on an incorrect assumption.
"Turns out, we can construct the render tree and even paint the page without waiting for each asset on the page: not all resources are critical to deliver the fast first paint. In fact, when we talk about the critical rendering path we are typically talking about the HTML markup, CSS, and JavaScript. Images do not block the initial render of the page—although we should also try to get the images painted as soon as possible."
Why would i generate blobs and add complexity of web workers to load an image? Browser is very good at loading an image without it.
Your demo is really a different case - you are loading lots and lots of images and none of them is "the most important" - tesla website has one image and its covers 100% of the page above the fold, so it needs to be loaded ASAP.
PS. What you used on this page is service worker not web worker and if im honest, im pretty sure that if you removed it and replaced it with plain old img tags it would load much much faster. Maybe thats material for a quick dev.to article ;-)
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Also never use <img src='' /> for bulk image rendering.
It will block the engine and make page little bit unresponsive.
Pull image via fetch() in web-worker and generate blob as well and just assign the blob in src.
Images are not blocking, so pushing them wherever, especially to web worker seems like a bad idea, because web worker needs to be downloaded, executed as well. Thats adding links to the chain. Not only it would load slower (and its a header image, which you want to load fast) but it would also add complexity in a place where browsers are very good at optimizing.
And all the below-the-fold images are pushed to low priority so they are not blocking anything (especially if loading="lazy" is used)
You can verify that in chrome dev tools:
Explained here : dev.to/trezy/loading-images-with-w...
Except the article is based on an incorrect assumption.
"Turns out, we can construct the render tree and even paint the page without waiting for each asset on the page: not all resources are critical to deliver the fast first paint. In fact, when we talk about the critical rendering path we are typically talking about the HTML markup, CSS, and JavaScript. Images do not block the initial render of the page—although we should also try to get the images painted as soon as possible."
developers.google.com/web/fundamen...
okay, but loading image via blob have beneficial too.
check out a small project of mine : jswalker.in/its/gladit
generate via blob and web worker.
Why would i generate blobs and add complexity of web workers to load an image? Browser is very good at loading an image without it.
Your demo is really a different case - you are loading lots and lots of images and none of them is "the most important" - tesla website has one image and its covers 100% of the page above the fold, so it needs to be loaded ASAP.
PS. What you used on this page is service worker not web worker and if im honest, im pretty sure that if you removed it and replaced it with plain old img tags it would load much much faster. Maybe thats material for a quick dev.to article ;-)