--- title: HTML-native lazy loading for iframes and images in TYPO3 v10 url: "https://b13.com/knowledge/lazy-loading-just-got-lazier-in-typo3-v10" description: "Lazy loading is easier than ever in #TYPO3v10. One of the 13things we love best about the latest and greatest version!" image: "https://b13.com/fileadmin/_processed_/d/4/csm_Lazy_Images_191-1_e6d47a4c8c.png" date: 2020-07-20 modified: 2026-08-19 lastUpdated: 2026-08-19 --- # HTML-native lazy loading for iframes and images in TYPO3 v10 [ TYPO3v10 ](https://b13.com/knowledge/typo3v10) [ Performance ](https://b13.com/knowledge/performance) Lazy loading just got lazier in TYPO3 v10 =========================================== ![](https://b13.com/fileadmin/_processed_/d/3/csm_daniel_sattler_36c9da5a11.jpg)Daniel Sattler 28 July 2020 [ RSS Feed ](https://b13.com/rss.xml) ![A stylized flamingo floats in a pool with a drink in its wing, surrounded by abstract shapes and tropical leaves. The color scheme features deep purples and soft pastels.](https://b13.com/fileadmin/_processed_/9/e/csm_Lazy_Images_397931df4a.webp) TYPO3 v10 LTS is the first major Content Management System that supports the native HTML implementation of lazy loading out of the box, saving you development effort, and preparing your site for the future. Lazy loading makes your website load faster by not downloading images that a user never sees. Thinking of upgrading to TYPO3 v10? ------------------------------------- Get a 2nd Opinion or a quote! [ Let’s connect ](https://b13.com/lets-connect) The Loading Koan ------------------ 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. Lazy Loading in HTML ---------------------- 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. Browser support ----------------- 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](https://caniuse.com/#search=loading) 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. Lazy Loading in TYPO3 ----------------------- 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— ``` 1

``` ``` <f:image src="{file.uid}" treatIdAsReference="1" loading="{settings.media.lazyLoading}" />

