Defer offscreen images

Bugs
1

Hello developers, I want to request a small update for the images, since we as a users don’t have any control of how they loading

I recently did anaysis of one of my articles: https://pagespeed.web.dev/analysis/https-lavr-site-en-how-to-use-cloudflare-zero-trust-tunnels-to-expose-private-self-hosted-services-to-the-internet/oduffiazfz?hl=en&form_factor=desktop

And I want to focus you on the Defer offscreen images problem
And here what it says:

Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive. Learn how to defer offscreen images.

Another link which well explains it:

There is no any steps to reproduce. I belive that it’s a common problem if we can call it like that.

I hope that this fix can be easily inlcuded in a future update

I see it as a these potential solutions:

  • you turn on lazy loading by default to all the images in the article
  • you give users some kind of control (which can confuse big part of users)
  • can be done as a global config

I think that overall it can improve the Ghost platform. It’s very minor, but effective update which requires a very low effort.

Thank you in advance

2

It looks like the bookmark card images are not being lazy loaded, but images you’ve inserted are being lazy loaded. This might be an issue specifically with the bookmark card.

new Set(Array.from($$('img:not([loading="lazy"])')).map(img => img.parentElement.className + '//' + img.className))
 // Set(4) {'//author-profile-image', 'gh-article-image//', 'kg-bookmark-metadata//kg-bookmark-icon', 'kg-bookmark-thumbnail//'}
3

Hi @vikaspotluri123 , looks like you are right, but anyway these images also deserve attention

4

Yep, now there’s steps to reduce :laughing:

1 Like