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