Disable Lazy Loading for specific blog content

Shobhit_Jain · October 19, 2022, 11:26am

Lazy Loading is configured by default in our GHOST configuration. I have to disable it for above the fold content. How can this be done ?

Other Details -
Ghost Version : 5.12.1
Database : mysql8
Browser : Google
OS : Ubuntu

Hannah · October 19, 2022, 11:37am

Hi @Shobhit_Jain please see this issue for a discussion of why this is not possible:

github.com/TryGhost/Ghost

Lazy loading images above the fold breaks CLS

opened 08:27AM - 18 Jul 22 UTC

closed 09:42AM - 27 Jul 22 UTC

ThomasArdal

help wanted

### Issue Summary Lazy loading images in Ghost 4 is a nice improvement. But it …looks to include a lazy loading attribute on all images and not just the images below the fold. Marking images shown above the fold with lazy makes Cumulative Layout Shift (CLS) in PageSpeed Insights break with the following message: > Above-the-fold images that are lazily loaded render later in the page lifecycle, which can delay the largest contentful paint. ### Steps to Reproduce 1. Add a new image section in the top of a Ghost post. 2. The `img` element is marked with `loading="lazy"`. ### Ghost Version 5.2.3 ### Node.js Version 12 ### How did you install Ghost? DigitalOcean ### Database type MySQL 8 ### Browser & OS version _No response_ ### Relevant log / error output _No response_ ### Code of Conduct - [X] I agree to be friendly and polite to people in this repository

Topic		Replies	Views
Lazy loading in-content images Developer help	1	1616	July 2, 2020
Lazyload is loading incorrect images Themes	4	678	July 15, 2022
Can't figure out LazyLoad in Casper Self-hosting	5	562	July 29, 2022
Order of Images is incorrect when Blog is Posted Bugs	3	313	September 19, 2023
Prevent content shifting during page load of edge.ghost.io Developer help	1	225	July 16, 2021

Disable Lazy Loading for specific blog content

Related Topics