I've been reading this post about minifying and compressing static files like CSS/JS within the publish/package event in VS2010.
I wonder if it also is possible to combine the files to one CSS file and one JS file?
And how that can be done in this process.
As far as minifying and compressing your CSS and JS files - that shouldn't be any issue.
However - when it comes to actually combining all of your related files (CSS & JS) into single files, you will need to be careful to avoid any naming conflicts that can occur.
(This is especially important if you are using some already minified JS files - as variables like a,b,c etc. will be used often.)
The YUI Compresser can handle both the compression of CSS and JavaScript files.
Hope this helps.
Publish time merging is good idea but sometimes say page "A" needs 'a.js' and 'b.js' whereas page "B" needs 'a.js' and 'c.js' and there can many such dynamic combinations. Doing this check at build time and then grouping is sometimes very hectic.
What if grouping happens on the fly for required resources and with one HTTP request like this...
<script language="JavaScript" src="/appContext/js/a,./subdir/b.js"></script>
WebUtilities library (for J2EE) does exactly same and helps with many other front end optimizations.
Minimizing HTTP requests
Minifying JS,CSS files
Minifying inline JS, CSS snipped (custom tag)
Leveraging browser caching (Expires, Cache-Control)
Server side caching (until resource changes)
Early setting charset etc.
Here is the link. Have look in case you find it useful.
http://code.google.com/p/webutilities/
Related
Hanging around this problem from quite a few days..
I have an angular 5 application, I am using some js files which are present in src/assets/js/*.js of my angular app's project directory. Since to achieve good performance, i am using lazy loading technique for loading of these js files.
I have a script.service.ts file in the app folder which loads the js files, i provide the names of the js files to this service to make it load. I also have a script.store.ts file where i have mapping of the js file names with there paths. Script.service.ts uses this path to load the js file with the mentioned name.
Problem - Now, whenever i change something in my js file and deploy the application, the changes are not getting reflected in the browser since the files are already cached. I have used gulp plugin to append a hash content to these file names with task runner, but i cannot make changes in the code of script.store.ts every time, since the content hash is unique for each file..
I am searching for a solution where i can achieve cache busting having incorporated this lazy loading feature of js files..
I hope i will get the solution soon. Thanks in Advance.
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
Perfect Caching
Perfect Caching allows the browser to cache resources forever and guarantees that changed resources are propagated immediately to the browser. In GWT this is accomplished by naming a file like the hash code of its content. As this leads to a new file name each time the content of a file changes, the browser can cache these files forever without having to ask the server whether or not there is a new version available. More about perfect caching can be found here.
As this concept works very well I would like to apply it to all of my non-GWT resources (some JS, CSS and image files).
As my build process is Maven based it would be great if there was a plugin which could automatically rename the files according to their hash code and which could adjust all of the references to this file.
Here's an example
Renaming
foo.css -> foo_39757cec04498955db62043f7ecfefc2.cache.css
logo.png -> logo_35bcdbbabe1944afc75eeeb16f06d1ad.cache.png
Update references in files
Replace all occurances of "foo.css" by "foo_39757cec04498955db62043f7ecfefc2.cache.css"
Replace all occurances of "logo.png" by "logo_35bcdbbabe1944afc75eeeb16f06d1ad.cache.png"
Does anybody know whether something like that already exists?
Many thanks in advance,
Michael
If you're using Apache (httpd) you can setup mod_pagespeed to do that. Since GWT does some of that stuff already, be careful to properly configure mod_pagespeed so that performance doesn't degrade.
mod_pagespeed indeed disables HTML caching by default, as typically HTML is dynamic. However, you can override that behavior.
There is a new option in the most recent binary release (0.10.21.*) that provides the behavior you want: explicitly control of your HTML caching headers:
ModPagespeedModifyCachingHeaders off
http://code.google.com/speed/page-speed/docs/install.html#ModifyCachingHeaders
I am using Codeigniter. I am keeping my images,CSS and Javascript files in a folder called "support" in the document root of my application. So my document root folder looks like this-
.settings
application
support
system
.buildpath
.project
index
.htacces
Now my question is will it make my website take time to load as I have to use <? echo base_url();?>support/ every time I need to get something from my support folder? Because you see when I am using <? echo base_url();?>I am actually calling the full website address.. and I have 7 CSS and 13 javascript files to call from "support" so it will definitely take time to load the website. (Please correct me if I am wrong). If you think by this a website can get slow could you please tell me where exactly should I put my CSS,images and javascript files in. I heard views is not a good place for this.
Thanks in Advance :)
This question is probably bigger than you think.
First of all, using <? echo base_url();?> instead of "hard-coding" your web address will not slow down your site. A function call like this is very negligible to the speed of loading your pages.
I think the other part of your question is regarding architecture.
When you think of speed for your website, you need to know what factors slow down the loading of your page. (Although not an exhaustive list, this will help in your case):
the number of files (images, css, javascript, etc.) that need to load for your page
the cache-ability of those files
some server side header nonsense (e-tags and so-forth)
the processing to build your php pages
the size of your page
Now, in your instance, I would recommend putting all of your "static" files in the document root under a folder (say static). Then, access them all in your "views" with the base_url() function.
This way, your page as it's delivered to the browser, will make external calls for those static files - allowing the browser to cache all of those files (assuming the headers are set up correctly). If you put them into views, then they're actually added to the page that is being requested. So, the next page that is requested has to download those files again along with that second page being requested. Make sense?
To help with the "number of files", you can always concatenate and minify any css/javascript that you have. So instead of the browser downloading and caching 8 js files, you can serve it 1 js file with all of your code.
I'm using the Asp Sprite and Image Optimization Framework located here to handle any css sprites in my site. Depending on the brower the framework generates two different links pointing to these two files
/App_Sprites/highCompat.css - ie9, firefox, chrome
/App_Sprites/lowCompat.css - ie6, ie7
Unfortunately the css files are not minified and cannot be moved from their current location.
I have my own minification engine though wrapping around the Ajaxmin library where I use a handler to fling out compressed css on the fly.
This will capture a path like this.
/css.axd?path=reset.css|style.css|helpers.css
How could I with MVC capture the request and rewrite it so the css is served through my minifier?
Cheers!
Pretty easy, really: Put the CSS somewhere other than where the URI in your markup points.
IIS won't run route handlers if the physical file exists. So if your site has a physical ~/App_Sprites/highCompat.css file, your app won't be able to intercept it (though you could do this with a HttpModule). But if you put the file elsewhere and have a App_SpritesController then you can handle things as usual in MVC.
So either write an HttpModule (this would probably be my choice) or, if you must do it through MVC, relocate the file.