I am using CRA and pre-render is on. I created a _headers file in my root directory and wrote the following code.
/*.(webp|jpg|png|gif|mp4|ttf|woff|woff2|ico|css|js)$
Cache-Control: max-age=31536000, public
Vary: Accept-Encoding
However, when I query with PageSpeed, I get a warning that 4 fixed images need to be cached.
https://pagespeed.web.dev/analysis/https-vacbid-com-tr-stay-detail-the-courthouse-hotel-ascend-hotel-collection/bh6uniqfow?form_factor=desktop
Am I doing something wrong in the _headers configuration?
@HakanSungur As per this other thread:
You may be confused as to what the headers set on Netlify can impact.
They will only, (and can only), adjust the headers of files served by that Netlify site.
They will not change the response headers of other sites the page may be retrieving assets from.
If you check the src of the images you’ll see they’re served from elsewhere, e.g:
https://cf.bstatic.com/xdata/images/hotel/max1280x900/222028320.webp?k=02105e144ac3a897d3864a81fee6fa206de31ce5106920720b95be0c322b7002&o=
To set different headers for that image you would need to do so at cf.bstatic.com (which appears to be a booking.com related URL).
You could proxy the assets to your site, but as I understand it you still couldn’t change the response headers as per the warning box here:
https://docs.netlify.com/routing/redirects/rewrites-proxies/#custom-headers-in-proxy-redirects
In which case you would need to use some other solution, perhaps ingesting the images to the Netlify Image CDN where you can then set Custom Headers