Optimize images issue is still there in Google PageSpeed Insights

[Muhammad Fahad]

Hi,
I have installed mod_pagespeed which is working fine but i have noticed that Google PageSpeed Insights is still pointing issues for my images on the page. I am using Zend opcode for server side cache. Is there anything wrong i am doing, Below are the filters:

Filters:
ModPagespeedEnableFilters inline_import_to_link
ModPagespeedEnableFilters flatten_css_imports
ModPagespeedEnableFilters combine_css
ModPagespeedEnableFilters rewrite_css
ModPagespeedEnableFilters prioritize_critical_css
ModPagespeedEnableFilters combine_javascript
ModPagespeedEnableFilters rewrite_javascript
ModPagespeedEnableFilters collapse_whitespace
ModPagespeedEnableFilters rewrite_images
ModPagespeedEnableFilters recompress_images
ModPagespeedEnableFilters move_css_to_head
ModPagespeedEnableFilters move_css_above_scripts
ModPagespeedEnableFilters rewrite_css,sprite_images
ModPagespeedEnableFilters lazyload_images


Cache settings:
ModPagespeedFileCacheSizeKb          102400
ModPagespeedFileCacheCleanIntervalMs 3600000
ModPagespeedLRUCacheKbPerProcess     1024
ModPagespeedLRUCacheByteLimit        16384
ModPagespeedCssInlineMaxBytes        2048
ModPagespeedImgInlineMaxBytes        2048
ModPagespeedJsInlineMaxBytes         2048
ModPagespeedCssOutlineMinBytes       3000
ModPagespeedJsOutlineMinBytes        3000


Images are getting tags as below:
<img src="/images/logo4.png" width="200px" height="50px" data-pagespeed-url-hash="797447103" onload="pagespeed.CriticalImages.checkImageForCriticality(this);">

 <img data-pagespeed-lazy-src="/images/prv/communities.jpg" class="img-responsive img-thumbnail hidden-xs hidden-sm"  data-pagespeed-url-hash="3995220263" src="/pagespeed_static/1.JiBnMqyl6S.gif" onload="pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);" onerror="this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);">

<img class="hidden-sm hidden-md" style="position: absolute; bottom: -0.2em; right: 0.3em; width: 80px; padding: 4px; height:70px; width:70px" data-pagespeed-lazy-src="/agent_logo/property-matters-.jpg"  data-pagespeed-url-hash="1610712317" src="/pagespeed_static/1.JiBnMqyl6S.gif" onload="pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);" onerror="this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);">

<img class="hidden-sm hidden-md" style="position: absolute; bottom: -0.2em; right: 0.3em; width: 80px; padding: 4px; height:70px; width:70px" data-pagespeed-lazy-src="/agent_logo/estate22.png" data-pagespeed-url-hash="605459019" src="/pagespeed_static/1.JiBnMqyl6S.gif" onload="pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);" onerror="this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);">

[Joshua Marantz]

Your config looks OK.  The HTML snippet you pasted indicates that your images are not optimized yet, and I'm guessing this might have to do with your server-side cache.

When mod_pagespeed rewrites HTML, it usually serves a partially optimized result on the first view, kicking off image, css, and JS optimizations in the background. HTML served during the background optimizations won't benefit from them yet.

The issue with having extra serve-side caches is that you might capture the not-yet-optimized HTML in it.  See https://modpagespeed.com/doc/downstream-caching for more discussion.

Another possibility is that the optimizations are failing for some reason.  If you check our HTML source after append ?PageSpeedFilters=+debug to the query, you might be able to find out why.   Also check the Apache logs.

One more thing: which version of PageSpeed are you running?

-Josh

--
You received this message because you are subscribed to the Google Groups "mod-pagespeed-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mod-pagespeed-discuss+unsub...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mod-pagespeed-discuss/7c9a3d35-6fed-4bcd-a56f-14efa7086022%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Muhammad Fahad]

Hi,

I have disabled Zend opcache now, i can see slightly change in the code as below. Does it mean my images are being processed for optimization?


