Add native image lazy loading support

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

Wordpress is also looking to do this by default very soon as per https://core.trac.wordpress.org/ticket/44427.

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.

Hi @cherryjimbo, this is a good suggestion but at the minute the browser support isn’t quite there. You’re welcome to propose this on the GitHub repo and track it from there: GitHub - TryGhost/Ghost: Turn your audience into a business. Publishing, memberships, subscriptions and newsletters.

Edit: My bad, features are kept on the forum as feature requests on the repo are typically closed. We can track interest here. Sorry for the confusion :slightly_smiling_face:

Thanks David. Done: Add native image lazy loading support ¡ Issue #11052 ¡ TryGhost/Ghost ¡ GitHub

Each of my articles has at least 30 images so this feature would be very useful.

3 Likes

Has this been implemented? This would be great, our articles are not particularly heavy but it would be an easy optimization to make.

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

2 Likes

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

1 Like

Some updates here regarding the native lazy-loading browser spec:

The specification for native lazy-loading has been merged into the HTML standard as of last month: https://github.com/whatwg/html/pull/3752#issuecomment-585202516

Firefox has also begun supporting it in Firefox 75, which will be rolling out soon. And support has landed in WebKit which is TBD to land in a future Safari release.

Seeing Ghost implement this natively now alongside these additional browser vendors would be awesome.

4 Likes

This is now :+1: 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.

5 Likes

A quick solution to support this new HTML feature could be to use this kind of Markdown-it plugin :

Only Safari doesn’t support this attribute yet :

Hi,

I created a pull request to support the img lazy loading and accelerate our blogs loading time :

1 Like

Looks like it’s been added as part of v4! ✨ Added native lazy loading behaviour to content images · TryGhost/Ghost@074ce4e · GitHub