Pagespeed Not optimising part of website images.

[Mazizieh]

trafficstars

Hello everyone!

I have nginx 1.16 with pagespeed 1.13.35.2-0. the issue is that pagepseed able to optimise images in main page but not other pages. with no error or suspicious logs.

where any images exist under media/catalog/product/cache are not being optimized.

Pagespeed config file:

#pagespeed config 

pagespeed ForceCaching on;
pagespeed RewriteLevel CoreFilters;
pagespeed RespectXForwardedProto on;
pagespeed RateLimitBackgroundFetches off;
pagespeed MaxCacheableContentLength -1;

pagespeed LoadFromFile "https://example.com/media/" "/home/example/www/media/";
pagespeed LoadFromFile "https://example.com/js/" "/home/example/www/js/";
pagespeed LoadFromFile "https://example.com/skin/" "/home/example/www/skin/";

pagespeed EnableFilters responsive_images;
pagespeed EnableFilters combine_heads;
pagespeed EnableFilters outline_css;
pagespeed EnableFilters outline_javascript;
pagespeed EnableFilters move_css_above_scripts;
pagespeed EnableFilters rewrite_style_attributes;
pagespeed EnableFilters prioritize_critical_css;
pagespeed EnableFilters make_google_analytics_async;
pagespeed EnableFilters inline_google_font_css;
pagespeed EnableFilters local_storage_cache;
pagespeed EnableFilters convert_to_webp_animated;
pagespeed EnableFilters insert_image_dimensions;
pagespeed EnableFilters inline_preview_images;
pagespeed EnableFilters resize_mobile_images;
pagespeed EnableFilters collapse_whitespace;
pagespeed EnableFilters elide_attributes;
pagespeed EnableFilters sprite_images;
pagespeed EnableFilters lazyload_images;
pagespeed EnableFilters extend_cache;

Server configurations:

    include /etc/nginx/pagespeed.conf;

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


    location ~* ^/media/catalog/product/cache/./.*/([\d]+)x/(.+)/(.+)/(.+)/(.+)$ {
            alias /home/example/www/media/catalog/product/$3/$4/$5;
            image_filter on;
            proxy_ignore_headers Cache-Control; 
            image_filter resize $1 $1;
            image_filter_buffer 200M;
            image_filter_interlace on;
            image_filter_jpeg_quality 98;
            error_page 415 = /empty;
            error_page 404   @missing_product_image;
    }

    location ~* ^/media/catalog/product/cache/./.*/([\d]+)x([\d]+)/(.+)/(.+)/(.+)/(.+)$ {
            alias /home/example/www/media/catalog/product/$4/$5/$6;
            image_filter on;
            proxy_ignore_headers Cache-Control;
            image_filter resize $1 $2;
            image_filter_buffer 200M;
            image_filter_interlace on;
            image_filter_jpeg_quality 98;
            error_page 415 = /empty;
            error_page 404   @missing_product_image;
            }

    location ~* ^/media/catalog/product/cache/./image/.+/(.+)/(.+)/(.+)$ {
            alias /home/example/www/media/catalog/product/$1/$2/$3;
    }


    location ~* ^/skin/frontend/example/default/images/([\d]+)x([\d]+)/(.+)$ {
            alias /home/example/www/skin/frontend/example/default/images/$3;
            image_filter on;
            proxy_ignore_headers Cache-Control;
            image_filter resize $1 $2;
            image_filter_buffer 200M;
            image_filter_interlace on;
            image_filter_jpeg_quality 90;
            error_page 415 = /empty;
    }

    location @missing_product_image {
        rewrite /media/catalog/product/cache/./.*/([\d]+)x([\d]+)/(.+)/(.+)/(.+)/(.+) /skin/frontend/example/default/images/$1x$2/product_spacer.jpg redirect;
    }

[oschaaf]

I wonder, is there any specific configuration for the path that won’t be optimized?

[Mazizieh]

I wonder, is there any specific configuration for the path that won’t be optimized?

Nothing rather than the configurations mentioned in the main issue.

[oschaaf]

Can you add this line?:

pagespeed EnableFilters responsive_images;

Hopefully ngx_pagespeed will emit comments in html mentioning why it backs out of optimization.

[Mazizieh]

Can you add this line?:

pagespeed EnableFilters responsive_images;

Hopefully ngx_pagespeed will emit comments in html mentioning why it backs out of optimization.

