[ad_1]
As you can see in the waterfall, the first 2 image (backtoback and hair5) start loading at the same time as css but the others load after css.
They are all preloaded in the head tag. I tried changing order (remplace preload hair5 by hair6) and it actually made hair6 at the same time as css but now hair5 after css.
I also tried to put fixed height to some images (100px height 100px width) but dosn’t change. So i don’t thinks it’s due to image having to wait for css to get height and width.
It look like it can only make 2 request before the css dosn’t matter what is it.
When I remove the css file it work like intended.
My goal is to load everything at the same time.
Do you guys know how I can do that?
Thanks for your help and time!
[ad_2]
Probably the client prioritizing the CSS because it is being considered a render blocking resource… so the images wait to download until the CSS is first downloaded and parsed by the client.
Critical CSS, my friend, then defer/async the non-critical CSS. That’s the solution. Some plugins can help with this. You can also do it manually and just add the critical css inline. I’ve used [https://criticalcss.com/]) before and liked it.
If those images are further down the page, you can also set them to lazy load, saving you even more payload size