``` —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. Another Great Reason to Upgrade to TYPO3 v10 ---------------------------------------------- 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. Find out about our 2nd Opinion and upgrade service ---------------------------------------------------- [ Our Solution ](https://b13.com/services/typo3-upgrade) ### Written by: ![Bild von Daniel Sattler](https://b13.com/fileadmin/_processed_/d/3/csm_daniel_sattler_626e05b0b4.webp) We get the pleasure of Daniel’s company, creativity, and mustache in the office and clients get better-presented, more performant website front ends thanks to Daniel. His essential tool: GitKraken Daniel Sattler Development [ more from Daniel Sattler ](https://b13.com/team/daniel-sattler) Related Articles ------------------ - ![A human hand shakes a robotic hand against a purple background with heart patterns, symbolizing collaboration between humans and technology.](https://b13.com/fileadmin/_processed_/6/2/csm_AIbotsLoveMarkdown_Headerbild_72fe5820d6.webp) ### The Internet Is No Longer Just for Humans—AI Bots Love Markdown 28 January 2026 | Benni Mack Discover why most web traffic is now automated and how TYPO3’s structured content model prepares websites for humans, editors, and AI systems. [ Read more: The Internet Is No Longer Just for Humans—AI Bots Love Markdown ](https://b13.com/knowledge/the-internet-is-no-longer-just-for-humans-ai-bots-love-markdown) - ![A laptop is connected to multiple file folders and browser windows, illustrating data management and organization concepts.](https://b13.com/fileadmin/_processed_/8/9/csm_SubdirectoriesSubdomains_Sharing_be4a05761c.webp) ### Subdirectories vs. Subdomains: Which is Better for SEO? 23 October 2025 | David Steeb Subdirectories, Subdomains, and Better SEO Rankings. The answer to which one should I use? is always it depends. Subdomains and subdirectories interact differently with SEO… [ Read more: Subdirectories vs. Subdomains: Which is Better for SEO? ](https://b13.com/knowledge/subdirectories-vs-subdomains) - ![Colorful cartoon rockets with flames, featuring round windows and various designs, are arranged in a repeating pattern against a light background.](https://b13.com/fileadmin/_processed_/9/f/csm_QuickLoad_Headerbild_914e5cfa94.webp) ### What factors make a website load as quickly as possible? 30 April 2025 | David Steeb Explore practical solutions to improve website load times and performance through server, network, and front-end optimizations, including TYPO3-specific strategies. [ Read more: What factors make a website load as quickly as possible? ](https://b13.com/knowledge/make-website-load-fast) - ![A pathway leads through stylized clouds, flanked by a magnifying glass and gears, with icons representing text and documents in the background, suggesting themes of exploration and technology.](https://b13.com/fileadmin/_processed_/8/0/csm_accessibility-guide_0acd1932f3.webp) ### A Guide to Accessibility Considerations in UX Design 12 April 2024 | Franzi Töpler People with disabilities constitute one of the most significant segments of online users, but it is an often-overlooked population in the digital world. Increasing accessibility to… [ Read more: A Guide to Accessibility Considerations in UX Design ](https://b13.com/knowledge/a-guide-to-accessibility-considerations-in-ux-design) - ![A teal laptop displays a yellow heartbeat line across the screen, with abstract graphs in the background, suggesting data analysis or monitoring.](https://b13.com/fileadmin/_processed_/0/8/csm_CoreWebVitals_Headerbild_b4abe20660.webp) ### A Core Web Vitals Primer for TYPO3 Users 16 February 2024 | Franzi Töpler The Core Web Vitals are the go-to metrics for determining if a web page responds to user interaction swiftly and without disruptions. TYPO3 admins and developers need to know how… [ Read more: A Core Web Vitals Primer for TYPO3 Users ](https://b13.com/knowledge/a-core-web-vitals-primer-for-typo3-users) - ![A stylized treasure map featuring landforms, a winding path, trees, and mountains, with an "X" marking a specific location. The background is a gradient of purple with abstract shapes.](https://b13.com/fileadmin/_processed_/4/1/csm_ux-trouble-shooting-user-journey_211db787f7.webp) ### Improving The User Journey: How to help your users find what they are looking for 14 March 2023 | Laura Heine The user journey is a substantial part of the user experience (UX). If users are unable to complete a task in your app or on your website, their user experience plummets—so does… [ Read more: Improving The User Journey: How to help your users find what they are looking for ](https://b13.com/knowledge/improving-the-user-journey-how-to-help-your-users-find-what-they-are-looking-for) - ![A magnifying glass overlays various abstract shapes, including gears and rectangles, against a dark purple background. The design suggests themes of search, analysis, and technology.](https://b13.com/fileadmin/_processed_/b/a/csm_ux-trouble-shooting-search_baed040eb3.webp) ### On-site search is more than a small box in the corner 10 March 2023 | Laura Heine Users want to find information fast. If the page navigation is insufficient, they quickly resort to the search functionality. Nowadays, users expect that an on-site search is easy… [ Read more: On-site search is more than a small box in the corner ](https://b13.com/knowledge/on-site-search-is-more-than-a-small-box-in-the-corner) - ![A stylized graphic featuring a house with three horizontal bars representing data storage, a padlock symbolizing security, and a key. Background elements include leaves and abstract shapes, suggesting a digital or cloud-based theme.](https://b13.com/fileadmin/_processed_/2/5/csm_on-prem_e9249f94ba.webp) ### Why choose On-Prem over SaaS for your CMS? 14 February 2023 | David Steeb Enterprises now have many software delivery channel options to choose from. With software-as-a-service (SaaS) and cloud-based implementation models on the rise, you might be trying… [ Read more: Why choose On-Prem over SaaS for your CMS? ](https://b13.com/knowledge/why-choose-on-prem-over-saas-for-your-cms-in-2022) - ![A computer monitor displays a starburst design, surrounded by stylized plants and a desk lamp, all set against a warm, gradient background with abstract shapes.](https://b13.com/fileadmin/_processed_/d/e/csm_workspaces_4bcc71e65c.webp) ### Workspaces Improvements 01 July 2022 | Benni Mack One of TYPO3’s powerful features for content publishing is Workspaces—creating and staging in a draft environment before publishing content. TYPO3 v11 adds a few important touches… [ Read more: Workspaces Improvements ](https://b13.com/knowledge/workspaces-improvements) - ![A yellow user interface panel featuring multiple sections and tabs, set against a dark green background with abstract shapes and gears. The panel includes placeholders for text and checkboxes.](https://b13.com/fileadmin/_processed_/9/e/csm_Dashboard_63f98a27c9.webp) ### Optimize your daily workflow with the TYPO3 dashboard 30 March 2021 | Oliver Bartsch The TYPO3 dashboard is geared towards maximum extensibility. Discover the benefits, take a tour under the hood and find out how to build your own custom widgets. [ Read more: Optimize your daily workflow with the TYPO3 dashboard ](https://b13.com/knowledge/optimize-your-daily-workflow-with-the-typo3-dashboard)