Skip to content

Enable `lazy` loading by default

Compare
Choose a tag to compare
@mficzel mficzel released this 01 Apr 09:28
9f63338

With the general availability of loading="lazy" in all relevant Browsers we added lazy loading as a default.
While this is definitely the most user friendly default it is not always the best for the site performance.

In general all images that are immediately visible to the user should be loaded via loading="eager" and everything else via loading="lazy".

For Kaleidoscope images or pictures in the site header you can set loading="eager" manually.
For the main content collection we suggest to enable eager loading for the first content in main and lazy load the rest.

renderer = Neos.Neos:ContentCollection {
    nodePath = 'main'

    // configure separate iterator for main content 
    content.iterationName = 'mainContentIterator'

    // enable lazyness for first items
    prototype(Sitegeist.Kaleidoscope:Image) {
        loading = ${mainContentIterator.isFirst ? 'eager' : 'lazy'}
    }
    prototype(Sitegeist.Kaleidoscope:Picture) {
        loading = ${mainContentIterator.isFirst ? 'eager' : 'lazy'}
    }
}