Do css background images not get cached by default? - css

While tuning my web app, I noticed that certain of my images are never loading from cache, even though they're completely static:
This particular file always loads from the server, but it should be cached. The only thing somewhat special about the file, AFAICT, is that it's sourced via a CSS class, which specifies the file via a background-image style. I'm not specifying any tricky headers or anything; it's just a regular jpg file.
There's a lot online about preventing caching, but I can't find anything about making it work when it doesn't seem to be.

Do you have caching software on your web server? If yes is it enabled? Since some can be disabled such as UnixyVarnish what is mainly found in cPanel. Images do get cached by default. Regardless of how its displayed. And your browser should automatically cache websites you visit, unless you have disabled it.

Related

My Cloudflare site is taking hours to load CSS

I created a domain on CloudFlare, a website with HTML and CSS, hosted my bucket with those files on S3, and integrated terraform for deployments. When I kick off terraform apply and run the aws cli command to update the S3 bucket, formatting changes like text show immediately but my CSS changes like font sizes and colors take several hours to be visible. How can I make both types of changes visible quickly?
I tried hard reloading my browser, clearing cache, and setting auto minify on cloudflare. I haven't tried gzipping my css and min.css files, a little afraid I might break something. I'm unfamiliar with front end development. Suggestions?
For a proxied ("orange clouded") DNS record, Cloudflare applies a default caching behaviour. This includes default cached file extensions such as CSS files. The default behaviour, caching and extensions cached are documented here.
When you do a release on your origin (S3 bucket), you could purge the cache so that the old cached versions are discarded and new ones will be pulled and cached. You can also override the cache behaviour by using Page Rules. By the way, Page Rules (and other Cloudflare settings) are also manageable via Terraform.

ASP MVC. Some users get old scripts, despite that we use bundles

We have an ASP MVC 5 applications. We use bundles with optimization enabled by default. But we have heard several times from users, that they get errors, that we think are caused by old versions of user scripts. Their browsers somehow take scripts from cache, despite the fact, that we have edited that script files and bundles should be updated. The worst part of the problem is that we can't imitate or recreate this problem. We don't know how. We already have tried to make test-changes to scripts like adding some "console.log('test')" lines in order to see, if the browser takes the cached version, but everything was ok, the hash in the end of <script src="....?v='hash'"> changed and the browser took the newest version from first time. I should mention, that our site is a single page application. Don't know, maybe its somehow related with the problem.
Have you faced this kind of problem?
There's not enough information here to give a definitive answer. The bundler detects changes in files and will regenerate the bundle along with the link to that bundle, which will include an updated query string param. Since the query string is part of the URI, it's considered a totally different resource at this point, and the browser should fetch it again, because there is technically no cache available. The only logical reason this would not occur is if the HTML with the link to the bundle is not being updated. This can happen if you're using OutputCache or otherwise caching the HTML document. It can also happen if the client's browser is aggressively caching the HTML document. Unfortunately, there's not much you can do about that, as the client browser ultimately has control over what is or is not cached and for how long.
That said, given that this is a single page app, it's very possible that it's also including a cache manifest. This manifest will very often include the HTML file itself, and the browser will not refetch any file in the manifest unless the manifest itself is updated.

Cached CSS loading error

Hey I'm working on a site that loads CSS and images that are generated server-side. Some times the images and CSS that is loaded in shows up as the incorrect template but with the correct images.
Since this template is created on the server and not on the actual page I was thinking that the web server that hosts the actual page may have a cached version of that page and may sometimes ignore the CSS and images that are generated from the main server.
In short:
Do webservers sometimes keep cached versions of page Styling?
I there an easy way to make it get the live version always?
Also this happens very infrequently and at random. It seems very hard to replicate. But I have seen it happen a few times.
Any other Ideas?
For the first answer, yes they do but only if setup that way. There is the CDN or varnish. These system are used for website with huge loads where content must be cached locally or on other server, allowing the user to visualize the cached content and not the one generated by the webserver at the moment the user requested.
Exclude this for your case then ;)
I always use chrome or firebug on firefox to debug a website.
Press F12 while in the page you want to check and, on chrome, go to "Network" tab and pin "Disable Cache".
This is incredibly handy if you refresh your page quite often and want the content not cached.
For the question itself, I don't think I/we can help you without seeing the code. But try my suggestion with F12 before.
There are two kinds of caches to think about. One of them is server cache. If you use server cache, then whenever CSS was modified, you need to empty the CSS cache if you have such a cache. If not, then you need to empty the cache, which might be painful.
As about browser cache, if you add a new parameter to your css file, then it will be loaded even if it was cached in the browser of a given user, therefore it is recommendable to add a parameter to your css file where you include it. This parameter should be either a version or a timestamp, or something uniquelly distinguishable from earlier versions. That value should be stored and you need to refresh (preferably) automatically whenever the CSS changes. The exact steps are up to you, since they differ greatly in different environments.

CSS not refreshing - now deleted, not cached, inexistent - and still loading? How? Why?

I'm working on a Wordpress website and I have styles loaded from two stylesheets - original style.css and style-custom.css for additional style.
Unfortunately whatever I do, the styles do not refresh. I already tried to press Shift+F5 without success.
I've purged the server and browser cache entirely several times (even though it's actually permanently turned off via WP Engine). I've removed appended ?ver numbers to force the update of the file content.
Right now I've even deleted the file and it is still loading in the browser! Even worse - it's loading in all browsers that I have not even ever used on the damn site.
I don't know what else to do. The file is gone and the cache has been purged.
There is definitely some sort of caching mechanism still. Are you developing on your own server? If you try to refresh on somebody else's computer are they able to see the file?
If yes - then you need to contact the servers' administrator, or you hosting provider with clarification.
You should be developing your websites locally though, and once they are ready publish them on the web.

Adobe Flex; how to cache main application

Does Adobe Flex support caching of the main application; i.e. if the user had previously loaded it and it hasn't been modified since last loaded, can the browser get the swf file etc. from it's cache? I'm on an embedded system with boa as the web server, so can modify any behavior there as needed.
Thanks,
Fred
Not sure if the actually is an answer to your question, but I can tell you that the browsers will cache the swf files as long as it is referenced the same way within your html.
Ie. we use src="myApp.swf?dummy=102032" when referencing to it to avoid caching. You can use httpfox or any other networking monitor tool to see when your swf is cached.
The browser does the caching automatically just like any other file you view through it. As long as the user has a cache setup in the browser, there shouldn't be a problem unless the URL to the file changes (that includes query strings).
There is also RSL caching, if you are using RSLs. By default, they are just in your output folder as SWFs, but you can use the Adobe signed RSLs which are of the SWZ extension, are hosted on the Adobe site, and are cached at the Flash Player level, not the browser. This means that even if a user has caching disabled in the browser, it will cache the RSL either way.

Resources