It is already there, the comments I get are:

<!--Resource headers are preventing rewriting of https://www.example.com/media/catalog/product/cache/0/small_image/300x/95/9/5/9558-1.jpg-->

<!--ResponsiveImageFilter: Not adding srcset because image does not have dimensions (or a src URL).-->

[Lofesa]

Hi @Mazizieh you stated: "...Resource headers are preventing rewriting of..." Maybe the cause is: proxy_ignore_headers Cache-Control;

cause this set the Cache-Control to the time set in proxy_cache_valid [code ...] time; You don´t have this enabled in your config so maybe cache-contorl is 0 or is not set, so pagespeed don´t fecht it.

[Mazizieh]

Hi @Mazizieh you stated: "...Resource headers are preventing rewriting of..." Maybe the cause is: proxy_ignore_headers Cache-Control;

cause this set the Cache-Control to the time set in proxy_cache_valid [code ...] time; You don´t have this enabled in your config so maybe cache-contorl is 0 or is not set, so pagespeed don´t fecht it.

unfortunately, this is not what cause the issue, neither adding proxy_cache_valid nor disabling proxy_ignore_headers solve the issue.

[Lofesa]

Hi But the error message you have posted is related to headers

[Mazizieh]

Hi But the error message you have posted is related to headers

Here is all header details for one of the non optimized assets:

