Pagespeed Insights complain about "Defer offscreen images"

[Cruiser13]

If I run the official pagespeed insights test at https://developers.google.com/speed/pagespeed/insights/ it does show that I could save about 7 seconds using "Defer offscreen images". But we do have mod_pagespeed enabled with ModPagespeedEnableFilters lazyload_images. Using my browser I can see source code like this on our site for the exactly same images Pagespeed Insights does complain about (in this case about image.png.pagespeed.ce.BPup_jOUJ2.png): <img data-pagespeed-lazy-src="/path/image.png.pagespeed.ce.BPup_jOUJ2.png" alt="" title="" src="/pagespeed_static/1.JiBnMqyl6S.gif" onload="pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);" onerror="this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);"/>

Is it possible that the Pagespeed Insights are excluded from the mod_pagespeed optimizations somehow? I've seen that bots are excluded.

[jmarantz]

It's possible. Part of the problem might be that mod_pagespeed's server-side cache might be cold at the time that PSI queries the site. Part of what mod_pagespeed caches is the set of indexes that it thinks are off-screen, based on JavaScript sending back beacons from users' browsers.

So in that case PageSpeed Insights might be pessimistic grading an MPS-enabled site. I don't think there's much that can be done easily to fix that.

On Wed, Nov 18, 2020 at 9:40 AM Lennart Fries [email protected] wrote:

If I run the official pagespeed insights test at https://developers.google.com/speed/pagespeed/insights/ it does show that I could save about 7 seconds using "Defer offscreen images". But we do have mod_pagespeed enabled with ModPagespeedEnableFilters lazyload_images. Using my browser I can see source code like this on our site for the exactly same images Pagespeed Insights does complain about (in this case about image.png.pagespeed.ce.BPup_jOUJ2.png):

Is it possible that the Pagespeed Insights are excluded from the mod_pagespeed optimizations somehow? I've seen that bots are excluded.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/apache/incubator-pagespeed-mod/issues/2051, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAO2IPIGI7H7QBKILAOOQ4DSQPMF5ANCNFSM4T2BZXDQ .

[Lofesa]

Hi My 2 cents.... PSI can´t detect lazyloaded images by timings but classes and attributes, if you make your site put attribute loading=lazy it will detect as lazyloaded. This attribute is the native lazyload for bronwsers (mainly chrome and firefox). I have no tested how it work with pagespeed. I think PSI uses the class lazyload or related to this word. If none of these are present can´t detect the image is lazyloaded. Anyway... if I remember the module has a list of bot UA string, or search for "bot" in it. PSI no more has the word bot in their UA, it uses "Ligthouse" You can fire an issue here https://github.com/GoogleChrome/Lighthouse/issues

[Cruiser13]

Thank you for your response. Should we put the atrribute loading=lazy in the image tags by mod_pagespeed in this case?

[Lofesa]

As far as I know, mod_pagespeed can´t set any attribute. If you set it must be by other way rather than pagespeed. I can´t have tested it, but maybe it malfuntioning. Why? in the attibute is in place, brownser load the image viewport + arbitrary size. This arbitrary size is harcoded in the browser and, allmost in chrome, the size varies with network speed (less speed, more size, because load images need more time). In other way, pagespeed do their calculation on how and when a image must be downloaded and maybe these 2 things don´t work well toguether. I think pagespeed module need to add some way to detect native lazyload capabilities in the browser and then do nothing when these cap´s are in place or maybe do nothing if the attribute loading is in place, but this last option is not a good idea with olders brownser. And maybe need to change data-pagespeed-lazy-src with data-src and data-srcset, because even if are not a standard, "de facto" it is.

[patrickhulce]

Hey there, Lighthouse maintainer here 👋

This does appear to be a bug in mod_pagespeed from our perspective. When loading the provided URL locally, all of the very offscreen images (even ones in a carousel that are offscreen) are loaded.

I'm not entirely sure how it's supposed to work and the beaconing system sounds very impressive, but at least in this situation it doesn't appear to be entirely effective for preventing offscreen images from being downloaded for at least some portion of users. The loading=lazy attribute would be an easy solution, but any approach that prevents these offscreen images from being downloaded before scripts can finish is a win IMO :)

[Lofesa]

Hi @patrickhulce Is not a bug, is how the module works. From the docs: "The lazyload_images filter defers loading of images until they become visible in the client's viewport or the page's onload event fires." The rationale for this is to save network connections and batery on mobile devices .Think that this modules comes from far times, when mobile devices have poor network connections. The loading=lazy attribute load all images too in some conditions, but is considered by LH as a option for lazyload, not a bug.

To avoid this, the module has a parameter (Don´t know if the OP has this in place)

ModPagespeedLazyloadImagesAfterOnload off

This module needs some page hits to work entirely, because it need the beacons info to do the work.

The docs here: https://www.modpagespeed.com/doc/filter-lazyload-images

[patrickhulce]

Glad to hear there's already a workaround in place 👍

[Lofesa]

