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.
@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.