With this article I would like to follow up on that topic with the current status of lazy-loading in the core as well as how to use it in 3.x today already.
The history of lazy-loading in the Joomla 4.0 core
After we have initially been contacted by Google we worked together with them and came up with an initial Pull Request for the Joomla 4.0 Core. The basic idea was “Let’s make it a plugin so everyone can choose to disable it and we also support existing content without anyone having to take action”. In that PR we had a long discussion on different aspects of that PR and how to best implement lazy-loading into the core. In the end that PR got merged but later reverted out of the core given that Dimitris Grammatikogiannis contributed an updated version with better caching and a direct implementation on top of the new media manager.
The current status of lazy-loading in the Joomla 4.0
So what’s the current status here? Well as of this writing the mention PR from Dimitris still requires one more test and the final merge that might have changed by the time this article is published.
So let’s take a look at the dev branch for now. There are two ways to insert images into Joomla articles. One is the media manager image picker field and one is the “drag & drop” image to the TinyMCE field. Both now have fields for adding an Alternative Text (very useful for accessibility and screen readers) as well as a checkbox for lazy-loading the image.
This is how it looks like in the media manager image picker:
This is how it looks like when you use the “drag & drop” feature of TinyMCE:
With both views you can choose to lazy-load the images or not (it’s checked by default) as well as now add the alt attribute to the image tag.
That has a great advantage over the initial proposed implementation as this does not require any code running on the time the page is loaded as everything is prepared before in the HTML and this is also not an “all on or all off” solution but a solution where you can take the decision on any image yourself.
How to use native lazy-loading starting with Joomla 4.0
So how to use that feature now with Joomla 4. As you can see on the screenshots with Joomla 4 we will default to lazy-loading any images you insert and you have the option to opt out of that or later change the generated HTML in the editor. So nothing more for you to do on that topic any more as Joomla takes care of it.
How to use native lazy-loading on Joomla 3.x right now
But you can still use native lazy-loading with 3.x today. In this article I would like to mention Dimitris solution including a component to convert the existing content and the plugin that I wrote for 3.x as a backport for the initial solution I was working on.
Add lazy-loading attribute to existing articles using com_addlazyloading
With the solution chosen here the basic concept is a component that looks over all your articles once and adds the loading=lazy setting to enable the native lazy-loading of images within existing articles. More details can be found on Dimitris website (GitHub).
Content – ImageLazyLoading
The initial plugin approach mentioned in the first PR that I was working on back then is still there and has been backported to 3.9+ as a plugin. I released it under the name “ImageLazyLoading by zero24” to the JED as well as GitHub free for everyone to use.
The basic setup is installing and enabling the “Content – ImageLazyloading” plugin from the backend and you are done with it. Now that plugin runs on any site that triggers Content events and make sure that all image tags will get the loading attribute where it defaults to loading=lazy.
Final words
I have to admit my initial proposal was not the most elegant solution for the core and the solution we have now for the core is much better. And all the credits for that feature has to go to Dimitris Grammatikogiannis for keeping pushing us out of that plugin approach and into that great media manager integration. Thanks!