But maybe that LH still considering images are not lazyloaded, even with this parameter. I have tested, in a far time, and don´t pass the test. When the OP put the parameter in place, and hit the page some times, then can test to see what happens with the actual LH version.

[patrickhulce]

I agree it sounds like WAI in mod_pagespeed has a different prioritization model and offscreen images can still be downloaded fairly early (surfaced then by Lighthouse).

All Lighthouse does is load the page and let the developer know if far offscreen images were downloaded in contention with important script resources (ones that cause long tasks). If they were downloaded after important scripts or not downloaded at all, then great, you couldn't schedule it any better than that, no results.

If they were though, then there's a bit of room for improvement, that's all. It's not like every possible perf improvement needs to be fully implemented by mod_pagespeed :)

[eldk]

Hello,

It's possible. Part of the problem might be that mod_pagespeed's server-side cache might be cold at the time that PSI queries the site.

I think this is the clue to follow as I've done some LightHouse check this afternoon with some mod-pagespeeded websites and haven't encounter this problem (desktop and mobile) - with Chrome up to date.

I use modepagespeed lazyloading filter with ModPagespeedLazyloadImagesAfterOnload off.

Lazyloading is working as expected, bottom pictures are loaded only when scrolling to bottom and become viewable..

https://googlechrome.github.io/lighthouse/viewer/?gist=675e69dfe488eabc7b2127bb0fdd1101

Just to test, @Cruiser13, should you replace the png picture with a jpg one ?

Eric

Mod_pagespeed version : 1.13.35.2-0 Chrome : Version 87.0.4280.66 (Build officiel) (64 bits)

[Cruiser13]

EDIT: No, the image errors are back at another test of pagespeed. All of them including PNGs and WEBPs. No effect from ModPagespeedLazyloadImagesAfterOnload off as I thought before:

Thank you for your response! I switched to ModPagespeedLazyloadImagesAfterOnload off as suggested. This removed at least some of the images from google's list: https://developers.google.com/speed/pagespeed/insights/?hl=de&url=https%3A%2F%2Fpringuin.de%2F Went down from 12 to 4 seconds time for deferrable images which is a step in the right direction.

Looks like we are now only missing images from srcset tags (@2x). Not sure if it's possible to lazy-load them using mod_pagespeed at all... at least there is no JS replacement I've seen.

[Lofesa]

In the html code I can see data-pagespeed-lazy-src and data-pagespeed-lazy-srcset so srcset must be lazyloaded too Maybe more related with your picture element and their non "typical" attributes: <picture data-alt="" data-default-src=

AFAIK psgespeed don´t recognize the picture element, the only part of the element that pagespeed recognices are the default img atrribute and it is rewrited and lazyloaded, but all the atrributes source srcset images are not lazyloaded.

You can´t use ModPagespeedUrlValuedAttribute source srcset image because there are more than one url. If you can build the module, then you can apply this PR #1929 manually and then can use: ModPagespeedUrlValuedAttribute source srcset srcset

[Cruiser13]

@Lofesa thank you, sadly we are on a managed server so we'll not be able to build the module ourself. Removing the data-default-src parameter does not change something as far as I can see.

[Lofesa]

Yes, I know... For the data-default-src you can use some like:

ModPagespeedUrlValuedAttribute picture data-default-src image

But the problem with the source srcset still here.

These carrousel can´t be acomplised with <img src=... srcset=..... >?

[Cruiser13]

This code is straight from the CMS and affects more than the website we're currently looking at. So there is no chance to change this. But I'm not sure if that's the main issue here. Pagespeed Insights does also complain about the normal img tag I've shown in the very first post.

[Lofesa]

Prior to run on LH or PSI, hit some times the page. Maybe the ttl for the optimized resource is ended, and then need to re-optimize and do all the pagespeed work again. If you fecht the resources by http, then the ttl for pagespeed cache is the original cache-control header, if you get the file with LodFromFile, then no cache-control header and you must set ModPagespeedLoadFromFileCacheTtlMs, if not set then have a ttl in pagespeed cache of 5 min.

[clandestino52]

Same issue her. Ex: I have an image slider in the top in viewport. Lighthouse say images should be lazy loaded. Mod_pagespeed beaconing say not. I think they shouldn't lazy loaded. Even if they are not shown. The slider is in viewport.

But also I have images that are not in the view port. I can see in the google console that they are loaded after onload event by pagespeed module. But lighthouse still complaining.

[Lofesa]

Have you set: ModPagespeedLazyloadImagesAfterOnload off? Are you using picture elements in the slider?

[clandestino52]

Yes I did. I actually fount that lighthouse is complaining about background images. Not img elements that are lazy loaded correctly with mod_pagespeed. Anyway except for one page in my site where it is not adding pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this) to some img elements. I don't know why,

I have diferent background images for sections in my page. Some inlined style and others in css. I found this is the real issue. But anyway is not related to mod_pagespeed. I think lazysize have some feature for background images. But it need to change the markup.