Develop Reference

Minification for Css/Js - right way?

In my project each page has a bunch of dependent Javascript and Css. Whilst developing I just dumped this code right into the page but now I'm looking to clean it up...
it appears that the general approach out there is to package all the Javascript/CSS for an application into two big files that get minimised.
This approach has the benefit that it reduces bandwidth since all the front-end code gets pulled in just once from the server... however, I'm concerned I will be increasing the memory footprint of the application by defining a whole ton of functions for each page that I don't actually need - which is why I had them on a per-page basis to begin with.
is that something anyone else cares about or is there some way to manage this issue?
yes, I have thought of doing conditional function creation since I need to run code conditionally for each page anyway - though that starts to get a bit hackish in my view.
also, is there much cost to defining a whole ton of Css that is never used?

Serving the javascript/CSS in one big hit for the application, allows the browser to cache all it needs for all your pages. If the standard use case for your site is that users will stay and navigate around for a while then this is a good option to use.
If, however, you wish your landing page to load quickly, since there is a chance that the user will navigate away, consider only serving the CSS/javascript required for this page.
In terms of a performance overhead of a large CSS file - there will be none that is noticeable. All modern browsers are highly optimised for applying styles.
As for your javascript - try not to use conditional function creation, conditional namespace creation is acceptable and required, but your functions should be declared only in one place.

The biggest thing you can do for bandwidth is make sure your server is compressing output. Any static document type should be compressed (html, js, css, etc.).
For instance the jQuery Core goes from approx. 90KB to 30KB only because of the compressed output the server is sending to browsers.
If you take into account the compression, then you have to create some mammoth custom JS includes to really need to split-up your JS files.
I really like minifying and obfuscating my code because I can put my documentation right into the un-minified version and then the minification process removes all the comments for the production environment.

One approach would be to have all the shared javascript minified and compressed into one file and served out on each page. Then the page-specific javascript can be compressed/minified to its own files (although I would consider putting any very common page's javascript into the main javascript file).
I've always been in the habit of compressing/minifying all of the CSS into one file, rather than separate files for each page. This is because some of the page-specific files can be very small, and ideally we share as much css across the site as possible.
Like Jasper mentioned the most important thing would be to make sure that your sever is GZIPing the static resources (such as javascript and css).

If you have a lot of javascript code you can take a look on asynchronous loading of js files.
Some large project like ExtJs or Qooxdoo have build in loaders to load only required code, but here is a lot of libs which simplify this, and you can use in your project (e.g. head.js, LAB.js).
Thanks to them you can build application which loads only necessary files, not whole javascript code which in case of big apps can be a heavy stuff for browser.

Bundling .js files vs CDN

In order to improve performance of our web pages, we are recommended to use CDNs to serve .js files on our web pages. That makes sense.
Also, we are recommended to bundle our .js files in order to reduce the number of requests which are being made to server on load.
So, we need to sit down and make decision between if we use CDN or bundle .js files.
What are the pros and cons? Which ones make more sense?

Why can't you bundle them and place them are the CDN? It should hardly be a decision of one or the other?
If you have to choose one or the other, it depends on how many .js files you are including. For a small number of files, I'd suggest that a CDN would be quicker, where-as for a greater number of files, a bundle of .js files would definitely be quicker. Where the switch-over would be, is something for you to experiment with.

My answer: both. Bundle them and place them on a CDN.
The downside of doing this? Depends. What does you build process look like? Can you easily automate the bundling and minification? Are you using Yahoo YUI or Google Closure or something else?
Also, if there is a lot of GUI dependent jQuery there might be some time consuming friction due to constantly changing elements/effects/css.
Testing is important too because due to possible minification quirks.
Bottom line: 5 javascript files safely bundled into 1 file === 4 fewer requests.
A page with just plain old Html and one external javascript reference === 2 requests to your server. However, a page with just plain old Html and one external javascript reference on a CDN === 1 request to your server.
Currently we are using the Google Closure tools. The Google Closure Inspector helps with the following:
Closure Compiler modifies your original JavaScript code and produces code that's smaller and more efficient than the original, but harder to read and debug. Closure Inspector helps by providing a source mapping feature, which identifies the line of original source code that corresponds to the compiled code.

As others have already stated, the answer is both if possible. Bundled (and minifying) gives a benefit to your users because it decreases the page weight. The CDN benefits your servers because you are offloading work. Generally speaking, you need not optimize either unless you have observed performance issues or you just have nothing better to do.

There's a few things you need to think about...
How much of the JS do you need to load early in the page load, and how much can you delay until later?
If you can delay loading JS (e.g. put it at the bottom of the page) or load it asynchronously as Google Analytics does, then you will minimise the amount of time downloading the JS spends blocking the UI thread.
After working out how the load of the JS can be split, I'd deal with the merge / minify of the various JS files - cutting down HTTP requests is key to improving performance.
Then look at moving to the CDN and ensure the CDN can serve the JS content compressed and allow you to set headers so it's "cached forever" (you'll need to version the files if you cache forever). A CDN helps reduce the latency but will also reduce size by being cookieless
Other thing you might want to consider is setting up a separate domain for static content, point it to your server(s) while you sort things out and then switch to a CDN if it looks worthwhile.
Andy

