CODEWITHSUNDEEP
cachinggoogle-cloud-storagecache-controlpagespeed-insightsgoogle-cloud-cdn
dparizek
dparizek

Reputation: 100

Wrong cache-control headers delivered from Google Cloud Storage / Google Cloud CDN static website - how to fix?

I have a static web site hosted on a bucket in Google Cloud Storage with Google Cloud CDN in front of it. That site has many pictures with inspirational quotes on them.

PageSpeed Insights is saying they need an efficient cache policy:

enter image description here

but I am setting a cache time of one year (Cache-Control:"Cache-Control:public,max-age=31536000") on all my images when I use gsutil to upload them to my bucket.

If I go to the bucket and check, it says they are properly set: the object metadata edit screen in google cloud storage

and if I check my settings for Google Cloud CDN, also set to one year across the board: screen shot of google cloud cdn settings showing one year cache time

But PageSpeed Insights says:

Serve static assets with an efficient cache policy 15 resources found A long cache lifetime can speed up repeat visits to your page.

I check the actual Response headers delivered via Chrome Dev Tools and they look ok:

accept-ranges: bytes
age: 46890
alt-svc: clear
cache-control: Cache-Control:public,max-age=31536000,public
content-language: en
content-length: 10008
content-type: image/webp
date: Tue, 25 Jan 2022 06:16:37 GMT
etag: "36fd43e7d25b661ac7172364222c3d5c"
last-modified: Mon, 24 Jan 2022 21:41:02 GMT
server: UploadServer
x-goog-generation: 1643060462624518
x-goog-hash: crc32c=6URgQQ==
x-goog-hash: md5=Nv1D59JbZhrHFyNkIiw9XA==
x-goog-metageneration: 1
x-goog-storage-class: STANDARD
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 10008
x-guploader-uploadid: ADPycds_8JRi-oDTLk2qZyVndksOR3St2XzntoPRTq-56j6QQNI3ebAzS1h4FkuifRhOiJcLRYq-Lo2cNmTpnzHVnsE

although the Request Headers do not:

    :authority: discoverquotes.com
:method: GET
:path: /love/love-titlepin400.webp
:scheme: https
accept: image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9
cache-control: no-cache
cookie: _ga=GA1.1.445449550.1642877186; _ga_8WVC1J4HD6=GS1.1.1643137529.32.1.1643137574.0
pragma: no-cache
referer: https://discoverquotes.com/
sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="97", "Chromium";v="97"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "macOS"
sec-fetch-dest: image
sec-fetch-mode: no-cors
sec-fetch-site: same-origin
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36

But it is only the response headers I can control right? And I cannot really know what Request Headers PageSpeed Insights is setting when they fetch it, right? or ?

I see this issue on stackoverflow: Request Headers vs Response Headers

but do not see how to fix the request headers being sent? Is PageSpeed Insights fetching pages themselves or using my browser?

I am confused. Suggestions to debug, learn more, or fix?

Upvotes: 0

Views: 1076

Answers (1)

Kevin Christopher Henry
Kevin Christopher Henry

Reputation: 48952

The issue appears to be that you've written the phrase Cache-Control in the Cache-Control configuration field, causing it to appear twice in response header, making it invalid. Presumably setting it to simply public, max-age=31536000 will make the resulting header valid.

Don't worry abut the request Cache-Control headers, you can't control them anyway. They're probably set that way because Dev Tools usually turns caching off.

Upvotes: 4

Related Questions