Images not lazy-loading

[Chathu07]

Hi.

As per the pagespeed insight, my WordPress site images aren't lazy loading even if i enabled it. Apart from that, i can't see any webP convert.

This is Ubuntu 18.04, Nginx 1.17.4, php7.3 server with WordPress sites.

This is my ModPagespeed configuration.

   pagespeed on;

    pagespeed ImplicitCacheTtlMs 1800000;

    pagespeed FileCachePath "/var/cache/ngx_pagespeed/";
    pagespeed RewriteLevel OptimizeForBandwidth;

    #Change origin header cache control
    pagespeed ModifyCachingHeaders on;

    location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" {
        add_header " " " ";
        }

    location ~ "^/pagespeed_static/" { }
    location ~ "^/ngx_pagespeed_beacon$" { }

    #pagespeed SslCertDirectory /etc/ssl/certs;
    #pagespeed SslCertFile file;

    pagespeed HonorCsp on;
    pagespeed RespectVary on;  

    pagespeed EnableFilters add_head;

    #AdSense Optimization.
    pagespeed EnableFilters make_show_ads_async;

    pagespeed EnableFilters add_instrumentation;
    pagespeed ReportUnloadTime on;
 pagespeed EnableFilters include_js_source_maps;

    #Map the origin domain
    pagespeed MapOriginDomain "http://www.example1.com/" "http://www.example1.com/";
    pagespeed MapOriginDomain "http://www.example2.com/" "http://www.example2.com/";
    pagespeed MapOriginDomain "http://www.example3.com/" "http://www.example3.com/";

pagespeed LoadFromFileMatch                   "^https://[^/]*.{{NGINX_SERVER_NAME}}/" "/usr/share/nginx/html/";
pagespeed LoadFromFileRuleMatch               disallow .*;
pagespeed LoadFromFileRuleMatch               allow \.css$;
pagespeed LoadFromFileRuleMatch               allow \.jpe?g$;
pagespeed LoadFromFileRuleMatch               allow \.png$;
pagespeed LoadFromFileRuleMatch               allow \.gif$;
pagespeed LoadFromFileRuleMatch               allow \.js$;
pagespeed LoadFromFileRuleMatch               allow \.ico$;
pagespeed LoadFromFileRuleMatch               allow \.svg$;

    #Load static files from disk
    pagespeed LoadFromFile "https://www.exmple1.com/" "/var/www/exmple1.com/htdocs/";
    pagespeed LoadFromFile "https://www.exmple2.com" "/var/www/exmple2.com/htdocs/";
    pagespeed LoadFromFile "https://www.exmple3.com" "/var/www/exmple3.com/htdocs/";

    #HTTPS Support Enable.
    pagespeed FetchHttps enable;
    pagespeed FetchHttps enable,allow_self_signed;

    #Optimize Browser Filters.
    pagespeed EnableFilters hint_preload_subresources;  
    pagespeed EnableFilters convert_meta_tags;
    pagespeed EnableFilters collapse_whitespace;
    pagespeed EnableFilters remove_quotes;

    #HTML Optimization.
    pagespeed EnableFilters combine_heads;
    pagespeed EnableFilters elide_attributes;
    pagespeed EnableFilters remove_comments;
    pagespeed RetainComment " google_ad_section*";

    #Image Optimization filters.
    pagespeed EnableFilters convert_jpeg_to_webp;       
    pagespeed EnableFilters convert_to_webp_lossless;
    pagespeed EnableFilters inline_images;
    pagespeed EnableFilters insert_image_dimensions;    
    pagespeed EnableFilters recompress_webp;
    pagespeed EnableFilters resize_images;
    pagespeed CssImageInlineMaxBytes 5000;
    pagespeed ImageInlineMaxBytes 2048;
 pagespeed EnableFilters inline_preview_images;
pagespeed EnableFilters recompress_images;
pagespeed EnableFilters convert_png_to_jpeg;
pagespeed EnableFilters convert_jpeg_to_progressive;
pagespeed LazyloadImagesBlankUrl "https://www.gstatic.com/psa/static/1.gif";

    #pagespeed EnableFilters rewrite_images;
    pagespeed EnableFilters resize_rendered_image_dimensions;
    pagespeed FinderPropertiesCacheExpirationTimeMs 720000000;
    pagespeed LazyloadImagesAfterOnload off;
    pagespeed EnableFilters dedup_inlined_images;
    pagespeed EnableFilters responsive_images;
    pagespeed EnableFilters resize_mobile_images;

    #JavaScript Optimization Filters.   
    pagespeed EnableFilters combine_javascript;
    #pagespeed EnableFilters inline_javascript;
    #pagespeed JsInlineMaxBytes 50000;  
    pagespeed MaxCombinedJsBytes -1;
