Does the fact that I have 1 or 30 css files have any effect to my website?
I know that I have to have special file for print, but right now I speak about rest CSS I can have in 1 file, but I split it into 30 files.
Yes, there are performance implications to having large numbers of separate files to download; you will improve your site's performance by combining them.
The number of HTTP requests made by a page is a significant factor in page loading time, because:
the browser has to wait for all requests to finish before it can render the page correctly and before it can call any Javascript that is set to run on page load.
browsers have a limit on the number of HTTP requests they can make simulataneously. In some browsers, that limit is very low (as low as 2 for old IE versions).
your server will also restrict the number of simultaneous requests.
All of these issues will slow down your site if you have a lot of separate files.
There are good reasons for having separate files -- eg for caching, if some files change more often than others, you may not want them to be merged with others that never change -- but for the most part, you should do you best to reduce the number of HTTP requests your page has to make.
Don't feel that you have to merge them all into one single file, but you should definitely consider reducing the number as much as possible.
In addition, IE8 and earlier have quite tight restrictions on the number of CSS files allowed -- it only allows 31 CSS files; any CSS files over that limit are ignored. You may not have hit that limit yet, but it sounds like you're getting dangerously close to it, and it has the potential to bite you very hard if you don't know about it. This problem is also solved by simply merging your CSS files.
Yes, it does. The less HTTP requests you have, the faster loading process is.
You can analyse loading speed with YSlow
Yes, it does affect the speed of your site.
Browser can donwload a limited number of resources at a time (=in parallel - it differs between browsers, but it's around 4 sources from one domain), so they are "blocked" if you have too many separate sources resulting in a lot of HTTP requests. The browser has to wait to complete these requests and can't continue with the creation of the document during that time.
You should always try to use as few files as possible, minify them and possibly compress (gzip) them.
Yes it certainly does, especially if you are loading all of them on one page load. 30 http requests instead of 1 will make a big difference.
CSS Preprocessors
If you feel that having your css files separated offers you a benefit of readability and the such then it is worthwhile looking into using a css preprocessor such as Less or Sass as these will allow you build seperate files into one style sheet.
Related
Many people say to keep the number of external CSS and JavaScript files to minimum to reduce round trip time. For example, Google recommends maximum two CSS and JavaScript files per web site, respectively.
The problem is, I've broken up CSS code into several files depending on its nature as part of "modularization". For example, I've put CSS code that is only used in a certain part of the application in a separate file. As a result, some files have less than a hundred lines of code.
I'm a Java develper, and this is actually a recommended practice in Java, but CSS is a totally different creature and I don't know much about CSS. Here are my questions.
Does it make sense to keep as many CSS files as you see fit for readability and maintainability?
How many CSS files are manageable in a web project?
What's the average number of CSS files in web applications that you've worked on in the past?
The best solution is to write a script that combines (and minifies) multiple CSS or JS files.
You might benefit from a solution like Bundler, or Chirpy
http://www.codethinked.com/bundler-now-supports-css-and-less
http://chirpy.codeplex.com/
We use chirpy because we found a bug in Bundler that can inject query string params into you css files.
As a bonus to file consolidation, you also get .less syntax handling.
I agree with what other have said here, yes when you develop you have muliple CSS files, but for production you should merge an minify them.
However I do not agree you should merge them all into 1 single file. As the will mean people who just want to visit your home page must wait for CSS on pages x,y,z also to download.
What I usually do is have 2 or 3 CSS files.
1 small CSS file just for the home page only so it load super quick so casual visitors do not have to wait to see what my site is about
Another CSS file for every other page availble to guest users
Another CSS file for a members only sectons of the website that require a login.
You can also use scripts like HEAD.JS which will manage your CSS and javascript asynchronously
From there site http://headjs.com/
There is a common misbelief that a single combined script performs best. Wrong:
latest browsers and Head JS can load scripts in parallel. loading 3 parts in parallel instead of as a single chunk is usually faster.
if an individual file is changed the whole combination changes and you loose the benefits of caching. it's better to combine only the stable files that doesn't change often.
many popular libraries are hosted on CDN. you should take the advantage of it instead of hosting yourself
iPhone 3.x cannot cache files larger than 15kb and in iPhone 4 the limit is 25kb. And this is the size before gzipping. if you care about iPhones you should respect these limits.
As you point out, having multiple CSS files often leads to better maintainability and modularity.
The number of CSS files needed depends on the size of your project and the level of modularity in the project.
Serving up on CSS file instead of many often makes a noticeable difference in the page loading time, so the ideal solution is to have some kind of tool that combines, and maybe even compresses, the CSS files. This can easily be done in runtime by a tool such as Minify.
Combining resources can be beneficial in that it can reduce the number of HTTP requests; Reducing the number of HTTP requests certainly lowers overhead and can improve performance. It can also have benefits for caching, in that there can be fewer objects in the cache.
That said, this kind of optimization is only useful with metrics. There are profilers out there (Firebug has one) that can show you how many requests you're making and how long they take. You may (or may not) find there are more time-effective ways to increase performance and reduce load on your server.
I have a site where all the pages have the same header and footer, but vary in between on content. I'd estimate that 30% of the CSS is common to all the pages, with 70% varying.
What are the relative advantages and disadvantage of using one CSS file vs multiple for different pages?
Advantages of one CSS file
Only one HTTP request is needed to fetch it, which improves the first page load time for most users and will speed up subsequent page loads, especially if users are expected to visit more than one different page type during their visit. This can also decrease server load.
Advantages of multiple CSS files
Reduces bandwidth, particularly if any given user is not likely to view many of the different page types on your site during their visit (which may be the case if your site is divided into almost completely unrelated sub-sites). Note that multiple CSS files will increase HTTP requests, which despite bandwidth savings may actually decrease load speed on modern connections.
I'm generally in favour of having a single CSS file for a site in most cases.
Multiple CSS files requires multiple requests to retrieve the files from your servers -- this can introduce extra latency before the client can render the pages. A single CSS file would involve less latency and may allow your site to render that much faster.
The benefits of a single CSS file grow as client latency speeds increase -- so high-latency modems and cell phones would probably benefit more than broadband-connected computers.
I agree with the other answers that one file is generally better, and I'll add that in my experience, after minification and gzip (you are doing both, right?) no CSS I've ever served has been more than a handful of kilobytes. CSS files can get physically long in terms of # of lines of source, but when you crunch them down they are quite compact (and there's just not as much text there are you may think).
It's one of those things where optimizing CSS by breaking it out across pages can be done, but there are so many bigger things that you can spend your time optimizing that it's really hard to justify the effort there.
Adding to the accepted answer:
Advantages of multiple CSS files
Better code organization - easier to navigate them and know that changes don't affect pages other than the one you're working on.
As far as I know, these days there are two main techniques used for including CSS in a website.
A) Provide all the CSS used by the website in one (compressed) file
B) Provide the CSS for required by the elements on the page that is currently being viewed only
Positives for A: The entire CSS used on the site is cached on first visit via 1 http request
Negatives for A: if it's a big file, it will take a long time to load initially
Positives for B: Faster initial load time
Negatives for B: More HTTP requests, more files to cache
Is there anything (fundamental) that I am missing here?
Profile it. It depends on the way your users use your site.
If it's a web application and your users are likely to interact with it a lot and see most of the layout you designed, you probably want to use a single CSS which is loaded once and then stored in the browser cache. The first time overhead is negligible in this case.
If most of your users come with a cold cache and just look at two or three pages, separate CSS files will probably improve their experience.
You can't tell without having a look at what the users actually do.
Even a largish CSS file, gzipped, is tiny compared to a lot of other things (like images, movies, etc.) that get downloaded. The only real reason to break up CSS into separate files is to swap in special rules to make certain browsers behave (I'm looking at you, IE).
There is no A or B, it's always a trade-off between the two. For example: you'd want the front-page to load as quickly as possible, so you only request what's necessary. For the following pages you request the remaining CSS. A total of 2 requests.
In essence, you're creating packages/groups of related CSS. By dynamically combining and compressing these packages, you can create a maintainable structure of files. This also enables you experiment with the best combination of speed, performance, requests and bandwidth...
This whole story also applies to JavaScript files, since the same trade-offs can be made.
What's better?
Writing one css file
Writing more css files
What's better?
Tracking, keeping 1 css file updated
Tracking, keeping more css files updated
What's esier?
Making decisions what to insert into one css file
Deciding what to put in every of your css files
What's the cost of generating each individual css file compared to generating one global css file.
I'm wondering if it's better to make one or several files for CSS files ?
I always see websites with a plenty of css files, but it seems better to use only one large file.
What's your advice ?
Performance wise, you are better off with a single file, as it results in one connection and request to the server (these tend to be expensive operations, time wise).
This is why minifying frameworks exist, that merge together all the CSS (and JavaScript) files for each page and serve them in one request.
My strategy on this is simple.
I separate production from development, both in CSS files and in JS files.
in development, I can have up to 20 JS files and 10 CSS files, organization is super slick and easy, I always know where everything is.
In production, all files are minified into 1js and 1css file, changes are always made in development and then "staged" to production so I gain the maintainability of the application and the performance in production.
I use Yahoo minifier to minify my files but you can use whatever is convenient for you.
Having one CSS file doesn't just help with HTTP requests, it will also give you better compression (compressing one big file should give you better results than compressing multiple smaller files).
Different HTTP requests are hardly the bottleneck here, file size ultimately is. The reason it's best to split things up as much as possible is because if you want to change a certain thing of your site's feel, let's say, the font of all headers, you want to change one file / setting only for that, and want that file to be as small as possible.
For large and encompasing CSS, I would make different CSS documents for all different things like the layout, the treatment of classes, and so on, another advantage is that if you've multiple pages that need a slightly different look from the main page, they only have to link to one other CSS file, not to a completely different one, the majority they an share.
If performance does matters to you
Then
If your site is small but gets huge traffic then go for one css file
if site is small personal or business sites then but with less traffic then go to multiple css
If CSS files maintainability does matters to you
Then
If your site is small with less different pages then go for one css file.
if site is big then go for multiple css http://www.killersites.com/blog/2008/how-to-organize-css/
HTTP request of CSS files will not make big difference in performance of small site.
Use not too much different css files or at least try to put them on other domains to speed up downloading them by the browser. I also suggest you use a minification tool.
Well, the same as Yahoo!'s: Use one to reduce the number of HTTP requests.
For the quickest download and rendering of a page, the Yahoo performance rules are correct. You want as few http requests as possible.
However, on many sites, it's simply not convenient to have a single large CSS files. Your best bet is to organize your CSS into as many files as you'd like, and then use a server side script to concatenate the files. GZIP'ing that file goes a long way, too.
you should use more than one css file rather using one big file. It helps you while maintaining your site also use different definitions (classe or id names) in different css otherwise it will take the one which declared later.
But for performance reasone you can use one large file because,
One large CSS file leads to fewer HTTP requests, which can improve performance.
Several smaller files leads to easier organization which will make development and maintenance cheaper and easier.
Multiple files are good for organization, but one request to the server is definitely best. If you watch the performance videos from Google they suggest the least amount of HTTP requests possible. Each HTTP request has overhead in the handshake that you do not want to incur if you wish your site to be fast.
Check out this great script which will take your multiple CSS/JS files and turn them into one file:
http://code.google.com/p/minify/
Weigh it up.
The advantages of one CSS file
Reduced latency. Each downloadable component comes with a small amount of latency. Less files => less latency
Single point of compression
Advantages of multiple
Change one file won't require all css to be re-downloaded. The other css can be served from the cache
Structure
Only download what you need. If you don't have any forms on your page for example you don't need to download forms.css
I use simple javascripts, jquery library and many plugins , should i make one file for all if yes then what we need to "just copy and paste and code from all file into one in needed order" or any thing else need to be considerd.
as stated here http://developer.yahoo.com/performance/rules.html#num_http
Combined files are a way to reduce the
number of HTTP requests by combining
all scripts into a single script, and
similarly combining all CSS into a
single stylesheet. Combining files is
more challenging when the scripts and
stylesheets vary from page to page,
but making this part of your release
process improves response times.
and this http://developer.yahoo.com/performance/rules.html#js_bottom
The problem caused by scripts is that
they block parallel downloads. The
HTTP/1.1 specification suggests that
browsers download no more than two
components in parallel per hostname.
If you serve your images from multiple
hostnames, you can get more than two
downloads to occur in parallel. While
a script is downloading, however, the
browser won't start any other
downloads, even on different hostname
It these are god practices then
How to combine multiple javascript ito one without getting any conflict?
Is it just same as i copy all css code from all files into one or it's tricky?
For each file you have, there are two steps :
send the HTTP request to the server
download the content of the file
If you reduce the number of files by combining them, you will reduce the number of HTTP requests -- which means your page will load a bit faster ;; which is good for your users ; which is why it's recommended.
But this will make debuggig harder, which is why it's recommended to do this only on your production environment, and not on the development platform -- hence the "making this part of your release process" part.
Of course, the process of combining your files content should not be done manually -- else, you'll have to re-do it each time there's a modification made ; it should be fully automated, and done at the time you are building the archive that is going to be deployed on your production server.
Also :
You might gain a bit on the "dowload" part if using minification
You will gain a lot more on the "download" part if using compression (see mod_deflate, for Apache)
Ideally, you can use all three solutions, btw ;-)
Placing the <script> tags at the end of your page will :
allow the content of the page (which generall is what matters the most) to be displayed faster
but will only work if your page/JS is coded "correctly" (i.e. unobstrusive JS, not using JS "hardcoded" in the HTML page)
This can help too -- but might be a bit harder to achieve than combinaison+minification+compression.
There are several methods for improving javascript load performance.
Combine scripts into one file: I suggest only combining scripts you write/maintain yourself. Otherwise if the 3rd party library is updated it could be tough to update your combined file.
Use JSMin to reduce the size of javascript files, see http://www.crockford.com/javascript/jsmin.html.
Use Google's CDN for referencing JQuery and JQuery UI, see http://code.google.com/apis/ajaxlibs/documentation/, eg:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
This avoids the user loading the file at all if their browser already has it cached.
For JQuery, you should be loading from Google. Since a lot of places use Google's JQuery, it's likely that it will already be cached and even potentially compiled on the user's machine, which is about as good as one can possibly get. Cache beats all when it comes to JS optimization.
If you're using one set of JS files across all the pages on the site, you can get a similar effect by combining them into one file and using it everywhere; the browser will load it on the first page the user visits and then the JS will be cached.
However, if each of your pages uses a different set of files, the cache benefits will be vastly reduced and in fact it may be counterproductive, since the browser will detect a+b.js as a different file and will load it even if a.js and b.js are already cached. Additionally, combining the files in the right configurations for each page is a non-trivial dependency-tracking problem. In short, it's more trouble than it is worth unless you're serving millions of unique hits per day, and even then it might not be a good idea.
In any case, minification and compression should always be applied in production, since they have basically no downsides.