As of Chrome 76, native lazy loading has come to the web!
Setting images in blog posts to loading="lazy" (or user-configurable) could provide massive performance benefits, especially on blog posts with lots of images. The engineering team over at the BBC did a write-up about this and showed page load times reduced by 50%.
Whilst this is only currently supported in Chrome, Safari has expressed interest, and Chrome does account for over 50% of the web.
This is a completely non-destructive and backwards-compatible change, so implementing it now will only mean further benefits in the future as other browser vendors implement the spec.
Not yet. I ended up implementing this myself using Cloudflare Workers HTMLRewriter though. I donât know if thatâs an option for you, but I wrote about this on my blog at Using Cloudflare Workers HTMLRewriter to extend Ghost(Pro).
@cherryjimbo Ah very cool, thanks for sharing. Iâve been adding small scripts to perform different manipulations (ex: making all article links open in a new tab, injecting authorâs twitter handles into body of article at pre-specific locations etc) and Iâm wondering what the difference in performance will be.
My initial thought is transforming the response before it even reaches the client will be preferable since there will be no additional JS to process but given that the JS is rather limited, I wonder how much of a cost it really is. We are also self-hosting so at the moment we do not use Cloudflare.
As for the lazy loading of images, do you know if modifying the img elementâs attributes after the DOM has already been loaded will work or will the browser have already made the requests for the images since it has processed the DOM once already?
HTMLRewriter with Cloudflare Workers is actually streamed, so the impact is near-zero, which is awesome.
Rewriting the img element after the DOM has loaded with client-side JS likely wonât work though. If the image element was setting data-src instead of src though, you could do some rewriting with JavaScript, though without using something like Workers that can transform the response on the edge, youâd have to edit Ghostâs source directly.
Thatâs what I figured, going in to edit the source directly doesnât seem worth it at the moment. Rewriting the stream is a great solution. I donât know if I want to add another service just for this but if we end up using cloudflare services anyway, Iâll probably implement this. Hopefully Ghost is able to add this feature so I can avoid having to do so.
I appreciate your thoughts here. Itâll probably come in handy for other use cases in the future.
This is now planned to be implemented. There are still some weird browser bugs and inconsistencies weâre waiting to be smoothed out - once it has settled and is being used more widely then weâll take another look.
planned to be implemented. There are still some weird browser bugs and inconsistencies weâre waiting to be smoothed out - once it has settled and is being used more widely then weâll take another look.