pagespeed MaxSegmentLength 250;
    pagespeed EnableFilters outline_javascript;
    pagespeed JsOutlineMinBytes 30000;  
    pagespeed EnableFilters rewrite_javascript;
    pagespeed EnableFilters canonicalize_javascript_libraries;
    pagespeed EnableFilters defer_javascript;

    #CSS Optimization Filters.
    pagespeed EnableFilters prioritize_critical_css;    
    #pagespeed EnableFilters inline_css;
    #pagespeed CssInlineMaxBytes 151200;    
    pagespeed EnableFilters rewrite_css;
    pagespeed EnableFilters fallback_rewrite_css_urls;  
    pagespeed EnableFilters rewrite_css,sprite_images;  
    pagespeed EnableFilters inline_google_font_css;
pagespeed EnableFilters rewrite_style_attributes,rewrite_css;
    pagespeed GoogleFontCssInlineMaxBytes 51200;
    pagespeed EnableFilters move_css_above_scripts;
    pagespeed EnableFilters move_css_to_head;
    pagespeed EnableFilters combine_css;
    pagespeed MaxCombinedCssBytes -1;
    #pagespeed CombineAcrossPaths off;
    pagespeed EnableFilters inline_import_to_link;

    #Other Optimization Filters.
    pagespeed EnableFilters insert_dns_prefetch;
    pagespeed EnableFilters rewrite_domains;
    pagespeed DomainRewriteHyperlinks on;
    pagespeed EnableFilters flatten_css_imports;
    pagespeed CssFlattenMaxBytes 100000;
    pagespeed EnableFilters inline_import_to_link;
    pagespeed EnableFilters trim_urls;
    pagespeed RewriteLevel PassThrough;
    pagespeed EnableCachePurge on;
    pagespeed PurgeMethod PURGE;
    pagespeed EnableFilters extend_cache;   
    pagespeed EnableFilters remove_quotes;
    pagespeed EnableFilters local_storage_cache;
    pagespeed EnableFilters responsive_images,resize_images;
    pagespeed EnableFilters responsive_images_zoom;
    pagespeed EnableFilters lazyload_images;

    #Compress cache.
    pagespeed HttpCacheCompressionLevel 9;

    pagespeed InPlaceResourceOptimization on;

    #Enable PageSpeed Statistics and Logging.
    pagespeed MessagesPath /ngx_pagespeed_message;
    pagespeed ConsolePath /pagespeed_console;
    pagespeed Statistics on;
    pagespeed StatisticsLogging on;
    pagespeed LogDir /var/log/pagespeed;

    location ~ ^/pagespeed_admin {
            include common/acl.conf;
    }
     location ~ ^/ngx_pagespeed_statistics { 
        include common/acl.conf; 
     }

    #Server-Side Cache
    pagespeed FileCachePath              "/var/cache/ngx_pagespeed/";
    pagespeed FileCacheSizeKb            10000000;
    pagespeed FileCacheCleanIntervalMs   604800000;
    pagespeed FileCacheInodeLimit        500000;

    #security.
    pagespeed UrlSigningKey signature_key_string;
    pagespeed AcceptInvalidSignatures true;

    #Respecting X-Forwarded-Proto
    pagespeed RespectXForwardedProto on;

#Debug 
pagespeed ListOutstandingUrlsOnError on;

pagespeed MaxCacheableContentLength -1;

[Lofesa]

Hi @utags I don´t know why but lazyload load images with the onLoad event, even w/ LazyloadImagesAfterOnload set to off. What browser are you using to see webp images? The webp conversion is only made in chrome due to a "bug" in firefox. Issues related to this are #1857 and #1628

[Chathu07]

Thank you for your reply. I have used Google's pagespeed insight. This result given by that test.

[Lofesa]

But when you try it on a chrome browser, you get the webp images? You have enabled convert_jpeg_to_webp so the images must be converted when the browser send the apropiate image headers in the request. Try https://www.yourdomain.com/?PageSpeedFilters=+debug this inject debug messages in the html code ( you need to view the html code of the page)

P.D: I can´t see a pagespeed Domain directive, some like pagespeed Domain http*://www.yourdomain.com where www.yourdomain.com is the comain that is set in the final html code in your site https://www.modpagespeed.com/doc/domains#auth_domains