I've come across this scenario multiple times with the current app that I'm working on.
I have a large chunk of new CSS I would like to implement into a page. I have two options:
Add CSS to existing CSS bundle (minified CSS from ASP.NETs bundle utility), thus invalidating cache for that bundle
Create a new bundle and include it in the page (in the body), thus causing a new http request
Which would you choose? #1 invalidates the cache, but prevents a new http request. #2 creates a new http request but leverages cache for the other CSS bundle.
Depends on what kind of new CSS you're adding but generally speaking I'd go with scenario #2. I like to use a CDN for the framework CSS file, and then use my domain to host the website theme CSS and a page-specific CSS file. Make use of parallel downloads.
<!-- 1 http request to CDN for main framework, gets cached -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css"/>
<!-- 1 http request to mydomain.com for main theme, gets cached -->
<link rel="stylesheet" href="http://domain.com/css/themes/modern.min.css"/>
<!-- 1 http request to mydomain.com for page-specific styles -->
<link rel="stylesheet" href="http://domain.com/css/pages/product-detail.css"/>
Depends upon the transmission rate.
In general it is much better to include the CSS in the <head> rather than a separate file.
When the CSS is in the head the Browser has all the CSS before it get the HTML. This way the Browser can start rendering the page even before the base HTML <body> has completed loading.
If the transmission rate is too slow and it takes a long time for the CSS to get to the Browser then a separate file may be called for.
If the CSS transmission time is greater than the HTTP request connect time, is when to start looking at a separate CSS file.
Using a CDN will add another DNS lookup if it is not already in use for other content.
Also be sure gzip is turned on.
#1 does not invalidate the cache if the HTML page is cached.
Cache does not do anything for a first time visitor, and a first time visitor may never be a visitor at all if the page takes to long to load.
Related
I'm generating dynamic CSS URLs for cache-busting. I.e. they're in the format styles-thisisthecontenthash123.css.
I also want to use HTTP Link headers to load the files slightly faster. I.e. have the header Link: <styles-thisisthecontenthash123.css>; rel=stylesheet
I'm pretty sure it's possible to do this in Fastly using VCL, but I'm not familiar enough with the ecosystem to figure it out. The CSS URL is in index.html, which is cached. I'm thinking I can open index.html and maybe use regex to parse out the CSS URL. How would I do this?
If I'm understanding your question correctly, you want to include a link header for all requests for index.html. You can do that with Fastly, but if the URL for the CSS file is changing you're not going to be able to pull that info out with VCL (you can't inspect the response body).
You could use edge dictionaries and whenever your CSS filename changes, update the reference via the API.
Thing is, if you're going to make an API call whenever the file changes, might as well just keep the filename consistent (styles.css) and whenever you publish a new version send a cache invalidation (purge). Fastly will clear the cache in ~150ms, so you then all you have to do is add the header which is can be done in the Fastly web portal with a condition.
So I'm having this really weird bug with my new server where the CSS won't update in the browser. Refreshing and clearing the cache doesn't work. I then opened up FileZilla to see if the updated CSS file is actually being uploaded to server using FTP, which it is, and then when I drag a copy of the css file to my desktop, the css file magically updates. The PHP file updates just fine.
Here's how I include the css: <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
I have no idea what is happening and how to fix this so any help would be greatly appreciated!
You could have any number of issues, but I'd like to point out a cool tip when using Chrome.
On your page, with the developer tools open if you press and hold the reload button you get a great option to clear the cache and hard reload!
This is very handy to make sure you have the "freshest" copy while developing.
Update:
As for your scenario (after reading updates) it sounds like an HTTP header issue with your CSS file.
Check what HTTP headers are being sent with your CSS file response. If you are not specifying a cache header it will likely try to cache for you. Set an expires header (in the past) when in development, but far in the future when in production. In the Network tab of your developer tools (most browsers) you should be able to see these headers, or you can use a too like Fiddler that will let you deeply inspect your network traffic.
Alternatively if you can't easily tweak the HTTP Headers, then set a far expires header, but ensure the path to the file changes whenever you make a code change. Options include:
adding a time() stamp (always changes (yeah!) but doesn't cache (boo))
add the version control # to the file URL (works great, but you need to manage the updates properly within your tooling)
something fancier that creates a generated "fake" path to the file that auto changes on any modification to the file... but also loads the URL as expected, and sets the cache to "forever" (max 365 days according to the HTTP specs)
You may try queries to force the browser to load fresh CSS when it loads. To do this
<link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1">
If you are comfortable with php you may try below code to force the browser to load most updated CSS to load. To do this
<link rel="stylesheet" type="text/css" href="http://example.com/style.css?d=<?php echo time(); ?>" />
This will ensure browsers always load fresh CSS with last modified time stamp.
Hope this help you.
Well, I'm trying to make custom app_offline.htm and want to add links to my css files in project. But next code doesn't work
<link href="/Content/Themes/screen.css" rel="stylesheet" type="text/css" />
In console I've got error
GET mySite/Content/Themes/screen.css 503 (Service Unavailable)
Please, give me advise how to make a link to css file in app_ofline.htm. Any help will greatly appriciated!
The idea of the app_offline.htm is that it indicates that the app is, well, offline. So, no resources are available from the site when the site is offline. Either put the relevant rules into the page or host the stylesheet on a separate domain.
You have to use inline css style for this instead of referring to external CSS file.
<style type="text/css">
/* write your css code here */
</style>
App_Offline.htm
Basically, if you place a file with this name in the root of a web application directory, ASP.NET will shut-down the application, unload the application domain from the server, and stop processing any new incoming requests for that application. ASP.NET will also then respond to all requests for dynamic pages in the application by sending back the content of the app_offline.htm file (for example: you might want to have a “site under construction” or “down for maintenance” message).
You can add it as base64 in the img tag... like this:
<img src="data:image/png;base64,<64-bit string goes here> alt=""/>
This works at least for an image that says the site is under construction.
You can't link to it. It's offline. Unless you're using a remote css file that you can guarantee will be in a functioning server the css file will not be allowed to be served because the .Net Framework restrictions have been put in place to forbid the serving of any file except app_offline.htm. You can either put your css inline with the page or host it on a separate site (which is a choice some companies make anyway to keep design elements in a common location for enterprise applications).
In the head section of the sample html file from the html5boilerplate project, I notice this:
<link rel="stylesheet" href="css/style.css?v=2">
Note the v=2 request variables. I also notice that this is never done for javascript files.
What is the actual function of doing this ?
The ?v=2 might be to prevent reading from cache by the browser. It's used when loading dynamic content from a static file, like so:
changingListOfStuff.txt?randomUselessPropertyToTrickBrowser=123456789
This forces the browser to use this exact file, not a cached version of changingListOfStuff.txt previously downloaded and stored by the browser. Caching speeds up loading time, but might provide an older version of the file if it changes rapidly.
Read more about caching here: http://en.wikipedia.org/wiki/Web_cache
this is just telling the version of the url. This is done to make a fresh request to the server.In case of css as we know to achieve performance some headers are modified so that next time css is served by the browser history.But every time a css is modifed specifically in case of version releases. Browser should make new requests that would happen only when the url changes. So v=2 probaly means a new version is in and the url should freshly fetch the content from css.
This is called cache busting...you can read it here too
http://manikandanc.blogspot.com/2005/11/cache-busting-with-javascript.html
this will avoid client to get the version from browser. When you change the javascript or css , the end client who already visited your website may get javascript from his cache.
You can increment the version no whenever you deploy the files to the production , so that it will get the latest file
I have a system where cache max-age is set to 0 and there is problem, when I have made some changes in my style.css fail the changes dont apear to client. Browser will use the old cached version of css.
I have simple question: Does naming css file as style.css?123 will be cached as a new?
Yes, adding a unique query string to the resource's URI will force the client to fetch a "fresh" version (since the client doesn't know that it's merely an update of a previously cached resource). This is known as fingerprinting and you typically use a timestamp or an incrementing version number1 of the CSS file.
Google Web Fundamentals has a great article on HTTP cache optimization. Especially the section titled "Invalidating and updating cached responses:"
How do you get the best of both worlds: client-side caching and quick updates? You change the URL of the resource and force the user to download the new response whenever its content changes. Typically, you do this by embedding a fingerprint of the file, or a version number, in its filename—for example, style.x234dff.css.
Do note, that the fingerprint does not need to be a sequential number. Any value – hash, version, etc. – will do as long as the risk of collisions is limited.
1) This is what's done here on SO, e.g. http://sstatic.net/js/global-login.js?v=12
You can append a unique query string, although this will use bandwidth.
You can rename your CSS file every time you make a change, IE:
main-v1.css
main-v2.css
main-v3.css
And then re-reference it in your pages. This saves bandwidth and forces browsers to reload it.
yes, appending a querystring parameter in each style.css file will force it to cache again.
because browser caches each static component with its url, so when url is changed, the new file will be cached.
You can trick the browser into thinking it's a new stylesheet every second by timestamping your CSS:
<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />
Which will give you this:
<link rel="stylesheet" type="text/css" href="style.css?Thursday 24th of April 2008 04:45:21 PM" />
Taken from: Can We Prevent CSS Caching?
Using .htaccess file, you can define caching control on you files with special extensions.
You could include the following code in a .htaccess file:
<FilesMatch "\.(css)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
For more information about .htaccess file, see Apache .htaccess Guide