How do I optimize my website for slow data connections?

The solutions here worked fine however they were quite labour intensive. To anyone looking to perform similar enhancements on old asp.net solutions I would highly recommend switching the project to MVC just to take advantage of the script and style bundling. .aspx files work as expected in MVC projects.
I'm about to start work on performing some performance enhancements for one of our products.
Our users connect to the network using radio which is extremely slow. The main bottlenecks in the application are the network and the database. I am going to be focusing on reducing the network footprint of the application.
I am going to start with a few "quick wins" before I get down to the nitty gritty of tearing apart UpdatePanels, removing unnecessary content and whatever else I can think of.
Right now I have a few things that I think I'm ready to implement
These include
Minifying and combine css Using This
Minifying and combine js same as above
Removing excess whitespace from html sent to client. Using this
Edit : The assets minification and white space cleaning tools work quite well together.
However I have a few things that I'm not sure how I'll address.
Some microsoft resources (WebResource.axd?d=blahblah and ScriptResource.axd?d=blahblah) are not minified. This and This and a few others depending on the page. Microsoft.Ajax is fine though. How can I manually minify these files if they aren't being minified automatically? Am I missing a setting somewhere?
Is it possible to combine the microsoft resources into a single js file with my javascript?
401 errors, In fiddler I can see that my first hit to the website always gives a 401 error it is immediately followed by the normal 200. Also other resources will randomly have a 401 on their first call as well. Is this some sort of IIS setting that needs to be configured to remove this unneeded call?
Javascript inside aspx files. Unfortunately we have a lot of js inside our aspx files as well as a lot of javascript that gets rendered using ScriptManager.RegisterStartupScript in our code behinds. How would I go about minifying javascript within <script> tags in the aspx markup?
Favicon, can this be diabled? If not what's the next best thing?
Update
Mads Kristensen's combiner works great. However I've found that there are issues with some pages that include 14+ axd references produce a 404.15 error (query string is too long, ie only bug) My solution for this was to gzip and base64 encode the query string.
I've found that combining my js includes with the .axd files is a fruitless task as the .axd files are different for each page. Having my static js files seperate produces an extra service request but it will remain cached on the client instead of having the client redownload those scripts as a part of the combined js axd file.
I enabled anonymous authentication. No more issues.
No progress.
I've found that putting favicon.ico at the root is necessary. I think this may be just because of the way my application has been designed though.

Merging Microsoft script resources: Check out my ContentGator project which I've used to intercept requests for the WebResource (and other scripts and css) files and merge them together. I haven't updated it in a couple years, so I can't speak to how well it'll work out of the box, you should at least be able to reuse some of the code. I don't think I remember adding minification, but you should be able to add it in pretty easily. I think it also has either hooks into RegisterStartupScript, or an alternative to it, where again you should be able to wire in minification.
Favicon, as far as I know, cannot be disabled, as it is requested by default by the browser. If you really don't want it, you could probably just put up a 1x1 pixel ico so you aren't serving a 404, and subsequent requests will result in a 304. It wouldn't hurt to use a CDN for this and all your other static resources as well.
Additionally, check out http://developer.yahoo.com/yslow/ for other more general web optimization tips.
Other things off the top of my head:
Use sprites for images when possible
Output Caching

