Lazy load background images?

I have this portfolio page i’ve put together - its using a lot of large background images and as you can see, the page load is pretty unusable:

http://katheath.com/portfolio.html

can I do any behind the scenes modding to get the background images to lazy-load?

Any other tips on how to improve page performance with something like this? (other than just cut down on content!).

Run all those images through imageOptim. You will shave over 50% off the total size of the page images. Currently, they’re about 8.8 MB - optimising them reduces them to just a little under 4.4 mb with very little discernable loss of image quality.

Alas i’d already crunched them with an image compressor. Crunched again with ImageOptim - but of the full img folder it could only shave off 2.1mb of the 31.1mb.

Made a slight improvement obvs, but think I need to find a way of loading the bg images progressively.

To my knowledge there’s no way to load background images with something like lazy loading.
Background images are generated by the CSS on the page and not HTML as a normal image comes from.

With more and more servers being able to support HTTP/2, witch supports concurrent loading of all resources, I would think the use of JavaScript lazy loading will be phased out.

You might want to check with your hosting company and find out if they support HTTP/2, and offer free SSL certificates (SSL is required for HTTP/2).
If not you could check out an online caching service like CloudFlare. They have a free account that allows both SSL and will cache your pages and serve them over HTTP/2.

1 Like