Lazy load background images?


#1

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!).


#2

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.


#3

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.


#4

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.