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"
Not so good user experience.
remove lazyload from full image (keep for intro)
Labels |
Added:
No Code Attached Yet
|
Status | New | ⇒ | Closed |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2022-05-06 12:12:09 |
Closed_By | ⇒ | drmenzelit |
Closing this as expected behavior with a good explanation from Dimitris on how to change it.
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.
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:
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.
This is up to the designer. The y can do that on their designs:
joomla-cms/layouts/joomla/content/full_image.php
Line 26 in 3a7a3a2
'lazyload' => 'eager'
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'
notlazyload
, sorry my bad