We have a ASP.NET/HTML5 web application. To make sure that after every release, new js and css files are used, we add a parameter to the urls
http://myapp.com/public/app.js?rdyyyymmdd
http://myapp.com/public/app.css?rdyyyymmdd
But what about image cache which is causing issues. Images are added using <img> tag as well as they are being added though css (background-image) property.
Now, it is not feasible to add timestamps in css files to all the images. We have hundreds of css files each referencing some images.
So how does one fix this issue?
You could still use a datestamp or GUID. Just add a script to your deployment process which looks for image urls in your compiled css using regex and changes their query string.
Personally I've used Python to do something kind of similar, but I'm sure Grunt / Gulp would be a good candidate if you use them.
Related
Every time we release a new version of our software which is bundled using Browserify, we are finding that we need to ask our users to clear their cache using the regular methods of CTRL+F5 or diving into the browser settings. It is not ideal when there are a thousand or so users. We are trying to work out a way that we can perhaps get around this. I am open to all sorts of options.
Our project is ReactJS based, so runs in the browser and connects to back end services via a RESTful API. We do track which version is loaded and this is visible from within the console. Using the version number we can compare on two different machines that one user is running the latest version whereas someone else may not be.
The code is bundled into two separate files and I feel that this is where we should be looking.
You need to change the file name on each new release.
A hash of the file is an appropriate thing you could add.
Check out md5ify to add this to your project build.
If you implement this yourself, make sure to also load the correct filename in your index.html file.
Edit:
To automatically load the correct file you need to have a placeholder in your main html.
Then you need a manifest.json file that looks like following:
{
"main.js": "main.[HASH].js"
}
This has to be created automatically after the bundling.
Now you can replace the placeholder with correct asset by doing a lookup in the manifest file.
You either have to write your own scripts for this or use something like gulp together with browserify.
Another solution would be webpack
I'm working on optimising a site and one of the biggest issues it has is that there are far too many resource requests.
JavaScript and CSS bundling and minification go a long way to improve this but they're somewhat at odds with transparent naming.
For example, if I have 3 widgets on my page that all have their own JS and CSS, I could bundle all the JS into one file and all the css into another file. this would reduce the round-trips from 6 to 2. However, the resulting bundle would be wasteful if another page only used one of those 3 widgets.
What I'd like to do is bundle all the JS AND CSS for a particular widget into a single file. The browser would then have to unpack this and make it available to the page. A logical extension to this would be to create a package of packages so that all the resource files for all the widgets were downloaded in a single file.
The only way I can think of doing this is with a web service and then writing the output directly to the document with JavaScript. This feels wrong as I don't think the browser would be cache this appropriately.
Any thoughts?
TL; DR
Has anyone come up with a way of packaging CSS and JS files into a single file to reduce round-trips to the server?
As somethinghere said, it is not a good idea to package both in a single file and send it to the client. A CSS cannot add JavaScript, but a JavaScript can be used to include CSS to the body. So the only way is to add the CSS as a single string variable and making document.createElement and appending it to the head.
If you are concerned about the HTTP requests, you can either embed the CSS fully inside the <head> or you can make use of Data URI Scheme. The downside of Data URI Scheme is that, the browsers IE 8 and below have less or no support.
Solution: It is a must and best to include three requests at a minimum, for:
The page itself
CSS Stylesheet
JavaScript Scripts
Other Solutions include adding the CSS and JavaScript contents directly inside the <head> or using the Data URI scheme.
Not sure but one hack is to create a html file and add your js and css in it and import that file in your original html file
something like this
<head>
<link rel="import" href="library.html">
</head>
and your library will look like this
<html><script>YOUR JS code</script><style>YOUR STYLES</style></html>
This question is a little related to:
Are unused CSS images downloaded?
Let's say I have a CMS that allows the user to pick how the page looks.
Internally the selections are very small CSS files (4-5 lines).
If browsers do not load unused background images, I could safely put all these styles inside the main CSS file, and switch them with a body class. This saves me lots of code that should handle css file switching. Right?
It would always be safe to combine the files. It is considered best practice by today's standards. It is quite common to minify and bundle the js and css files together to reduce requests to the server.
As stated in the post you mention, the browser shouldn't download them until the selector is actually valid, even then the image should only be downloaded one time and should return 304 Not Modified so the browser knows not to download it again.
Anytime you load a css file or change properties on elements, the css is parsed and re-renders the necessary styling.
NOTE: I feel obligated to make sure you take order of selectivity into account when bundling your css files.
I've come across sites with CSS and JS filenames like this:
css_pbm0lsQQJ7A7WCCIMgxLho6mI_kBNgznNUWmTWcnfoE.css
What's causing this or why would you do it?
Edit: Some of each answer below could apply to this scenario, but given the sites I've found this on, serving/caching methods seems the most accurate.
Versioning and making sure that correct version of static resources is being served.
If you have a high traffic website and you serve lots of users you will have several layers of caching: CDN, caching headers on files, etc.
Sometimes it can be hard invalidating the caches with the same filename. Server might pass the correct headers, but client might disregard them and still load cached version. Serving different file name prevents that and ensures that you have correct version of css/js and other static resources.
As you can probably tell, no human came up with that name.
Typically it's
the result of combining multiple CSS files into a single file. This is
done for performance reasons (requesting one file is faster than requesting two.)
The name is likely to be the result of a deterministic algorithm on the
input (i.e. a hash), such that if you perform the combination again but haven't changed the CSS, the output will be given the same name.
When the content (CSS) changes, the name of the output file will change.
This is useful because it makes it impossible for a browser to cache
the old version.
It looks like the file was generated, server-side, for minification.
The website you're visiting might have had multiple CSS files (perhaps combined with #import statements) and JS files (jQuery, jQuery UI, jQuery plugins, some custom code, etc) - rather than have the developer manually minify and combine the files the server might do it for them (ASP.NET 4.5 does this, for example). In this case it uses an arbitrary (random? GUID-based?) filename to ensure it doesn't conflict with anything.
It may be the technology used by the website.
i.e. if you use gwt (it's some java compiled in javscript) or something else that preprocess some code and outputs javascript, you will likely to get weird filenames.
I'm creating a new dinamic site to test and learn about web optimization...
Site Index
For html,css,js (exept jquery-min that is linked to google server) files I've created a php file that concatenate more files, remove unused spaces, and compress it using Gzip:
compressed css - compressed js
if(extension_loaded('zlib')){ob_start('ob_gzhandler');
/*...php code to read files and remove comments/spaces*/
if(extension_loaded('zlib')){ob_end_flush();}
For main images, I collapsed every image into one
For facebook like button, I replace the iframe after page load using jquery, I'd like to do the same with adbrite advertises but I don't know how..
If I try to replace, or inject the code into html after loading, the page disapper and remain only the adv...
Someone could help?
Can you tell me if I'm doing well (for optimization) and where I can improve
Thanks...
It's a good start, but you shouldn't compress anything dynamically. That is just too costly and will end up to be slower than delivering content uncompressed.
Use gzip/deflate and compress your javascript files with a minifier like YUI, Google's closure compiler or uglifyjs to name a few. Serve those files statical.
A nice tool to automate all of the above processes (and way more..) is Apache ANT.
A nice library to serve any content dynamically over one stream is supplyJS.
You can also try Google Granule: http://code.google.com/p/granule/ (which programmatically compresses and minifies css files and js files on the fly)
Also check your "adbrite advertises" is not working is because the code might be using a Document.write() method, which should be called while the document is being parsed. try loading them asynchronously or deferred.
http://www.sitepoint.com/non-blocking-async-defer/