Lazy loading just got lazier in TYPO3 v10

If a tree falls, but no-one is there to see it, did it happen? A chair in an empty room, is it there? Another question for our readers of a philosophical bent is: If an image on a web page never enters the viewport before the user moves on to another page, was it ever there?

Let’s leave the first two examples for after-hours; the third one has a definite answer: By default, all images on a page are loaded, even if they never enter the viewport. So a device might have to download megabytes of data without the user ever seeing or needing it. Those images may remain unseen, but by no means unnoticed. They cost time, bandwidth (and possibly money), and battery life.

Lazy loading is the solution. The technique is so popular that it’s made its way into the HTML specification. Most up-to-date browsers support it natively for images and iframes.

Until now, the best way to stop an image or iframe loading unnecessarily was to put the URI in a data attribute (e.g., data-src="https://example.com/image.png"), and the URI for a placeholder image in the actual src attribute itself.

The next step was to write some JavaScript code (or use a library) to observe the viewport and react as soon as a placeholder image hit the visible area by taking the URI from the data-src attribute and putting it in the src attribute. Any content loaded asynchronously with Ajax (layers, filters, “read more” buttons, and so on) needed to be parsed for lazy images with data-src attributes.

To make things easier for everyone, lazy loading was added to the HTML specification, so it’s as simple as adding loading="lazy" to the image or iframe element, and the browser will do the rest. You can safely add this attribute to all your image- and iframe-tags and let the browser decide when to load the corresponding asset. It works across all scenarios, including slider elements and images hidden within a collapsible area of your page. Another advantage is that it will even work for users who have disabled JavaScript, which wasn’t the case before.

Or, at least, that’s how it will be in the future. While it works in Chrome and Firefox, at the time of writing, Safari doesn’t yet support it (unless you enable it as an experimental feature). We hope it will arrive in MacOS 11. If lazy loading is essential to you, you will need to have a fallback for older browsers, but either way, with TYPO3 v10, you’re ready for when lazy loading hits primetime in all browsers.

This change is great news for content editors, who can look forward to native lazy loading and better page load times without having to do anything.

So by now you’re asking: What do I need to do to take advantage of this new feature in TYPO3? The good news: If you’re setting up a new TYPO3 installation using Fluid Styled Content, this feature is enabled by default. There is a setting styles.content.image.lazyLoading = lazy that is set by default and is used throughout all Fluid templates that ship with Fluid Styled Content.

If you’re upgrading or have custom Fluid templates, adding this new setting to your existing templates is an easy task: just add the attribute loading to your Fluid templates—

—and you’re done. 

By the way: We love this feature so much because—regardless of what TYPO3 version or other CMS you are using—it is safe to add it to all your image and iframe-tags today. All browsers that do not yet support this setting will just ignore it.

You can manually add this attribute to older TYPO3 versions, but when upgrading your projects to TYPO3 v10, you can just change your templates this way.

So much work has gone into developing TYPO3 v10 into the world-beating CMS it is today. Upgrade now to enable your editors and users to benefit from TYPO3’s state-of-the-art user experience and performance. It’s streamlined for devs, too, saving you and your agency time and money—which you can invest in delivering more user value and increasing ROI.

Now is a great time to upgrade. Upgrading between major versions has never been easier. Get in touch with us to find out how much an upgrade will cost.