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 Do You Put For Key Words On A Home Page?
Hello, I am a physical therapist and own the company Back In Motion Physical Therapy. We specialize in orthopedic, sport, and spine injuries in Fort Myers, FL. My question is for your home page do you put the keywords of the surrounding city and cities such as Fort Myers, Cape Coral, etc? Secondly, should I have a keyword of physical therapist and physical therapy as well? Lastly, do I need to use those words on my home page for it to become relevant from google? Check out my site here: www.backinmotionsspt.com
On-Page Optimization | | gray06201 -
Ranking problem.
Hello, Using Moz I can see that my ranks for my site ZenPlugs.com for keywords such as 'ear plugs' and 'molded ear plugs' and several other keywords aren't as high as other sites with similar DAs. I can't see why, am I missing something? Many thanks, Toby
On-Page Optimization | | T0BY0 -
Grade F page on Moz positions No 1 on Google Keywords not contained
Hi I am trying to understand why a page list in position 1 on Google despite the fact it does not include the search terms anywhere in the page source. One of our sites has been in that position for years has great content and links for the key word terms so how can the other page overtake it and all of the other keywords without so much as a sniff of the keyword in the URL, Meta, content or images. It grades F on Moz! How can I discover the technique that has been used. This really is black art stuff or do Google accept payment from major corporations to list their pages irrespective of content?
On-Page Optimization | | Eff-Commerce0 -
Removing old URLs that are being used for my on page optimization?
Is there a way to remove old URL's that are still being used for my keywords for my on page optimization? They are giving me grades of F since they no longer exist and if I change the URL to the current one, the grade becomes an A, but they are still showing after the new crawl.
On-Page Optimization | | Dirty0 -
Problem with fresh content on homepage
On my site my homepage acts as sort of a landing page that is geared towards getting the customer sign up (almost like a PPC landing page aside from a few navigation options...about, blog, contact and the legal docs in the footer). My blog is geared towards other businesses in the industry and the like minded tech people. My problem:
On-Page Optimization | | JasonJackson
From a user perspective I don't feel that blog snippets would add anything useful to the homepage. However, I feel like I fresh content would help my SEO endeavors. Suggestions? Note:
Should be mentioned that all my social stuff is deeply integrated into my /blog so importing tweets, for example, is out of the question.0 -
Are xml sitemaps still in use today?
Hi, Are you still using XML sitemaps today? If yes, does it bring any benefit to your website like faster indexing of webpages or better rankings? Are you using special features like video sitemaps or sitemap index files? Best regards, Tobias
On-Page Optimization | | Tobiask-1215731 -
Should a no-follow tag be used on a ssl or trust seal?
I'm just wondering if there would be some benefit if this was followed since the purpose of it is to add trust to your site.
On-Page Optimization | | BradBorst0