<img style="width:370px; height:250px;" data-pagespeed-lazy-src="/thumbnail/agent6111-1.jpg"  class="img-responsive" src="/pagespeed_static/1.JiBnMqyl6S.gif" onload="pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);" onerror="this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);">

But when i go and look into Google Page Insight it shows me same 53 score out of 100. Above image message is:

Compressing https://www..../thumbnail/agent6111-1.jpg could save 52.8KiB (68% reduction)

Version is  X-Mod-Pagespeed:

1.11.33.4-0

I have below in my .htaccess file:

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>

<filesMatch ".(xml|txt)$">
Header set Cache-Control "max-age=86400, public, must-revalidate"
</filesMatch>


<FilesMatch "\.(x?html?|php)$"> 
Header set Cache-Control "private, must-revalidate" 
</FilesMatch>

[Muhammad Fahad]

I would like to add some more information:

Infact my domain is on https which might be the issue. I have already added and tried with below but still no luck:

# ModPagespeedDomain
ModPagespeedFetchHttps enable
ModPagespeedDomain https://www.mydomain
ModPagespeedMapOriginDomain "http://www.example.com" "https://www.example.com"
ModPagespeedSslCertDirectory /var/cpanel/ssl/installed/certs
ModPagespeedSslCertFile /var/cpanel/ssl/installed/certs/filepath.crt

Though i can see in the mod_pagespeed in the header in chrome browser but https://ismodpagespeedworking.com/ site says:  Fail! mod_pagespeed is not running on that domain.

[Otto van der Schaaf]

As there are traces of mod_pagespeed in your html, I would argue that ismodpagespeed.com is incorrectly stating mod_pagespeed is not running. Maybe someone is masking or removing the pagespeed header that the test looks for?

Currently you are pointing mod_pagespeed to plain http for fetching with MapOriginDomain configuration. Is your site responding with 200/ok to plain http requests? If plain http requests are redirected back to https, the MapOriginDomain you have configured will not work. 

Otto

--
You received this message because you are subscribed to the Google Groups "mod-pagespeed-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to mod-pagespeed-di...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mod-pagespeed-discuss/210f4aec-7466-45e7-9827-9aec072067f9%40googlegroups.com.

[Muhammad Fahad]

Yes i am redirecting http to https. how can i make it workable? I can see lot of images like below have been optimized and rewritten but still getting lot of errors when i debug:

    <img src="/images/patterns/xdark-exa.png.pagespeed.ic.FpO4e3ffLx.webp" style="position: absolute; top: 0px; left: 0px; height:100%; width:100%; opacity:0.1;" data-pagespeed-url-hash="3453833477" data-pagespeed-onload="pagespeed.CriticalImages.checkImageForCriticality(this);" onload="var elem=this;if (this==window) elem=document.body;elem.setAttribute('data-pagespeed-loaded', 1)"/>

Debug says:
<!--deadline_exceeded for filter CacheExtender--><!--deadline_exceeded for filter ImageRewrite-->

<!--deadline_exceeded for filter CssFilter--><!--deadline_exceeded for filter CssCombine-->

<!--
#Flush after 20283us
#Parse duration 200us
#Render duration 11765us
#Idle duration 4207us
-->
<!--
mod_pagespeed on
Filters:
ah Add Head
cw Collapse Whitespace
cc Combine Css
jc Combine Javascript
gp Convert Gif to Png
jp Convert Jpeg to Progressive
jw Convert Jpeg To Webp
mc Convert Meta Tags
pj Convert Png to Jpeg
ws When converting images to WebP, prefer lossless conversions
db Debug
dj Defer Javascript
ea Elide Attributes
ec Cache Extend Css
ei Cache Extend Images
es Cache Extend Scripts
fc Fallback Rewrite Css
if Flatten CSS Imports
hw Flushes html
ci Inline Css
ii Inline Images
il Inline @import to Link
ji Inline Javascript
js Jpeg Subsampling
ll Lazyload Images
cj Move Css Above Scripts
cm Move Css To Head
pr Prioritize Critical Css
rj Recompress Jpeg
rp Recompress Png
rw Recompress Webp
ri Resize Images
cf Rewrite Css
jm Rewrite External Javascript
jj Rewrite Inline Javascript
cu Rewrite Style Attributes With Url
is Sprite Images
cp Strip Image Color Profiles
md Strip Image Meta Data

