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
-
Should we use the same word in multiple mega menu link text?
We are currently working on a redesign of our site and I'm working on our mega menus. In the middle of this we had an agency evaluate our current/old site for improvements. (yes the timing is strange) One of the things they recommended is updating our link text in our mega menu. See image: old mega menu. The links are to pages for installation guides in our installation section. They recommended adding Installation to every link. To me this looks spammy. And using the same word in the menu and therefor every page seems spammy. The question is do we need to do this on the new site? In my opinion no. We have the links under a section for installation. Is that enough or should we use installation in every menu item? 6JcZwiU krbzxqx
On-Page Optimization | | BbeS0 -
Should I leave away the http when using the canonical tag
My site redirects http://www.anydomainblabla.com to www.anydomainblabla.com So I guess I have to do it like this Is that correct? Big thanks for your time.
On-Page Optimization | | MichaelJanik0 -
Can you use the canonical tag and rel=next and rel=prev on category pages.
We have a conflict of information between our web developers and our SEO company. We are an on-line retail company hence we have a fair number of different categories. Our site is set up with the rel=next and rel=prev tags. Our SEO company have asked us to implement canonical links on our category pages and leave the rel=next and rel=prev tags as they are. Our web developers are saying by doing this we are asking Google to ignore all of our products on all of the pages except page 1 which would mean Google would not index a lot of our products. I have looked at a few articles but I am struggling to understand which way to go. Any advice would be appreciated. Thank you in advance.
On-Page Optimization | | Palmbourne0 -
Do sites with more pages rank better?
If a site has more pages and also has good internal linking, then logically it would rank better. Is this the case? Should I be building big (but high quality) sites?
On-Page Optimization | | T0BY0 -
Efficient CSS Selectors
How much practical impact do inefficient CSS selectors have on page speed?
On-Page Optimization | | casper4340 -
Indexation problem
Hello, I have an online store specialized in offers and discounts (http://www.offertazo.com/) with an indexation problem. The products are not updated correctly. I think the problem is that when I publish a new offer, it doesn´t appear on the top of my page´s SERP. I would appreciate any suggestions. Best regwards.
On-Page Optimization | | ofuente0 -
Is it ok to put a strapline on every website page or does it confuse the bots?
We have just started doing SEO for a new client. Their web design agency has built a cms website for them and in the footer area of each page there is some global content which contains: a) the company's address b) a strapline, ie "family law specialists" I have 2 questions: I have understood from previous SEO classes I've been to, that putting the same keywords on each page of a site is a no-no as then Google won't know what page to bring up for that keyword. However, is it ok to put an address on every page and can Google tell that it is just an address? What about the strapline? Family law specialists isn't actually a keyword I'm currently tracking but I could add it to SEOMoz. however is it a problem having on every page or is it ok because it's in the footer?
On-Page Optimization | | mfrgolfgti0 -
Is it ok to use the H1 tag for bullet points?
Our search results page doesn't have a typical H1 tag because adding a true header would take up space unnecessarily. Therefore, we've assigned the h1 tag to be the breadcrumb. As filters are applied, the breadcrumb grows to include these filters. This breadcrumb is coded as bullet points, even though they're not the typical style of bullet points. Here's a screenshot: http://screencast.com/t/AjGC9iAYR3 For example, the breadcrumb: Home >> NYC Social Media Classes >> Adult >> Manhattan is currently coded as: | |
On-Page Optimization | | mevseo
| | * class="first"><a <span="">href</a><a <span="">="</a>/">Home |
| | * <a <span="">href</a><a <span="">="</a>/nyc/classes/social-media/age-adults/neighborhood-manhattan" class="Selected">Search results |
| | |
| | |
| | id="cat_social-media" type="checkbox" checked onclick="setCategory('social-media')" /> |
| | # style="font-size: 12px; display: inline;">NYC Social Media Classes |
| | <label <span="">for</label>="cat_social-media"> |
| | |
| | |
| | |
| | <nobr>id="age_adults" type="checkbox" checked onclick="setAge('adults')" /><label <span="">for</label>="age_adults">Adults</nobr> |
| | |
| | |
| | <nobr>id="nbhd_manhattan" type="checkbox" checked onclick="setNeighborhood('manhattan')" /><label <span="">for</label>="nbhd_manhattan">Manhattan</nobr> |
| | |
| | | Right now that H1 tag just relates to 'NYC Social media classes', but we'd like to expand it to include both 'Manhattan' & 'Adults' - would that be ok? And if so, would it be better to put the tag before and after the tag?0