Is it better to put all your CSS in 1 file or is it no problem to use 10 files or more like on most frameworks?
-
Is it better to put all your CSS in 1 file or is it no problem to use 10 files or more like on most frameworks?
-
Thanks a lot for this usefull info, it helped me understand this better.
-
Hi,
From a code management point of view - as Peter says it's very common practice to split your CSS into different files as they are then much easier to manage and maintain. You can use a tool like Yahoo's YUI compressor to minify - as Bradley says - and aggregate (merge) these files.
From a web performance point of view, less files does not always mean better performance. Web browsers used to only download up to 2 files per domain, but now it's pretty standard for them to support 6 or more. See a browser breakdown for Max Connections and Connections per hostname here: http://www.browserscope.org/?category=network&v=top. I wouldn't recommend trying to split across 6 files, but you might find that if you have one massive CSS file it will download quicker when split up.
There is another disadvantage to having a single, CSS file in that you're not making the most of web browser caching. Every time you change any CSS, all users will have to download the entire file again. Again this may not be a problem for you, but something to bear in mind.
My advice would be to point Google Pagespeed at your website's key pages and act on as much as the feedback as possible: https://developers.google.com/speed/pagespeed/. It is a fantastic resource and presents its findings very clearly.
George
@methodicalweb -
That's what I was thinking too.. Currently, most of my frameworks have 10 CSS files, which means you have 10 server requests. Page speed as in my eyes a very important factor, therefore this question...
-
You could split them up based on where they are needed but that would become complicated. The advantage of splitting CSS on a large site is really to better organise the functionality of the CSS, e.g. system.css.
Peter
-
For a production environment, I would suggest having one minified CSS file. This will reduce file size (minifying) and server requests (1 file as opposed to 10). This will help reduce page load time.
Of course, on your staging environment, or in an archive of the website, it would be best to have your stylesheets broken down into an easier to manage system. That might mean multiple CSS files, it might not - it's up to you to manage.
-
Thanks for your answer!
It makes sense, because on large sites you will need different styling on different type of pages? So when you would put it all in 1 file, al this CSS would be loaded on ALL pages, while it's only needed on some particular?
Or what's the advantage here?
-
It really depends on how big your site is and how complex your CSS. On a small site or if it has minimal CSS one is perfectly adequate. On a larger site with lots of pages and CSS it makes sense to break down the the CSS around their function.Peter
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
What is the most common problem to be solved when optimizing web sites?
ON page - What is the most common problem to be solved when optimizing web sites?
On-Page Optimization | | JordanBrown0 -
Solve duplicate content issues by using robots.txt
Hi, I have a primary website and beside that I also have some secondary websites with have same contents with primary website. This lead to duplicate content errors. Because of having many URL duplicate contents, so I want to use the robots.txt file to prevent google index the secondary websites to fix the duplicate content issue. Is it ok? Thank for any help!
On-Page Optimization | | JohnHuynh0 -
I have more pages in my site map being blocked by the robot file than I have being allowed to be crawled. Is Google going to hate me for this?
Using some rules to block all pages which start with "copy-of" on my website because people have a bad habit of duplicating new product listings to create our refurbished, surplus etc. listings for those products. To avoid Google seeing these as duplicate pages I've blocked them in the robot file, but of course they are still automatically generated in our sitemap. How bad is this?
On-Page Optimization | | absoauto0 -
Can you have more than 1 site on the first page if site look and content is completely different but keywords are the sam.
I have a client that wants to build another completely different site than his main site and optimize it to have 2 websites on the first page for his keywords. The content and look and feel of the website would be completely different. One of his competitors is doing it and getting away with it. What is your advice.
On-Page Optimization | | Roots70 -
If i only want to rank for one specific keyword and use it in all my page titles, will it negatively affect my rankings?
If i want to rank highest for one specific keyword (virtualization management, for example) and use that keyword in all the titles on my website, will that negatively affect my search rankings? SEOmoz is telling me that i should use unique titles for my different pages to ensure that they describe each page uniquely and don't compete with each other for keyword relevance.
On-Page Optimization | | foonista0 -
Negatives to using custom sub domain?
So - being photographers, we have our main website, but also, we use a hosted service for all our client galleries (www.zenfolio.com) So, in effect, we have two websites: Our main informational website Our client gallery/proofing website The client gallery has back links to our main website - so, when people are viewing their gallery, they can easily get back to our main site. We also have thrown a few of our preferred keywords in there for SEO purposes. The gallery has thousands of pages which link back to the main site. So.. the client gallery URL can either be: http://ourbusinessname.zenfolio.com OR we can have it so it uses our own domain, such as: http://gallery.ourbusinessname.com The question is, which domain name will benefit the back links more? Our custom subdomain (which links to our main domain) or, using the Zenfolio domain (which is external to our site). Or, is there no real difference either way? Or.. do I make no sense?
On-Page Optimization | | blitzna100 -
SEOMOZ suggested site optimzation change on 1 low level page
I asked this before, but did not really get an answer, so checking again. Really grateful for any help... My question is: Based on the PRO crawl Diagnostics – if we don’t make a recommended change on say 1 rather obscure page, does that just affect the SEO on that one page only, or does it potentially affect the SEO on all (more important) pages of the site? e.g. home page etc E.g. If we get a “Too many on page links” for a certain page that we don’t really want to rank for – does not fixing that particlaur page really affect the SEO for the site as a whole? Or just that 1 page (that I don't really care too much about) Hope someone is able to answer, thanks so much...
On-Page Optimization | | inhouseninja0