Enable `lazy` loading by default
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'}
}
}