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
-
Google is putting brandname: in title tag
Hello, I was wondering why this is happening? In html for example the title tag is something like this: keyword 1 | keyword 2 | Brand name. Title is 67 characters.. When I search in google, I see the site but it shows brandname: keyword 1 | keyword 2 Is this bad? does this mean that google doesn't like the title tag that is in the html? I tried looking it up on google, but they were outdated and I honestly didn't really see an answer to what it means when this happens. Does the brandname: affect rankings?? Have any of you dealt with this, or noticed this?
On-Page Optimization | | donnieath0 -
Is there any use in reducing organic bounce rate if they are going to leave anyway?
Is bounce rate itself an important factor? For example if my page which shows pricing for a service ranks high, people usually come to that page, then go to the contact page to see where I am. Most of them then realise I'm not close enough and exit. Now, I could give these people that info on the pricing page but that would drive my bounce rate up. Does it make a difference from Google POV?
On-Page Optimization | | Cooper10 -
What's better for SEO a page per review or a page with all reviews?
Was wondering what's better for SEO. We have a platform where consumers can read and write reviews. But the question is: is it better to give one page per company with all the reviews on it? Or should we have different pages for the specific company? Example: Itunes has a company page with all reviews on the page, but not the whole review. You have to click further to view the whole review (new page), at the moment this the current situation. What if we place the whole reviews on the company page, so you don't have specific pages for the reviews? Hopefully can someone help us out. Contact me if it's not clear or you want more extended information. Kind regards
On-Page Optimization | | MozzieJr0 -
Using H3-4 tags in the footer or sidebars: good or not?
Howdy SEOmoz fans! Is it considered a good / bad / neutral practice to include H tags in the footer, as a mean to group a few links? Take http://www.seomoz.org/ for instance: - Voted Best SEO Tool 2010! = H2
On-Page Optimization | | AxialDev
- Looking for SEO consulting? = H3
- Product and Tools = H3 Company = H3 etc. I often see the same principle applied to sidebars. I feel like because they don't contribute to the actual content structure and because they are repeated from page to page, we should avoid them, but I have nothing to back my intuition. [+] Perhaps they are helpful for usability (screen readers) and thin added value (i.e. category names that carry more weight than if they weren't headers). What do you think? Thanks for your time.1 -
Help with Appropriate Use of Rel Canonical
Whenever i enable Canonical URL through the 3DCart Control panel I get this Critical Factor error when running the on page report card: Appropriate Use of Rel Canonical Moderate fix <dl> <dt>Canonical URL</dt> <dd>"http://rcnitroshop.com/Nitro-Monster-Truck"</dd> <dt>Explanation</dt> <dd>If the canonical tag is pointing to a different URL, engines will not count this page as the reference resource and thus, it won't have an opportunity to rank. Make sure you're targeting the right page (if this isn't it, you can reset the target above) and then change the canonical tag to reference that URL.</dd> <dt>Recommendation</dt> <dd>We check to make sure that IF you use canonical URL tags, it points to the right page. If the canonical tag points to a different URL, engines will not count this page as the reference resource and thus, it won't have an opportunity to rank. If you've not made this page the rel=canonical target, change the reference to this URL. NOTE: For pages not employing canonical URL tags, this factor does not apply.</dd> </dl> Now if I disable Canonical URL then run the on page report card again the critical error goes away but I get this Optional Factor error instead: Canonical URL Tag Usage Moderate fix <dl> <dt>Number of Canonical tags</dt> <dd>0</dd> <dt>Explanation</dt> <dd>Although the canonical URL tag is generally thought of as a way to solve duplicate content problems, it can be extremely wise to use it on every (unique) page of a site to help prevent any query strings, session IDs, scraped versions, licensing deals or future developments to potentially create a secondary version and pull link juice or other metrics away from the original. We believe the canonical URL tag is a best practice to help prevent future problems, even if nothing is specifically duplicate/problematic today.</dd> <dt>Recommendation</dt> <dd>Add a canonical URL tag referencing this URL to the header of the page.</dd> </dl> So basically I disabled it because obviously a Critical error is much worse then an optional error. Is there a way I can get rid of both errors?
On-Page Optimization | | bilsonx0 -
Re SEO, Is it better to have a mega menu or one split into categories?
Hi From an SEO perspective is it better to have 1 large listed menu - over 100 internal links - or say a much smaller menu split into say 10 categories - so 10 links.
On-Page Optimization | | joeprice
This menu would be appearing on nearly all pages but not the home page In terms of the user experience, in my case, I have a feeling having 1 large menu is possibly preferable as it reduces the number of clicks the user makes to get to the desired information and categorisation can be a bit subjective, but i'd like some advice from an SEO perspective. Thanks0 -
On my site, www.myagingfolks.com, only a small number of my pages appear to be indexed by google or yahoo. Is that due to not having an XML sitemap, keywords, or some other problem?
On my site, www.myagingfolks.com, only a small number of my pages appear to be indexed by google or yahoo. I have thousands of pages! Is that due to not having an XML sitemap, keywords, or some other problem?
On-Page Optimization | | Jordanrg0 -
Using new domain in existing website
We have already a site and we want to make business in another country. We don't want to make a copy of our site because it requires more resources, but we want to use a different domain because the business will be run by a partner in that country. The idea is to make a folder in our site, www.mysite.com/countryname/ and associate a new domain www.newdomain.com, so when users go to the new domain they see the content under www.mysite.com/country/. Since de www.newdomain.com will use DNS redirection, the current domain won't be seen. Is this correct from a SEO perspective? Thanks!
On-Page Optimization | | Xopie1