Options:
CssInlineMaxBytes (ci) 2048
CssOutlineMinBytes (co) 3000
EnableRewriting (e) 1
FileCacheCleanIntervalMs (afcci) 3600000
FileCacheSizeKb (afc) 2048000
ImageInlineMaxBytes (ii) 6144
ImageMaxRewritesAtOnce (im) 0
JsInlineMaxBytes (ji) 2048
JsOutlineMinBytes (jo) 3000
LRUCacheByteLimit (alcb) 16384
LRUCacheKbPerProcess (alcp) 3072
RunExperiment (fur) False

#NumFlushes 1
#EndDocument after 20283us
#Total Parse duration 1291us
#Total Render duration 26528us
#Total Idle duration 4229us
No critical images detected.
The following filters were disabled for this request:
CriticalSelectorFilter: No critical selector info in cache
Lazyload Images
-->

Secondly, I am still getting report by Google Page Speed Insight:

Leverage browser caching
https://www.google-analytics.com/analytics.js

and

Eliminate render-blocking JavaScript and CSS in above-the-fold content

How can i fix it through mod_pagespeed?

[Otto van der Schaaf]

Do the debug messages that mention "deadline_exceed" go away after a few pageloads? 

If so, it's just the way mod_pagespeed works. It needs a little bit of time to get everything fully optimized.

For https: instead of using MapOriginDomain, you could consider setting up LoadFromFile, which I find more convenient and efficient compared to http(s) fetching. It only works for static files though, so any virtual handlers will not work:

https://modpagespeed.com/doc/domains#ModPagespeedLoadFromFile

Otto

--

You received this message because you are subscribed to the Google Groups "mod-pagespeed-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mod-pagespeed-di...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/mod-pagespeed-discuss/b6b52a44-6905-4750-9fec-844d16725c09%40googlegroups.com.

[Muhammad Fahad]

Thanks for your support. It seems it has started to work now but debug reports about few images:

<!--Uncacheable content, preventing rewriting of



Also Google Page Speed Insight is still reporting me about below. Is there any fix of it? 

Leverage browser caching
https://www.google-analytics.com/analytics.js

and

[Otto van der Schaaf]

<!--Uncacheable content, preventing rewriting of

Your resources (images, css, javascript) aren't cacheable. If PageSpeed sees cache-control headers such as nocache or private it will not rewrite the resources:

https://modpagespeed.com/doc/faq

The solution is to either configure Apache so the assets are served as publically cacheable, or to configure mod_pagespeed to directly load static files from disk:
https://modpagespeed.com/doc/domains#ModPagespeedLoadFromFile

Leverage browser caching
https://www.google-analytics.com/analytics.js

You should probably just ignore this one.

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Is PSI complaining about css, javascript or both?
- For javascript, turning on defer_javascript may help.
- prioritize_critical_css, which you already have enabled, needs a few full page reloads, because it needs browsers to beacon back data about which css is critical back to mod_pagespeed. Is this a transient complaint?

Otto

[Muhammad Fahad]

I can see images are getting rewritten but Google Page Insight is still pointing to Optimize images. Below is an example:

blog/wp-content/uploads/2017/01/xStory-15-B-min-1024x343.jpg.pagespeed.ic.V3SFqtx72J.jpg

and Leverage browser caching says:
layerslider/css/blank.gif (5 minutes)
skins/borderlessdark3d/shadow.png (5 minutes)
skins/borderlessdark3d/skin.css (5 minutes)

--
You received this message because you are subscribed to a topic in the Google Groups "mod-pagespeed-discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/mod-pagespeed-discuss/6iWyCmZcblc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to mod-pagespeed-discuss+unsub...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mod-pagespeed-discuss/CAHqmWiMWJ5NNiTmR0P0t-2dtd%3Dwo%2BhDqyBQEKWuPMPECkuvE7g%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

--

Regards,
Fahad