Request URL: https://www.example.com/media/catalog/product/cache/0/small_image/300x/9df78eab33525d/E/D/ED5885-10.jpg
Request Method: GET
Status Code: 200 OK
Remote Address: X.X.X.X:443
Referrer Policy: no-referrer-when-downgrade
Cache-Control: max-age=2592000
Content-Length: 20144
Content-Type: image/jpeg
Date: Tue, 16 Jul 2019 10:55:43 GMT
ETag: W/"5d1d573a-aff92"
Expires: Thu, 15 Aug 2019 10:55:43 GMT
Last-Modified: Thu, 04 Jul 2019 01:32:42 GMT
nnCoection: close
Server: nginx
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Accept: image/webp,image/apng,image/*,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cache-Control: no-cache
Connection: keep-alive
Cookie: lang=en; frontend=p85e7phliu7g9vppdvdo9g54l5; _delighted_fst=1563107504455:{}; _gcl_au=1.1.1093713283.1563107505; __tawkuuid=e::shop.example.ae::bUuPtpau/D2XvbD3+w1kNoTUzNJBDUPN+TvnCz6O2JVQqEjXnSD4vmND53vu7fJi::2; _fbp=fb.1.1563107505426.1309377612; _ga=GA1.3.1080968892.1563107506; _gid=GA1.3.306633941.1563107506; cto_lwid=f32d220d-e7dc-42f1-b675-0a3515469bb0; _scid=493ad801-c2a7-4000-9b04-7641d6def009; _sctr=1|1563051600000; _delighted_lst=1563107508059:{%22token%22:%22SsYTjxsB5mMoCGZiVolmpIW6%22}; seasonal=true; __insp_wid=1702379826; __insp_nv=true; __insp_targlpu=aHR0cHM6Ly9zaG9wLmFkaWRhcy5hZS9lbi93b21lbg%3D%3D; __insp_targlpt=YWRpZGFzIE9ubGluZSBTaG9wcGluZyB8IFNwb3J0cyBDb2xsZWN0aW9uIHwgYWRpZGFzIFVBRQ%3D%3D; __insp_norec_sess=true; __insp_slim=1563256660769; TawkConnectionTime=0; _abvisitor=ovDCW7y45k462BVsyQAw9nROeFzCyQz4AsQe167h%3B1563274541
Host: www.example.com
Pragma: no-cache
Referer: https://www.example.com/en/women?p=2
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36

[Lofesa]

Cache-Control: max-age=2592000 Cache-Control: no-cache

You had 2 cache-control headers and I think the last is the one that are valid, so you had a Cache-Control: no-cache header and then pagespeed don´t rewrite these image.

[Mazizieh]

Cache-Control: max-age=2592000 Cache-Control: no-cache

You had 2 cache-control headers and I think the last is the one that are valid, so you had a Cache-Control: no-cache header and then pagespeed don´t rewrite these image.

However, I have same thing for optimized images like below:

Request URL: https://www.example.com/media/banner/banner.jpg.pagespeed.ic.5oGh.webp
Request Method: GET
Status Code: 200 OK
Remote Address: x.x.x.x:443
Referrer Policy: no-referrer-when-downgrade
Cache-Control: max-age=31536000
Content-Length: 3870
Content-Type: image/webp
Date: Sun, 21 Jul 2019 05:28:51 GMT
ETag: W/"0"
Expires: Mon, 20 Jul 2020 05:28:51 GMT
Last-Modified: Sun, 21 Jul 2019 05:28:51 GMT
Link: <https://www.example.com/media/banner/banner.jpg>; rel="canonical"
nnCoection: close
Server: nginx
X-Original-Content-Length: 4569
X-Page-Speed: 1.13.35.2-0
Accept: image/webp,image/apng,image/*,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cache-Control: no-cache
Connection: keep-alive
Cookie: _delighted_fst=1563107504455:{}; _gcl_au=1.1.1093713283.1563107505; __tawkuuid=e::www.example.com::bUuPtpau/D2XvbD3+w1kNoTUzNJBDUPN+TvnCz6O2JVQqEjXnSD4vmND53vu7fJi::2; _fbp=fb.1.1563107505426.1309377612; _ga=GA1.3.1080968892.1563107506; cto_lwid=f32d220d-e7dc-42f1-b675-0a3515469bb0; _scid=493ad801-c2a7-4000-9b04-7641d6def009; _delighted_lst=1563107508059:{%22token%22:%22SsYTjxsB5mMoCGZiVolmpIW6%22}; lang=en; frontend=gf874v5qkeoj2u3kqpj2gsqi04; seasonal=true; _gid=GA1.3.1305134949.1563620784; waitingroom=klYEg-TdSVB-8T2tL-ELD1r; __insp_wid=1702379826; __insp_nv=true; __insp_targlpu=aHR0cHM6Ly9zaG9wLmFkaWRhcy5hZS9lbi9tZW4%3D; __insp_targlpt=YWRpZGFzIE9ubGluZSBTaG9wcGluZyB8IFNwb3J0cyBDb2xsZWN0aW9uIHwgYWRpZGFzIFVBRQ%3D%3D; __insp_norec_sess=true; _sctr=1|1563656400000; _abvisitor=plpYPgBAgQAilWaT0WYUhsv51w4T3VDwjYBOfULB%3B1563693020; __insp_slim=1563693203809; TawkConnectionTime=0; _dc_gtm_UA-63988148-1=1; criteo_write_test=ChUIBBINbXlHb29nbGVSdGJJZBgBIAE; _gat_UA-63988148-1=1
Host: www.example.com
Pragma: no-cache
Referer: https://www.example.com/en/page1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36

So, I don't think actually this is the problem, since this showing caching for both request and response from both user and server ends.

[Lofesa]

Ah! I see.... you have posted both, the send and the receive headers. From: Accept: image/webp,image/apng,image/,/*;q=0.8 until the last line are the headers that your browser send to the server, these headers don´t matter for the issue. Well, the non optimized headers don´t have any clue that tell pagespeed is working on it. You can see that optimized image have a caracterisc Etag (W/"0") and have the pagespeed header (X-Page-Speed: 1.13.35.2-0), so this make me think that the images non optimized don´t have pagespeed enabled, I can´t see where you have the pagespeed on, if you set it on the http block then is enabled for all the sites you have configured, if have in only in 1 site then only work on that site and if you have it on a location, then it work only for that location.

In other hand, you have configured:

pagespeed LoadFromFile "https://example.com/media/" "/home/example/www/media/";
pagespeed LoadFromFile "https://example.com/js/" "/home/example/www/js/";
pagespeed LoadFromFile "https://example.com/skin/" "/home/example/www/skin/";

why you don´t change this with:

pagespeed LoadFromFile "https://example.com/" "/home/example/www/"; and then include and exclude file patterns:

pagespeed LoadFromFileRuleMatch disallow .*;
pagespeed LoadFromFileRuleMatch allow \.(ico|pdf|swf|eot|woff|woff2|ttf|otf|css|js|jpeg|jpg|png|gif|svg|svgz|mpg|mpeg|mp3|m4a|m4v|mp4|ogg|wmv|mov|mng|3gpp|3gp|webp|webm|flv|avi|asx|asf)(\?.*)?$;

The 1st rule disables all the files the the second enabes only the files w/ these extensions.