I want to leverage browser caching for only some files, not all,
because my CSS and JS change very frequently. So I just want to cache some files only.
Related
On the, The Net Ninja Youtube channel I see the Ninja has disabled cache in his Laravel 6 tutorial. Just curious what's the benefit over enabling when coding?
So that changes made to resources loaded into the page, such as images, stylesheets, and scripts are always refreshed and reloaded when the page itself is reloaded (so you don't need to remember to press Shift+F5 or Ctrl+Shift+R).
When caching is enabled the browser may prefer its cached versions which may be stale instead of always using the latest-built assets.
However disabling caching is unnecessary if you use a content-addressing scheme for off-page resources (i.e. the URI of a script file or stylesheet includes its content hash (SHA-256, etc)).
Would like to inquire if there is any method to Enabling caching for certain files/folder in ASP.Net MVC3
The target files are some CSS and Jquery js files which are likely not to change for a long period.
Kind regards,
Configure the HTTP Expires Response Headers from IIS, it is very simple, just check Expire Web content
http://technet.microsoft.com/en-us/library/cc770661(v=ws.10).aspx
And yes, use bundling! It will generate unique hash, scripts and styles will be recached when any file changes in the bundle.
I am creating a mobile singlepage web app using jquery mobile. The webapp includes a number of javascript files and a number of css files. I have written a deploy script that concatenates and minifies js and css files, and now I am wondering whether I should inline the concatenated js and css directly in the HTML file - please note that I am talking about a singlepage app here (I know that this would be a bad idea in a traditional web 1.0 app with dynamically generated HTML). I am also using appcache/manifest file to cache the singlepage app so that subsequent access to the web app will be served from the cache, so it is the initial load time that is my primary concern.
When I inline everything (jquery, jquery mobile etc.), my 7kb HTML file increases to 350kb (100kb zipped) but now everything can be loaded in a single request.
But am I missing some other benefits such as parallel downloading of js files - and would it therefore be better to not inline the css and js, but instead just concatenate all js and css to a single js file and a single css file and then fetch each of them in separate requests?
Are there any limits regarding file size that I should be aware of? Maybe caching in network routers works better with smaller file sizes or whatever?
So my question boils down to whether it is a good idea to inline everything when making singlepage mobile web apps?
The answer to how much should be concatenated and how much should be inlined varies depending on a number of conditions. The final answer is you should do A/B testing and find what works best for you. From what you describe I recommend you definitely NOT inline 350K of CSS & JS. If you do this then any change to the HTML or JS or CSS requires downloading the entire payload. Instead, compartmentalize those changes and forced updates by keeping HTML, JS, & CSS as separate requests. You could do dynamic | inlining to make the first response fast but leverage (app or localStorage) cache for subsequent requests, but that's going to get complicated when coupled with app cache (because the HTML doc is saved to app cache). Otherwise, just keep them separate, save each resource to app cache, and update individual resources as needed.
I would not recommend inlining everything into the html if your webapp could be accessed from different urls with different querystring.
Example :
http://webapp.com/?fb_token=fdsf
http://webapp.com/?referer=bla
http://webapp.com/?tracker=toto
Each of those will add a master copy in the appcache (you can veryfy it by looking at chrome://appcache-internals/ in chrome). You then risk to reach the quota limit for appcache in term of cache. Furthermore on appcache update, the browser goes through its appcache entry list and ask a fresh copy of it.
A good compromise that i am following for mobile device & appcache , is to keep the html tiny and then have one big css (containing base 64 inlined images) and one js file.
FYI, there is currently a quota limit on the size on the sum of all your listed resources in appcache in the order from 5MB to 25MB (25 being the new iOS6 limit)
-seb
Now that I've successfully cached my web page, how do I uncache it after making a change?
My user can't dl the latest version, even after I've changed a comment in my cache.manifest file.
My server is an IIS server.
The thing with caching is, well, stuff gets cached. Browsers won't, in general, try to download anything you've told them to cache until the cached items expire.
If you set everything to cache for a certain time span, the browser won't try to download any of the cached items until the end of it, which includes the cache.manifest file itself, by the sound of it.
Typically, you don't want to cache the content of the website, because then that makes it hard to change. Instead, you want to cache the various pieces, like images, css, and javascript, that the various pages of your site need. If you do this right, you can get a huge benefit for your users, and still have control over those resources, since you can always link to a different version of a particular resource in the content of the pages.
That said, if you do need to cache some portions of your pages, you can use server-side caching to reuse portions that are expensive to put together.
I have a website which is displayed to visitors via a kiosk. People can interact with it. However, since the website is not locally hosted, and uses an internet connection - the page loads are slow.
I would like to implement some kind of lazy caching mechanism such that as and when people browse the pages - the pages and the resources referenced by the pages get cached, so that subsequent loads of the same page are instant.
I considered using HTML5 offline caching - but it requires me to specify all the resources in the manifest file, and this is not feasible for me, as the website is pretty large.
Is there any other way to implement this? Perhaps using HTTP caching headers? I would also need some way to invalidate the cache at some point to "push" the new changes to the browser...
The usual approach to handling problems like this is with HTTP caching headers, combined with smart construction of URLs for resources referenced by your pages.
The general idea is this: every resource loaded by your page (images, scripts, CSS files, etc.) should have a unique, versioned URL. For example, instead of loading /images/button.png, you'd load /images/button_v123.png and when you change that file its URL changes to /images/button_v124.png. Typically this is handled by URL rewriting over static file URLs, so that, for example, the web server knows that /images/button_v124.png should really load the /images/button.png file from the web server's file system. Creating the version numbers can be done by appending a build number, using a CRC of file contents, or many other ways.
Then you need to make sure that, wherever URLs are constructed in the parent page, they refer to the versioned URL. This obviously requires dynamic code used to construct all URLs, which can be accomplished either by adjusting the code used to generate your pages or by server-wide plugins which affect all text/html requests.
Then, you then set the Expires header for all resource requests (images, scripts, CSS files, etc.) to a date far in the future (e.g. 10 years from now). This effectively caches them forever. This means that all requests loaded by each of your pages will be always be fetched from cache; cache invalidation never happens, which is OK because when the underlying resource changes, the parent page will use a new URL to find it.
Finally, you need to figure out how you want to cache your "parent" pages. How you do this is a judgement call. You can use ETag/If-None-Match HTTP headers to check for a new version of the page every time, which will very quickly load the page from cache if the server reports that it hasn't changed. Or you can use Expires (and/or Max-Age) to reload the parent page from cache for a given period of time before checking the server.
If you want to do something even more sophisticated, you can always put a custom proxy server on the kiosk-- in that case you'd have total, centralized control over how caching is done.