I would like to use the following base64 favicon and maybe some base64 images.
<link href="data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAEAAAAAAAAAAAAAAAEAAAAAAA..AMAK3WxwAOWT0AK4RgAKHOvQA4hWUAP4lqAD2MagBQm3kATKSBAECcdP//AAD8/wAA+H8AAPA/AADwPwAA4B8AAMAPAACABwAAAgMAAI8BAADfgAAA/8AAAP/AAAD/4QAA//MAAP//AAA=" rel="icon" type="image/x-icon" />
Will these get cached by my browser?
No. Data URIs are not separately cached from their containing documents (e.g. CSS or HTML files) so data is downloaded every time the containing documents are redownloaded.
Source
Caching your site's favicon is actually recommended as a Performance Best Practice for Speeding Up Your Web Site.
Google, for example, doesn't waste the extra precious bytes to include a favicon in the source code of its homepage (either using a <link /> or a Data URI).
Instead, they serve their favicon with a HTTP header set far into the future. Cache-Control: private, max-age=31536000 (31,536,000 seconds = 365 days).
If you're interested in controlling the "freshness" of your site's favicon, you can use Cache-Control and HTTP Headers — for example if you are planning on changing the favicon or don't want it to be cached, you can adjust it accordingly.
An example using Apache and mod_expires:
<IfModule mod_expires.c>
# Add Expires Header
# http://www.askapache.com/?p=152
ExpiresActive On
ExpiresByType image/x-icon "access plus 1 month"
</IfModule>
This module controls the setting of the Expires HTTP header and the max-age directive of the Cache-Control HTTP header in server responses. The expiration date can set to be relative to either the time the source file was last modified, or to the time of the client access.
Related
I have an old web site in French tha I want to preserve and whose html files were encoded in iso-8859-1. All html files included
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
in the <head> element, however the host of my website changed something in the configuration an now pages are sent from their server with an HTTP header including
content-type: text/html; charset=UTF-8
and unfortunately someone decided this would override the <meta> information.
Do I have to trans-code all my html files to UTF-8 or is there a faster solution?
Update
In fact the charset was added to the http header's content-type field only for html content issued by php, not for pure html files. I'll put the solution I adopted as an answer.
Your options:
Transcode the files
Persuade whomever changed the server configuration to change it again
Change servers
Run all every request through a server side script which outputs a different Content-Type header and then outputs the HTML (which accounting for cache-control headers)
Took me a while to realize the problem occurs only for .php files. The fix I chose is the following: I added the line
ini_set('default_charset', NULL);
at the beginning of every php files. A bit tedious but seems reasonable to me.
I need to disable caching for single files in all browsers.
I have a website that generates small video clips. There is a preview stage where the results can be watched.
An mp4 called preview.mp4 is displayed. When the user goes back, edits the video and wants to preview it again, the old preview.mp4 is being displayed even though the file on the server is changed.
How can I prevent the caching of this video file? Or what are the other ways to fix it?
Note: it's a single page application so I don't reload any HTML files. Only PHP content. Hence the headers I set, are not useful in this scenario:
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta http-equiv="cache-control" content="no-store" />
Thanks.
It's not the web page itself you should be concerned about, but the mp4 file which is downloaded and cached separately.
Ensure the response headers of the mp4 file prevent browser caching.
Cache-Control: no-cache
Hence the headers I set, are not useful in this scenario:
<meta http-equiv="cache-control" content="no-store" />
There problem here is that those are not headers.
They are HTML elements (which are part of the HTML document, which is the body of the HTTP response) which attempt to be equivalent to HTTP headers … and fail.
You need to set real HTTP headers, and you need to send them with the video file (rather than the HTML document).
The specifics of how you do that will depend on the HTTP server you use.
Further reading:
Caching in the HTTP specification
Caching Tutorial for Web Authors and Webmasters
Caching Guide in the Apache HTTPD manual
How to Modify the Cache-Control HTTP Header When You Use IIS
Try adding a cache key
preview.mp4?cachekey=randNum
Where randNum can be a timestamp or you use a random number generator to generate randNum.
I have a web development question.
Sometimes, if I place a new version of a webpage on a webserver, and I browse to this webpage, the new page is not shown. Instead the old page is shown, from the cached page from a previous browse to the webpage.
How can I get the new page to always be shown? Is there a tag of some sort that I can use for this?
There are some tags you can use
See http://www.i18nguy.com/markup/metatags.html
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="0">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
There are similar HTTP headers that the web server can set as well.
Yes, you can specify no caching and how long to cache individual files in .htaccess if you are using Apache. Typically you would disable caching on dynamic content and set caching limits to the usual update rate of images and static html. On my site I regenerate the static html every day so have set caching to 24 hours on .html and disabled caching on PHP scripts (these limits are specified in seconds - 1 day = 86,400 seconds):
# Set up caching on media files for 1 week
<FilesMatch "\.(gif|jpg|jpeg|png|js|css)$">
ExpiresDefault A604800
Header append Cache-Control "public"
</FilesMatch>
# Set up 1 Day caching on site generated files
<FilesMatch "\.(xml|txt|html)$">
ExpiresDefault A86400
Header append Cache-Control "proxy-revalidate"
</FilesMatch>
# Force no caching for dynamic php
<FilesMatch "\.php$">
ExpiresActive Off
Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
Header set Pragma "no-cache"
</FilesMatch>
If you are just having problems testing changes to your html files, remember that you can usually force a browser to reload the page regardless of cache settings - [Ctrl][F5] under Windows.
I think the server still haven't update the site. Just wait and see if it updates.
I have a webpage index.html hosted on a particular server. I have pointed example.com to example.com/index.html. So when I make changes in index.html and save it, and then try to open example.com, the changes are not reflected. Reason that the webpages are being cached.
Then I manually refresh the page and since it loads the fresh copies and not from cache, it works fine. But I cannot ask my client to do so, and they want everything to be perfect. So my question is that is there a trick or technique as to how I can make the file load every time from the server and not from cache?
P.S: I know the trick for CSS, JS and images files, i.e. appending ?v=1 but don't know how to do it for index.html.
Any help would be appreciated. Thanks!
by this:
<meta http-equiv="expires" content="0">
Setting the content to "0" tells the browsers to always load the page from the web server.
The meta tags didn't worked for me so. i set the headers from the java class that implements filter or controller. and it worked. here is the code
HttpServletResponse httpResponse = (HttpServletResponse) response;
httpResponse.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1
httpResponse.setHeader("Pragma", "no-cache"); // HTTP 1.0
httpResponse.setDateHeader("Expires", 0); // Proxies.
There are only two most reliable way available as of 2018
1) **<meta http-equiv="expires" content="0">** Use this meta tag but be careful because this tag destroy the all cache of the page as soon as a web page processed by browser.
2) Generate an unique ID at server for each page request and append this id at the end of the all file name inside the HTML document with ? before the unique id append on images, documents, css/js files, videos etc which need to be load from the server every time. For example if you have the HTML tag like <img src="images/profile223.jpg" alt="profile picture"> then on server side append the unique id at the end of the file name like this echo '<img src="images/profile223.jpg?'.$uniqueid.'"" alt="profile picture">'; . In this example i use php but you can generate the unique ID on any language. All big companies like Google, Facebook, Microsoft, Twitter etc. uses this technique because it is most effective way and does not effect the cache data you want to store on user browser like login session id. This technique is cross browser compatible and support older version of IE, Firefox, Chrome, Safari and Opera. You may append the unique id at the end of the url using the same technique
You can try this below method. It worked for me.
Please add the below lines of code in your .htaccess file.
<IfModule mod_headers.c>
<FilesMatch "\.(html|php)$">
Header set Cache-Control "no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires 0
</FilesMatch>
<FilesMatch "\.(ico|pdf|jpg|png|gif|js|css)$">
Header set Cache-Control "max-age=172800, public, must-revalidate"
</FilesMatch>
</IfModule>
If you use the above code, browser will not cache .html files.
Adding this meta tags to the header works for most of the browsers (in that case index.html will not be cached):
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
A bit late but it might help someone else!
You can send extra headers with the file to tell the client (the browser, that is) that the file must not be cached. If you got Apache, take a look at mod_expires. If you use a server side scripting language, like PHP, you can solve it using that too.
i ever meet this problem with my website. in your URL add the q=''
http://yoururl.com/somelinks?q=fill_with_random_number
for me, it works
I highly recommend not using meta tags and use htaccess as Murali Krishna Bellamkonda posted. That will always be the best and most secure dependable way. You can fine tune your whole system to stay cached for long times, refresh files at specific times, etc...
Go ahead and try all them meta tags at once, and see what happens! (no I wouldnt)
Look into Header set Cache-Control "max-age=5, immutable" with ExpiresDefault A5 for a no cache option.
How do I define
<meta http-equiv="cache-control" content="no-cache" />
in HTML5? It is no longer valid according to the W3C Validator and the documentation.
Putting caching instructions into meta tags is not a good idea, because although browsers may read them, proxies won't. For that reason, they are invalid and you should send caching instructions as real HTTP headers.
In the beginning of code you need to use this:
<!DOCTYPE html>
<html manifest="cache.manifest">
...
Then create cache.manifest file with content of what you want to cache i.e
CACHE MANIFEST
# 2010-06-18:v2
# Explicitly cached 'master entries'.
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js
# Resources that require the user to be online.
NETWORK:
*
# static.html will be served if main.py is inaccessible
# offline.jpg will be served in place of all images in images/large/
# offline.html will be served in place of all other .html files
FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg
A manifest can have three distinct sections: CACHE, NETWORK, and FALLBACK.
CACHE:
This is the default section for entries. Files listed under this header (or immediately after the CACHE MANIFEST) will be explicitly cached after they're downloaded for the first time.
NETWORK:
Files listed in this section may come from the network if they aren't in the cache, otherwise the network isn't used, even if the user is online. You can white-list specific URLs here, or simply "", which allows all URLs. Most sites need "".
FALLBACK:
An optional section specifying fallback pages if a resource is inaccessible. The first URI is the resource, the second is the fallback used if the network request fails or errors. Both URIs must from the same origin as the manifest file. You can capture specific URLs but also URL prefixes. "images/large/" will capture failures from URLs such as "images/large/whatever/img.jpg".
There is no HTML solution. Mozilla's application cache (cache.manifest) is deprecated. The application cache site says:
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible. ... Use Service Workers instead.
Apart from that, I suggest you use HTTP Cache-Control to solve cache issues.
There isn't an HTML solution, because it's not a markup problem. Caching is an action on the resource, not part of the resource definition itself.
As others have said, HTTP headers are the best way to control caches, because these are observed by all caches - <meta> tags are only observed by browser caches. These should be set by your server / web framework.
That said, I wouldn't be surprised if browsers still observe <meta http-equiv="cache-control" content="no-cache"> for pages with the HTML5 doctype.