I run a website for a small company. The websites mostly contains text and images. Whenever i update the website by replacing a image or updating the css, it doesn't get updated on other people's browsers because it's been cached. I've found a way to get around this by adding a version number where i'm linking my stylesheet, however, this doesn't apply to images. What is the most simple way to get around this?
I've done a lot of research on the web and on stackoverflow, but they are all complicated solutions. There must be a better way.
Just to be clear, i know i can clear the cache in my browser. I'm looking for a solution that works for everyone who access my website.
You can add these meta tags and it will force a page to reload from the server on every reload. However, you should realize that this could result in a lot more data usage for both you and your users.
<meta http-equiv=“Pragma” content=”no-cache”>
<meta http-equiv=“Expires” content=”-1″>
<meta http-equiv=“CACHE-CONTROL” content=”NO-CACHE”>
If you have a reload link or button on your html page, you can add this attribute to it to force a reload from the server. The 'true' parameter is what forces a full reload instead of a cache reload.
onClick="location.reload(true);"
You can rename your images (preferably) automatically when you want to avoid them being cached, adding a version number to their name. If you have something which does this automatically, then you bypass the problem of caching them.
If you want to keep the name of your images, then you can make the change only temporary.
Try versioning(?version) to the files to avoid browser caching.
it will be like filename.jpg?v1 filename.jpg?v2
Or if you are replacing files frequently try adding current timestamp for every page load
In php,
filename.jpg?<?= time()?>"
where time() is current timestamp
This means you are just changing the urls everytime.
Related
Whenever I make a change on my website I have to clear the cache of my browser so I can see said change. Is there a way to automatize this process? I have seen some similar posts here (suggesting using the cache-control meta tag) but all of them are from years ago, and I would love to get some updated answers. Also, I'm not sure if using those meta tags (eg. ) is the right way, as I've seen some people discouraging their usage.
You can add ?xxx to the css and js filenames and browsers will reload them whenever xxx changes. You won't need to rename your source files.
i.e.
<link rel="stylesheet" href="/animations.css?12345678"></link>
You may have seen content managers do this, with random strings generated on each session to force a reload on first load, and then cache for the remainder of the session.
If this is regarding .css and .js changes, one way is by appending something like "_versionNum" to the file name for each release. For example:
script.css // This is the URL for release 1.0
script_1.1.css // This is the URL for newest release [1.1]
You should also refer to this link for more information.
My page references a lot of PDF's. If the user loses connection to the Internet or their network, which unfortunately seems to happen quite a bit for our users in the middle of nowhere, I would still like them to be able to access the PDF's.
Using the Application Cache mostly works, except that it also caches the current page itself, and I can't figure out how to get it not to do that. The page itself changes frequently so I don't want it to cache. I know I can find out if it has changed, but that just means I have to refresh the page after they're already using it, which is not ideal.
So is there any way to NOT have the current page cache, but have everything else in my manifest file be cached?
I tried several different things without success. I added an iframe, which did seem to cache the PDFs, but when I went offline my current page did not access them from the cache (because the browser didn't know to grab it from the cache I would guess, I just know it didn't work). I also tried adding the current page to the NETWORK section of the manifest, so it wouldn't be cached, but it didn't work (it was still cached).
Am I missing something? Is there a better alternative for what I want?
It works without the "download" attribute on the anchor tag.
If anyone else has the same problem, the iframe solution does work (where you add a hidden iframe to the page, and the iframe is pointed to a page that has a manifest file for everything you need). It just doesn't work if you have a download attribute on your anchor tag.
That's about 3 hours I'll never get back...
so, i was checking some web page source code and I've noticed this at the end of some CSS links and images :
?asset_version=
and also this ?v=
What is their role ?? sorry for the English.
Thanks
This tends to be a solid way to force browsers to fetch a new version of a file if you modify it. Often, browsers will not respect the cache-control header specified, or you may not have the option to configure that (for example, a limited shared hosting environment). In that case you simply modify the URL by incrementing a version number, which convinces the browser it's a new version, even though it will likely return the same file.
as far as the browser is concerned, resources/css/application.css?v=1 and resources/css/application.css?v=2 are different files, even if the css file itself is totally unaware and uncaring of the trailing query parameters.
They are used for cache busting. Most web severs will tell a browser to hold onto various resources like image, css and javascript files so that on the users next visit they do not have to be downloaded. By appending a version control value they can force the browser to download the newer versions, otherwise the browser might not download the newer files because it still has a version that's within the time frame it was told to hold onto the same file for the domain.
The process might go a little something like this:
Hold onto my CSS file for 180 days, <link href="path/to/css/style.css">.
30 days later I update my CSS file. Browser will want to use the one you already gave it as it's valid for another 150 days. But you want it to use the newer version so you use a cache busting technique. So you might do this <link href="path/to/css/style.css?v=09252015">.
The browser uses the complete path to identify resources from a domain. Changing the query string value effectively makes the browser think it's a different file.
You will also come across people cache busting in the actual file name also.
<link href="path/to/css/style-09252015.css">
I have a site which has 10mb+ of images (1000+ pngs) that have to be loaded before it starts. My current approach is loading every image in a hidden tag. How can I ensure that a client that accesses the site once/month, for example, will never have to download it all again?
No way. Client may have cache disabled, or he clears it every single minute
Compressed textures/generated textures/reused textures are how you should do it. You can't cache 10mb of images for a month reliably. If you need it for the game, then simply have a loading bar beforehand.
It sounds like you want to use an application cache. This means dealing with the page and its images as an application, with a cache manifest (.appcache file) listing them and the HTML document containing an <html manifest="..."> tag. See e.g. A Beginner's Guide to Using the Application Cache.
I have the following problem.
We have a site. I changed some sprites to make it look cooler. The thing is that we already have users and there is a big chance that their browser have the old images cached. Is there anyway to force a new request to images from them?
Note: On firefox (default settings) after some refreshes the new sprites are requested but seems like chrome (default settings) just doesn't request them unless you explicitly clear cache.
Another Note: One way would be to rename the sprites but this also means that we have to find them in css files and rename there also, etc. etc. etc.
Have a great day and ty for help.
One solution would be to add a random number onto the end of the image name e.g.
.mybackground {
background-image:url(../images/background.jpg?16549);
}
If you could make the number random every time the page is loaded via some JS or PHP or whatever that would work for you. YOu could maybe take the images out of your stylesheet and place then in a style tag in your header include or whatever so that you can do the random number bit to them. (Not sure if you could do directly into the stylesheet)
Renaming sounds more feasible. You can most likely automate it with (shell)scripts so it shouldn't be a too bad.
(Most IDE have a feature to find and replace in multiple files, you can use it to change the path to the sprite in the CSS files. Your best bet, is to give a new name for the new image for now.
As for later on, I suggest looking at your caching and expires headers of your web sever. (These are links to the Apache documentation, if your web server isn't apache, it would be same idea, but requires different implementation.)