Background image slower than rest of the content (text)

I’m currently testing Netlify to deploy a single page static website with a high resolution background (size over 1 MB). However, this makes the site load slowly, wherein the text would load first on a white background followed by the background image. To get around this, I reduced the image size and resolution, and I’m still running into the same problem - background loads too slowly compared to the rest of the content. Are there any CDN related settings to be implemented here to speed up the image loading (preferably before or alongside the rest of the content)?

hi there, for me it actually loads reasonably quickly, but the best way for us to look at performance issues like this one is for you to capture a HAR file and upload it some where where it can be shared with us:

https://toolbox.googleapps.com/apps/har_analyzer/

@Perry -Thanks. I’ve implemented several optimizations I’ve found online. That said, the static files like fonts and the background images are still slow. Here is the har file: https://file.io/MAyLUjBm8ihD

The delay I see in the loading of the background image is relatively minimal @239822 when the file loading is a ~38KB webp image.

I see that the desktop version loads quite quickly. The mobile version of the site however seems to be slower. I often see the text load first, and a few seconds later I see the image load (3G or 4G connection simulated).

I saw quick load time on (an actual) mobile device too.

Thanks. I’ve been rolling out some optimizations over the last couple of days.