i'm working on the following site: www.ekamat.es
When I run the GTMetrix test, it shows an awful result on several things. One of them is the expiration of some of my resources. It shows the following message: (expiration not specified)
Those files are uploaded to Amazon S3, and I've set a Cache-Control near a month (2592000). I can be sure of that, because when I open one of those resources in Chrome and I inspect it with the developer console, it shows the following information:
Age:3146
Cache-Control:2592000
Connection:keep-alive
Date:Wed, 04 May 2016 01:46:04 GMT
ETag:"70e17baac2c3e15e2df0064dd2466d4a"
Server:AmazonS3
Via:1.1 7acf1813f9ec06038d676de15fcfc28f.cloudfront.net (CloudFront)
X-Amz-Cf-Id:c4ERes-XPeGiwTOzMEwqyvNZlPtDih-uV77WCI6Jr0OAWnohkHGW6Q==
X-Cache:Hit from cloudfront
Also, in my .htaccess, I've this:
<IfModule mod_headers.c>
<FilesMatch "\\.(ico|jpeg|jpg|png|gif|swf|css|js)$">
Header set Cache-Control "max-age=604800, public"
Header append Vary: Accept-Encoding
</FilesMatch>
<FilesMatch "\\.(x?html?|php)$">
Header set Cache-Control "max-age=600, private, must-revalidate"
</FilesMatch>
</IfModule>
So, how would you explain that GTMetrix isn't showing the correct info? are they working with an old version of my site, or it's really a mistake or a misconfiguration by me??
Thank you in advance!
This is not valid:
Cache-Control: 2592000
...it should be...
Cache-Control: max-age=2592000
...or...
Cache-Control: public, max-age=2592000
https://www.rfc-editor.org/rfc/rfc7234#section-5.2.2
If that .htaccess file is on S3, you can delete it. S3 doesn't process those. Presumably, though, that's on a different server, in which case you can disregard this paragraph.
After you correct your objects in S3, you need to invalidate * (everything) in CloudFront to purge the CloudFront edge caches of the invalid objects.
Related
Okay, so I noticed my Cloudfront isn't caching when I ran Google Page Tools and it told me that my images had no expiration set. I use Amazon S3 through Cloudfront. There's no headers set on S3 because I have hundreds of folders and thousands of image files with new ones uploaded every hour.
I went to my Cloudfront console, to Behaviours, edited the only one there and set:
Minimum TTL: 86400
Maximum TTL: 31536000
Default TTL: 86400
And I checked the 'Customize' option for 'Object Caching'. I then went to invalidate and invalidated all my objects (*). I waited until it was done, but my headers when requesting a file still shows:
Age:8
Connection:keep-alive
Date:Mon, 07 Dec 2015 00:44:39 GMT
ETag:"429d87a5fd35288d207635d2a853fa0b"
Server:AmazonS3
Via:1.1 (my-ID-here).cloudfront.net (CloudFront)
X-Amz-Cf-Id:RxHlfhhnrSk9YwIqpFySnPVrscndnknZ9RKlIryXCLwh4RCK9vK6Vw==
X-Cache:Hit from cloudfront
What am I doing wrong?
Was this under "Leverage browser caching" or a similar section of Page Tools?
If under 'Leverage Browser Caching', - this doesn't mean the files aren't being cached, but it means that the requested files aren't requesting end user browsers to cache them - for instance using the 'Cache-Control' or 'Expires' headers. CloudFront, unless configured otherwise, caches files from S3 -- so the absence of these headers doesn't affect Cloudfront's caching.
You can manually add these in S3 for the individual objects.
Some more info can be found in the CloudFront documentation
We are adding our custom website font via our CDN. Our CSS code is below. This is in our main.css file which is included in the header of our website.
This works in Safari and Chrome on OSX, but on Windows, it works only in Safari. And maybe IE10. On Firefox it simply doesn't work. And on IE9 etc it works sometimes. (What an irritating browser.)
Some websites suggest that Firefox wants a relative font URL. But we need to use a CDN for our font. How do Google fonts work in Firefox is there is a "same origin" issue?
Our main server is Nginx. The static font files are being served from there, so the Apache suggestion of Allow Origin "*" does not help us much. The CDN in this case is origin-pulled from our website and carries our own headers. So if we need to so send a header via Nginx, we can do that.
THE FONT CSS
#font-face{font-family:'Custom-Sans'
;src:url('http://cache.MYDOMAIN.com/Custom-Sans-light-webfont.eot')
;src:url('http://cache.MYDOMAIN.com/Custom-Sans-light-webfont.eot?#iefix') format('embedded-opentype'),url('http://cache.MYDOMAIN.com/Custom-Sans-light-webfont.woff') format('woff'),url('http://cache.MYDOMAIN.com/Custom-Sans-light-webfont.ttf') format('truetype');font-weight:200;font-style:normal}
#font-face{font-family:'Custom-Sans'
;src:url('http://cache.MYDOMAIN.com/Custom-Sans-thin-webfont.eot')
;src:url('http://cache.MYDOMAIN.com/Custom-Sans-thin-webfont.eot?#iefix') format('embedded-opentype'),url('http://cache.MYDOMAIN.com/Custom-Sans-thin-webfont.woff') format('woff'),url('http://cache.MYDOMAIN.com/Custom-Sans-thin-webfont.ttf') format('truetype');font-weight:100;font-style:normal}
#font-face{font-family:'Custom-Sans'
;src:url('http://cache.MYDOMAIN.com/Custom-Sans-regular-webfont.eot')
;src:url('http://cache.MYDOMAIN.com/Custom-Sans-regular-webfont.eot?#iefix') format('embedded-opentype'),url('http://cache.MYDOMAIN.com/Custom-Sans-regular-webfont.woff') format('woff'),url('http://cache.MYDOMAIN.com/Custom-Sans-regular-webfont.ttf') format('truetype');font-weight:normal;font-style:normal}
#font-face{font-family:'Custom-Sans'
;src:url('http://cache.MYDOMAIN.com/Custom-Sans-semibold-webfont.eot')
;src:url('http://cache.MYDOMAIN.com/Custom-Sans-semibold-webfont.eot?#iefix') format('embedded-opentype'),url('http://cache.MYDOMAIN.com/Custom-Sans-semibold-webfont.woff') format('woff'),url('http://cache.MYDOMAIN.com/Custom-Sans-semibold-webfont.ttf') format('truetype');font-weight:500;font-style:normal}
#font-face{font-family:'Custom-Sans'
;src:url('http://cache.MYDOMAIN.com/Custom-Sans-bold-webfont.eot')
;src:url('http://cache.MYDOMAIN.com/Custom-Sans-bold-webfont.eot?#iefix') format('embedded-opentype'),url('http://cache.MYDOMAIN.com/Custom-Sans-bold-webfont.woff') format('woff'),url('http://cache.MYDOMAIN.com/Custom-Sans-bold-webfont.ttf') format('truetype');font-weight:700;font-style:normal}
And --
THE HEADERS OF A FONT FILE (Served by Nginx)
HTTP/1.1 200 OK
Accept-Ranges: bytes
Access-Control-Allow-Origin: *.MYDOMAIN.com
Cache-Control: max-age=315360000
Content-Type: application/octet-stream
Date: Sun, 10 Aug 2014 15:10:29 GMT
Expires: Thu, 31 Dec 2037 23:55:55 GMT
Last-Modified: Mon, 28 Jul 2014 14:52:44 GMT
Server: Hosting Inc
Vary: Accept-Encoding
Content-Length: 20077
The access control header needs a scheme in addition to the domain:
Access-Control-Allow-Origin: http://*.mydomain.com
It also needs a port if you're using something other than 80.
I'm trying to improve the caching policy for a web site.
I'm implementing an aggressive caching strategy first, for resources that won't change at all, and would like files like jquery-min for example to be downloaded only once, and then be served from browser cache.
I used Apache Mod-Expire module to accomplish this, and it's working pretty well.
However, I'm surprised that when I completely remove my cache-control configuration, Firefox browser does not re-download jquery file : it already gets it from the cache, without any instruction from me. How is Firefox making this kind of decision ? Is it related to the ETag hash ?
Here are the headers I get without my configuration for that particular file :
Accept-Ranges bytes
Connection Keep-Alive
Content-Encoding gzip
Content-Length 27073
Content-Type application/javascript
Date Fri, 23 Aug 2013 09:48:06 GMT
Etag "225f8-13309-4e385823c7b80"
Keep-Alive timeout=15, max=99
Last-Modified Fri, 09 Aug 2013 15:34:22 GMT
Server Apache
Vary Accept-Encoding
Can anyone explain to me what is the browser behavior when there's no Cache-Control policy defined ? is it browser dependant ?
Thank you,
Mathieu.
This should be a old problem about IE8 download problem. I used PHP to set the response header like:
header("Pragma: public");
header("Expires: 0");
header("Content-type: application/octet-stream");
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
header("Content-Length: ".strlen($content));
header("Content-Disposition: attachment; filename='$filename'");
and the Connection is close capture by Fiddler.
When I try to download the file with above header in IE8 (not in SSL), the message box :
"Internet Explorer was not able to open this Internet site. The requested site is either unavailable or cannot be found." pop up and download is stopped.
I searched on net and try lots of solutions but seems none of them works. Would there be any other solution for this problem?
PS: I have tried: Delete response header/reset contentType in header/ Add the site into trusted site/ set "Do not save encrypted pages to disk" as true.
Thanks.
In addition to Le-roy's answer:
I set
Cache-Control: private, max-age=1
and that fixed the issue for me.
From Le-roy's link, if any of these are set:
Cache-Control header with the tokens no-cache, no-store
Vary header that specifies almost anything
Pragma header that specifies exactly no-cache
IE download will fail.
IE has problems with downloading files from HTTPS when no-cache is set in the header. Try this page http://blogs.msdn.com/b/ieinternals/archive/2009/10/02/internet-explorer-cannot-download-over-https-when-no-cache.aspx for more info.
I have an mvc website (not web application) and I am trying to enable client caching of pages. I added the following attribute to my action:
[OutputCache(Duration = 60, Location = OutputCacheLocation.Any, VaryByParam = "*")]
When I look at the response, however, I'm seeing the following:
(Status-Line) HTTP/1.1 200 OK
Cache-Control no-cache
Pragma no-cache
Content-Type text/html; charset=utf-8
Content-Encoding gzip
Expires -1
Date Sat, 23 Jul 2011 17:09:45 GMT
Content-Length 9253
Is client-side caching not supported with website projects? If it is, am I missing a configuration setting somewhere? I have tried adding the #outputcache directive instead of the action attribute, but no luck there either.