Title: Lazy-loading of images is in core Author: Andrew Ozz Published: April 8, 2020 --- [ ](https://profiles.wordpress.org/azaozz/) [Andrew Ozz](https://profiles.wordpress.org/azaozz/) 8:19 pm _on_ April 8, 2020 Tags: [feature-lazyloading ( 8 )](https://make.wordpress.org/core/tag/feature-lazyloading/) # Lazy-loading of images is in core As planned, the patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a **diff**. A patch can be _applied_ to a codebase for testing. for adding `loading` attribute to `img` tags is now committed to coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. (see [#44427](https://core.trac.wordpress.org/ticket/44427)). Based on preliminary testing there seem to be no conflicts with [most plugins](https://wordpress.org/plugins/search/lazy+loading/) that implement lazy-loading for images. Nevertheless the authors of these plugins are strongly advised to test them in trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision. (WordPress 5.5-alpha) and confirm their plugins work as expected. It would also be very beneficial to the users if the [plugins that implement lazy-loading](https://wordpress.org/plugins/search/lazy+loading/) are updated to utilize the new Core functionality and filters, and to use the new` loading` HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. attribute. Please see [https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-loading](https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-loading) and [https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes](https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes). A dev notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase. with more details on the implementation and how to customize the behavior will be published closer to the WordPress 5.5 release. [#feature-lazyloading](https://make.wordpress.org/core/tag/feature-lazyloading/) ### Share this: * [ Threads ](https://make.wordpress.org/core/2020/04/08/lazy-loading-of-images-is-in-core/?share=threads) * [ Mastodon ](https://make.wordpress.org/core/2020/04/08/lazy-loading-of-images-is-in-core/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/core/2020/04/08/lazy-loading-of-images-is-in-core/?share=bluesky) * [ X ](https://make.wordpress.org/core/2020/04/08/lazy-loading-of-images-is-in-core/?share=x) * [ Facebook ](https://make.wordpress.org/core/2020/04/08/lazy-loading-of-images-is-in-core/?share=facebook) * [ LinkedIn ](https://make.wordpress.org/core/2020/04/08/lazy-loading-of-images-is-in-core/?share=linkedin) 1. ![](https://secure.gravatar.com/avatar/e48e95eba4f298f73069e3545b63f3e6ac6c20104ff14e664afa6d787625918a? s=32&d=mm&r=g) 2. [Hristo Pandjarov](https://profiles.wordpress.org/hristo-sg/) 3:09 pm _on_ April 14, 2020 3. We have issue with Lazy Loading and the latest GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. [https://wordpress.org/gutenberg/](https://wordpress.org/gutenberg/) update. SG Optimizer uses the recommended library. When we replace the src attribute and add data-src with the original source when user scrolls to that part of the page. 4. The problem is with the following css class: .wp-embed-responsive .wp-blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.-embed.wp-embed- aspect-16-9 .wp-block-embed__wrapper iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser. 5. which has the following properties: 6. [https://github.com/WordPress/gutenberg/blob/17e5c2d870d84fb6de48dcd5bc3c38cd0c0fb0d0/packages/block-library/src/embed/style.scss#L41](https://github.com/WordPress/gutenberg/blob/17e5c2d870d84fb6de48dcd5bc3c38cd0c0fb0d0/packages/block-library/src/embed/style.scss#L41) 7. When the page is loaded, the height of the element is 0, and when the user scorlls to the section it doens’t expand the iframe. 8. Please, advice how to proceed with this. 9. * ![](https://secure.gravatar.com/avatar/73c1045212929211deda7262005831319397c68d340a8c41d53633b3f7e7f129? s=32&d=mm&r=g) * [Andrew Ozz](https://profiles.wordpress.org/azaozz/) 8:26 pm _on_ April 14, 2020 * This in not related to the above, the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a **diff**. A patch can be _applied_ to a codebase for testing. only adds the `loading` attribute to images. * > When the page is loaded, the height of the element is 0, and when the user > scorlls to the section it doens’t expand the iframeiframe iFrame is an acronym > for an inline frame. An iFrame is used inside a webpage to load another HTML > document and render it. This HTML document may also contain JavaScript and/ > or CSS which is loaded at the time when iframe tag is parsed by the user’s > browser.. * Looking at the CSSCSS Cascading Style Sheets., there are no recent changes. It’s pretty much the same since it was merged in [https://github.com/WordPress/gutenberg/pull/10477](https://github.com/WordPress/gutenberg/pull/10477) more than a year ago. Could it be related to changes in the theme’s styles, or perhaps other structural CSS change? * Think it’s worth it to open an issue for GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. [https://wordpress.org/gutenberg/](https://wordpress.org/gutenberg/) for this. Definitely needs more investigating. * At the same time, have you tested SG Optimizer in recent trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision.? Any issues with images? 🙂 10. ![](https://secure.gravatar.com/avatar/100d63c0fa2df3cd1337a7ba29958513e2f8df650539cb249fdcb054ddf64f14? s=32&d=mm&r=g) 11. [Saumya Majumder](https://profiles.wordpress.org/isaumya/) 7:03 am _on_ May 5, 2020 12. This is truly awesome news. Expected in v5.4 but hopefully, it’s coming on v5.5. Can’t wait. 🤞 Thanks for adding it to the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. 🙂 13. ![](https://secure.gravatar.com/avatar/35c5e3eb9e70df8d0cc18bdeb4abe8649bb84bdb2788ac5d9925ac982156b8cc? s=32&d=mm&r=g) 14. [jonathanmoorebcsorg](https://profiles.wordpress.org/jonathanmoorebcsorg/) 9: 19 pm _on_ June 6, 2020 15. how come the attribute is not implemented for [gallery] images? I would have thought the large image galleries would see the most benefit.. 16. * ![](https://secure.gravatar.com/avatar/35c5e3eb9e70df8d0cc18bdeb4abe8649bb84bdb2788ac5d9925ac982156b8cc? s=32&d=mm&r=g) * [jonathanmoorebcsorg](https://profiles.wordpress.org/jonathanmoorebcsorg/) 9:32 pm _on_ June 6, 2020 * oops – ignore – confused about release versions – is in Lazy Loading Feature PluginFeature Plugin A plugin that was created with the intention of eventually being proposed for inclusion in WordPress Core. See [Features as Plugins](https://make.wordpress.org/core/handbook/about/release-cycle/features-as-plugins/) not in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. release Comments are closed. # Post navigation [← Auto-updates feature meeting summary: April 7th, 2020](https://make.wordpress.org/core/2020/04/08/auto-updates-feature-meeting-summary-april-7th-2020/) [WordPress 5.5: Call for Tickets →](https://make.wordpress.org/core/2020/04/08/wordpress-5-5-call-for-tickets/)