I'd like to speed up the initial loading of a site. It requests several API endpoints during inital render. I want to add <link rel="preload" /> for a few of these requests to make them start loading earlier. However these API responses are not cacheable by the browser. So the question is: How the browser behaves in such case? Will it fetch the content again regardless of the preload due to the no-cache headers or it's smart enough to relize that I need exactly that preloaded content?
So it turns out it's respecting no-cache headers as expected. I cannot preload such using <link rel="preload">. The solution is to add a few second TTL.
I'm using Symfony2 and the liip/imagine-bundle however the images are not displayed on IE11 and just shows a X placeholder, other browsers are fine. Has anyone encountered this?
UPDATE
It seems that IE11 fails to get the content-type of a the image source. Basically I'm using an image source without the extension Ex. <img src="/myimage" /> this is fine with other browsers however for IE11 it doesn't seem to recognise the file type.
So what I did was to remove the no-sniff directive
<IfModule mod_headers.c>
#Header set X-Content-Type-Options: nosniff
</IfModule>
It seems that IE11 fails to get the correct content type of the image when no-sniff is turned on.
How can i prevent input caching on web page side? Firefox cache the disabled property and buttons not work after reload. Why he doing this? it's madness!
autocomplete="off" - not work.
Cache-Control: no-store - will denied all page cache, but i need to denied only input cache.
I'm hosting a static website in S3 and using Cloudfront to cache files. I've essentially got 3 files with the following headers:
index.html (Cache-Control: no-cache)
app.js (Cache-Control: max-age=63072000, public)
style.css (Cache-Control: max-age=63072000, public)
My html file uses query string parameters that get updated every time I update my css or js files. I've configured s3 to pass these parameters through and I've verified that it works to invalidate cached resources. My index.html file looks something like this:
<html>
<head>
...
<link rel="stylesheet" href="app.css?v=14113e2c764">
</head>
<body>
...
<script src="app.js?v=14113e2c764"></script>
</body>
</html>
It seems to work great as I push updates all day, but when I come in the next morning and push my next change, The index.html file is out of date. Instead of having the correct ?v= parameter, it has the old one! The only way to fix it is to invalidate the html file manually. Then everything works for the rest of the day. The next day I have the same problem again.
What's going on here?
Verify that the CloudFront distribution's Minimum TTL is set to 0. If it's set to any other value, CloudFront won't respect the no-cache header and will still cache the file for the Minimum TTL. More details about the caching directives can be found here:
http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Expiration.html
If this doesn't help, try to debug the actual HTTP request for index.html and post the response headers here so we can have a look at them.
Also, instead of using no-cache for the index.html file, you can try using
public, must-revalidate, proxy-revalidate, max-age=0
This will allow CloudFront to store the file on the edge location, but it will force it to revalidate it with the origin with each request. If the file hasn't changed, CloudFront will not need to transfer the file's entire content from the origin. This can speed up the response time, especially for larger files.
This is more of a comment, but a bit too long. Hopefully helps others that land here.
Cache busting via query parameter has drawbacks, although perhaps you can combat them all via Cloudfront behaviors. See https://stackoverflow.com/a/24166106/630614. Still, I would recommend unique filenames e.g. app.css?v=14113e2c764 becomes app.14113e2c764.css.
To respond to BradLaney's comment/issue: If you've updated cache-control headers and don't see the changes, it's because the origin item is already cached – invalidate it and you should see the new headers the next time you view the resource.
Regarding race condition when setting cache-control for S3 items, or just setting cache-control in general for an SPA, this is what's working well for my team:
# Sync all files with 1 week cache-control, excluding .html files.
aws s3 sync --cache-control 'max-age=604800' --exclude *.html dist/ s3://$AWS_BUCKET/
# Sync remaining .html files with no cache.
aws s3 sync --cache-control 'no-cache' dist/ s3://$AWS_BUCKET/
So I've been fiddling around with this for quite a bit now and don't seem to be anywhere near the answer to my problem.
For some reason IE does not cache the static content of my website (img/js) yet Chrome does.
Looking at the headers I found the both the pragma tag, as well as the Cache-control have a no-cache set but I do not know where this thing comes from. No-where in the application the no-cache is ever set.
I am using IIS 7.5 and Oracle WebGate as authenticator.
On our IIS itself, I have set the settings to cache the content and live for 36 hours.
Also in the web.config the following tag is present in the image folder:
<configuration>
<system.webServer>
<staticContent>
<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00" />
</staticContent>
</system.webServer>
Furthermore, I also have a tag in my web.config of my front-end
<caching>
<cache disableExpiration="false" />
</caching>
I read on some forums that removing this would help but alas, it doesn't.
I also looked for add extension because that also seemed to be causing issues according to someone else but I never set something like that.
Has anybody got any idea what this could be causing?
By default Oracle Web Gate uses by default cache control no-cache and pragma no-cache.
see the doc here : http://docs.oracle.com/cd/E22203_01/doc.31/e20664/chapter_12.htm
at the bottom of the page