1 and 2) Optimize .axd: http://madskristensen.net/post/Optimize-WebResourceaxd-and-ScriptResourceaxd.aspx EDIT dead link Compress Script Resource .zip Google Cache of the article
3) HTTP 401 Unauthorized: You're configured authentication mechanism is doing this. If you have Windows authentication enabled but are not using it...
4) Embedded JS: MS AJAX Minifier
http://www.codeproject.com/Articles/81317/Automatically-compress-embedded-JavaScript-resourc
http://stephenwalther.com/blog/archive/2009/10/16/using-the-new-microsoft-ajax-minifier.aspx
There's not much you can do for JS mixed in with your markup. You could make your own utility to parse it out of the ASPX(s) with RegEx and create a file that contains all of it per page then minify that file and insert the 1 script reference. The regular expressions to capture everything within SCRIPT tags will end up being fairly complex because of corner cases like...
<script type="text/javascript">
document.write("<script>Dynamica, RegEx don't stop here -></script>");
</script>
5) Favicon: you either have a LINK tag on your page(s) that reference it with REL="shortcut icon" or you have a "favicon.ico" file sitting at the root of your web site. If you don't have the LINK tags then the browser will check for the favicon.ico at the root of your website automatically.

You should also consider enabling compression in IIS.
IIS6 Compression
IIS7 Compression

From gtmetrix.com:
Avoid bad requests
Avoid CSS #import
Avoid CSS expressions (deprecated)
Avoid document.write
Combine external CSS
Combine external JavaScript
Combine images using CSS sprites
Defer loading of JavaScript
Defer parsing of JavaScript
Enable gzip compression
Enable Keep-Alive
Inline small CSS
Inline small JavaScript
Leverage browser caching
Leverage proxy caching (deprecated)
Make landing page redirects cacheable
Minify CSS
Minify HTML
Minify JavaScript
Minimize cookie size (deprecated)
Minimize DNS lookups
Minimize redirects
Minimize request size
Optimize images
Optimize the order of styles and scripts
Parallelize downloads across hostnames
Prefer asynchronous resources
Put CSS in the document head
Remove query strings from static resources
Remove unused CSS
Serve resources from a consistent URL
Serve scaled images
Serve static content from a cookieless domain
Specify a cache validator
Specify a character set early
Specify a Vary: Accept-Encoding header
Specify image dimensions
Use efficient CSS selectors
You can use the gtmetrix tool, ySlow, or google's Page Speed to see how all of these impact it, but this gtmetrix tool is generally awesome and combines features for you, as well as doing some auto-generations that give you the improved versions of CSS files, etc.

http://wiki.asp.net/page.aspx/80/aspnet-optimization/
has a great set of resources on the various elements that you can / should tweek to make speedster web apps on asp.net! Njoy :)

I think that website should be optimized for best performance regardless of user connection speed.
Website performance/speed affects user experience which on the other hand affects overall website goal/conversion, so creating fast responsive websites and speeding up existing ones should be one of the primary goals of every web developer/front end engineer etc.
Anyway, these are two great resource to start with and comes from two giants:
http://developer.yahoo.com/performance/rules.html
http://code.google.com/speed/
Best

Have you enabled client-side caching for static resources such as site images and styles? They won't help with first page view but would speed up things a lot in subsequence views.
Favicon cannot be disabled but the request itself can be eliminated in modern browsers by using a data:url. For example this would cause a page to have slashdot's favicon without sending any request:
<link rel="shortcut icon" href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAB4eE0AX18OAP///wBeXisAYWETANPTxACrq4cAgYEaAEhJEgBKSiYAkJF3AL29pgBiYjAAVFQQADQ0CgBCQg4AWe7u7u7u7pWe7u7u7u7u6e7u7u7u7u7u7/ZVr/+rz/7v+iIp8CJf/v//UibwIl////8CIj+mz//4iIUiuIiIj/iIjCIgiIiPjd3dsiXd3diN3d1CIq3d2I3d3dYiLd3Y0RERFGZsERHUERERERERRDd3d3d3d3dzXERERERERMUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" type="image/x-icon" />
Keep in mind that enabling client-side caching for favicon should save more bytes then embeding it in every page you send.

How to handle javascript & css files across a site?

