Images not showing up on mobile when mod_pagespeed was installed

I installed mod_pagespeed to get our lighthouse scores up and thoroughly tested it on multiple staging servers and everything loaded quickly and perfectly. Then I went to install on our production server of which the only difference is prod has Cloudflare. It went up and everything loaded quickly but on mobile certain images won’t load, some do but most do not. I tried changing the filters and I actually got them to load when I tested but then 8 hours later they were gone again.
My pagespeed config is as follows:

ModPagespeed on
AddOutputFilterByType MOD_PAGESPEED_OUTPUT_FILTER text/html
ModPagespeedFileCachePath “/var/cache/mod_pagespeed/”
ModPagespeedLogDir “/var/log/pagespeed”
ModPagespeedSslCertDirectory “/etc/ssl/certs”
ModPagespeedFileCacheInodeLimit 500000
ModPagespeedStatisticsLogging on
ModPagespeedMessageBufferSize 100000

    <Location /mod_pagespeed_statistics>
	  <IfModule mod_rewrite.c>
	    RewriteEngine Off
	  Order deny,allow
	  Allow from localhost
	  Allow from REDACTED
	  SetHandler mod_pagespeed_statistics	
	<Location /mod_pagespeed_message>
  	  <IfModule mod_rewrite.c>
    	     RewriteEngine Off
  	  Order deny,allow
  	  Allow from localhost
  	  Allow from REDACTED
 	   SetHandler mod_pagespeed_message
    <Location /pagespeed_admin>
      <IfModule mod_rewrite.c>
        RewriteEngine Off
      Order deny,allow
      Allow from localhost
      Allow from REDACTED
      SetHandler pagespeed_admin
    ModPagespeedEnableFilters prioritize_critical_css
    ModPagespeedEnableFilters sprite_images
    ModPagespeedEnableFilters rewrite_javascript
    ModPagespeedEnableFilters include_js_source_maps
    ModPagespeedEnableFilters responsive_images,resize_images
    ModPagespeedEnableFilters rewrite_images
    ModPagespeedEnableFilters recompress_png
    ModPagespeedEnableFilters convert_png_to_jpeg
    ModPagespeedEnableFilters convert_jpeg_to_progressive
    ModPagespeedEnableFilters recompress_jpeg
    ModPagespeedEnableFilters convert_jpeg_to_webp
    ModPagespeedEnableFilters collapse_whitespace,remove_comments
    ModPagespeedEnableFilters lazyload_images    
    ModPagespeedEnableFilters inline_javascript
    ModPagespeedEnableFilters hint_preload_subresources
    ModPagespeedEnableFilters inline_preview_images
    ModPagespeedEnableFilters insert_dns_prefetch
    ModPagespeedEnableFilters dedup_inlined_images
    ModPagespeedEnableFilters make_google_analytics_async
    ModPagespeedEnableFilters move_css_to_head
    ModPagespeedDisallow */amp/*

Anyone have any insight on Cloudflare + mod_pagespeed?

Hi @mlewis,

What mobile devices you tested this on?

iPhone XR - Chrome, Firefox & Safari
Emulated Pixel 2 - Chrome
Emulated Nexus 7 - Chrome
All have the same issue.

Here’s my guess:

mod_pagespeed is a great overall resource. In terms of images, one of the things it does is convert JPG and PNG images to the next generation format called webp:

ModPagespeedEnableFilters convert_jpeg_to_webp

The webp format however is not supported by many browsers, including Safari for MacOS and all iOS browsers. You can check what browsers support webp images here.

So what mod_pagespeed does is it takes into consideration the User Agent of the visitor to assess whether or not it can handle webp images. If it can, mod_pagespeed will make your origin server generate webp images. If not, only jpg or png images are sent out.

With Cloudflare between your origin and the visitor, it all will depend on who’s the first visitor after a cache purge. If you purge your cache and the first visitor is using Chrome (desktop), it will generate webp images, which are smaller in size. Then the next visitor being on a Safari will not see these images, as Cloudflare will not make such judgement.

A similar situation is discussed in this thread: Missing images after purging everything

If I am right in my assumption, you’d have to turn off webp on mod_pagespeed. If you are on a Pro Plan or higher, you can turn Polish on and it will generate webp images based on device (since it’s done by Cloudflare at the edge, only devices that support webp will get it)

1 Like

That’s exactly what I thought, I tried disabling that filter though and it worked when I disabled it and tested it but then I woke up in the morning and it was broken again. It could still be a caching issue though I’ll have to test more I suppose.

You’d need to purge your cache at the origin, as well as at Cloudflare, after disabling that filter.

I hope it works. Let us know if it does.

This topic was automatically closed after 30 days. New replies are no longer allowed.