No Code Attached Yet
avatar ch2856
ch2856
6 May 2022

What needs to be fixed

Joomla adds (layout/joomla/html/image.php) lazyload to article full image, this is wrong by google lighthouse "Largest Contentful Paint image was lazily loaded"

Why this should be fixed

Not so good user experience.

How would you fix it

remove lazyload from full image (keep for intro)

Side Effects expected

avatar ch2856 ch2856 - open - 6 May 2022
avatar joomla-cms-bot joomla-cms-bot - change - 6 May 2022
Labels Added: No Code Attached Yet
avatar joomla-cms-bot joomla-cms-bot - labeled - 6 May 2022
avatar ch2856 ch2856 - change - 6 May 2022
The description was changed
avatar ch2856 ch2856 - edited - 6 May 2022
avatar ch2856 ch2856 - change - 6 May 2022
The description was changed
avatar ch2856 ch2856 - edited - 6 May 2022
avatar dgrammatiko
dgrammatiko - comment - 6 May 2022

This is up to the designer. The y can do that on their designs:

Joomla as a generic CMS has no idea if the Full Image or any other content needs to be eagerly or lazily loaded. It uses lazy as the default but really it should be the designers job to define those properties PER LAYOUT. There's no way either value will be correct for all cases

Just a correction here, it should be 'loading' => 'eager' not lazyload, sorry my bad

avatar drmenzelit drmenzelit - change - 6 May 2022
Status New Closed
Closed_Date 0000-00-00 00:00:00 2022-05-06 12:12:09
Closed_By drmenzelit
avatar drmenzelit drmenzelit - close - 6 May 2022
avatar drmenzelit
drmenzelit - comment - 6 May 2022

Closing this as expected behavior with a good explanation from Dimitris on how to change it.

avatar pl71
pl71 - comment - 24 Oct 2022

Of course, CMS doesn't know what is visible and what is not.
At least logo image will be visible at First Contentful Paint for sure.
So Cassiopeia template could be modified with eager here.
(Intro image should be displayed before fulltext image so the original proposal is also not quite correct)
Regarding the rest, what is above the fold could be checked at rendering time by JS.
I've experimented with a js script using IntersectionObserver and PageSpeed Insights didn't complain regarding the desktop view.
However, it still complains about the mobile view.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/37751.

avatar dgrammatiko
dgrammatiko - comment - 24 Oct 2022

Regarding the rest, what is above the fold could be checked at rendering time by JS.

That will never work on an actual image element and a src attribute because of the way img tag works on the browsers. The attribute is signalling the browser AT PARSE time, the js is executing way later (and there should be a complete DOM to act upon) thus you cannot undo the initial signal (eager/lazy) as the images are already queued for fetching (or already in the fetching phase). The only way to make this work with JS is to have a data-src instead of a src attribute and when the JS executes you switch the loading and data-src attributes but that has 2 huge disadvantages:

  • Needs JS (no progressive enhancement)
  • Images are always fetched very late
avatar pl71
pl71 - comment - 26 Oct 2022

Until browsers themselves handle the subject issue with laziness we can do a little.
Meanwhile, with a significant amount of predictability, we can say that the first image of the first article in Featured Articles (div.items-leading) should not have lazy loading.

Add a Comment

Login with GitHub to post a comment