I have had some thoughts recently on how to handle shared javascript and css files across a web application.
In a current web application that I am working on, I got quite a large number of different javascripts and css files that are placed in an folder on the server. Some of the files are reused, while others are not.
In a production site, it's quite stupid to have a high number of HTTP requests and many kilobytes of unnecessary javascript and redundant css being loaded. The solution to that is of course to create one big bundled file per page that only contains the necessary information, which then is minimized and sent compressed (GZIP) to the client.
There's no worries to create a bundle of javascript files and minimize them manually if you were going to do it once, but since the app is continuously maintained and things do change and develop, it quite soon becomes a headache to do this manually while pushing out new updates that features changes to javascripts and/or css files to production.
What's a good approach to handle this? How do you handle this in your application?

I built a library, Combres, that does exactly that, i.e. minify, combine etc. It also automatically detects changes to both local and remote JS/CSS files and push the latest to the browser. It's free & open-source. Check this article out for an introduction to Combres.

I am dealing with the exact same issue on a site I am launching.
I recently found out about a project named SquishIt (see on GitHub). It is built for the Asp.net framework. If you aren't using asp.net, you can still learn about the principles behind what he's doing here.
SquishIt allows you to create named "bundles" of files and then to render those combined and minified file bundles throughout the site.

CSS files can be categorized and partitioned to logical parts (like common, print, vs.) and then you can use CSS's import feature to successfully load the CSS files. Reusing of these small files also makes it possible to use client side caching.
When it comes to Javascript, i think you can solve this problem at server side, multiple script files added to the page, you can also dynamically generate the script file server side but for client side caching to work, these parts should have different and static addresses.

I wrote an ASP.NET handler some time ago that combines, compresses/minifies, gzips, and caches the raw CSS and Javascript source code files on demand. To bring in three CSS files, for example, it would look like this in the markup...
<link rel="stylesheet" type="text/css"
href="/getcss.axd?files=main;theme2;contact" />
The getcss.axd handler reads in the query string and determines which files it needs to read in and minify (in this case, it would look for files called main.css, theme2.css, and contact.css). When it's done reading in the file and compressing it, it stores the big minified string in server-side cache (RAM) for a few hours. It always looks in cache first so that on subsequent requests it does not have to re-compress.
I love this solution because...
It reduces the number of requests as much as possible
No additional steps are required for deployment
It is very easy to maintain
Only down-side is that all the style/script code will eventually be stored within server memory. But RAM is so cheap nowadays that it is not as big of a deal as it used to be.
Also, one thing worth mentioning, make sure that the query string is not succeptible to any harmful path manipulation (only allow A-Z and 0-9).

What you are talking about is called minification.
There are many libraries and helpers for different platforms and languages to help with this. As you did not post what you are using, I can't really point you towards something more relevant to yourself.
Here is one project on google code - minify.
Here is an example of a .NET Http handler that does all of this on the fly.

jQuery/JavaScript - performance-issue when having a lot of small .js-Files?

i've got a site with a lot of referenced .js-Files; those are rather small files, but I want to keep my methods separated by topic/functionality.
Is it better to keep all the methods in one .js-File or is it no problem to have many (~ 20 - 30) small files all including only some lines?

By all means keep them separate for development, but you should consider bundling them together into one file for production.
There is a nice discussion at sitepoint.com
For each of these files, an HTTP
request is sent to the server, and
then the browser awaits a response
before requesting the next file.
Limits (or limitations) of the browser
generally prevent parallel downloads.
This means that for each file, you
wait for the request to reach the
server, the server to process the
request, and the reply (including the
file content itself) to reach you. Put
end to end, a few of these can make a
big difference to page load times.

Actually it's a bad idea to have so many referenced files. The basic idea for performance issues is to try to minimize HTTP Requests as much as possible (at least on your production server). Take a look at this http://developer.yahoo.com/performance/rules.html#num_http

Does anyone have a clever nant script which can do this for you? I've written a custom nant task which uses the YUI compressor to minify my css and js, but it would be useful to add combining to it. How do you guys handle this?

I don't know what framework (if any) you use on serverside, but Ruby on Rails have a script include function that depending on the settings (e.g. test or production) it can either create lots of script tags (typically test mode) or create one tag with all scripts concatenated into one (optionally compressed with some plugins) file. I'm sure many other frameworks support something like this too.
UPDATE: I just remembered:
You can allso manually compress (by stripping whitespace and comments, shortening variable names etc.) and combine javascript files and CSS files with the Yahoo! UI Library: YUI Compressor. Just be sure your JavaScript is correct before you compress it, try JSLint.