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
-
Duplicate content? other issues? using vendor info when selling their prodcuts?
When building content for vendors that we sell their products? best practices? ok, to copy and paste "about us" info? or will that be flagged as duplicate content.
On-Page Optimization | | bakergraphix_yahoo.com0 -
I seem to have about 10 ### tags in the sidebar. Should they be removed?
A plugin inserts H3 tags in sidebar 'read more' type links. They are tangentially related to the content (as the whole site is on ice hockey), but not directly related. Will Google think these are part of the content and be a little confused on the subject matter or is it smart enough to realize this is Sidebar material? Do I need to take action/be concerned? thanks
On-Page Optimization | | BrvceTHW0 -
Is there a tool that I can use to scrape and see metatags?
Looking for a tool that allows me to scrape the websites off a page listing of Google and output a spreadsheet with the websites and their related meta-tag details (mainly title tag). Is there a tool out there that can conveniently allow me to do this?
On-Page Optimization | | Gavo0 -
Wordpress sitemap url problem causing WMT errors
The following types of links are appearing in my webmaster tools crawl errors report under 'other'. I've noticed they are in my sitemaps ( I run wordpress and use a plugin called Google XML sitemaps). How do I get rid of this error? http://www.musicliveuk.com/bands/postname%/
On-Page Optimization | | SamCUK0 -
ECommerce & Reviews when generated by 3rd Party uses Javascript
Hi all, I am trying to optimize our product pages and I know one of the important factors is showing customer reviews. While we have plenty of reviews to show they are collected by a third party (Shopper Approved) and the way we have been told to display them on our pages is via a Javascript. My question is, is this sufficient for search engines to be able to crawl and interpret the Javascript or are we missing out on user generated content since it is displayed via Javascript. If so are there best practices or recommendations to help us? Thank you!
On-Page Optimization | | MyFairyTaleBooks
Dinesh
http://www.MyFairyTaleBooks.com <- this is the site in question if it helps.2 -
Problem with Occurrences of Keyword
At "On-Page Report " i have noticed that the only important problem my site has is the "Occurrences of Keyword " it says that i have ONLY 14.156 keyword repeat. My page ofcourse does not have so many repeats of same keyword. In fact this keyword is shown 10 times as i saw at source code of this page i tested. This report is for one page or for all pages of domain ? My keyword was two words keyword if that matters but there is no way that keywords to be repeated so many times.
On-Page Optimization | | Web-Builders0 -
CSS family names and whitespace
A CSS validation notes the following: Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space. Not sure what this means or how to fix. Help. thanks
On-Page Optimization | | casper4340 -
Which method should I use for my URL structure?
I have an existing site that is currently utilizing a structure that is like this: http://www.mysite.com/Ohio/City-of-Cleveland-PRODUCT-NAME Should I restructure it like: http://www.mysite.com/Ohio/City-of-Cleveland/Product-Name We are doing very well with very specific searches already but are sometimes coming in 2nd and 3rd place. For example: If I search for CLEVELAND PRODUCT NAME I always come up in the top three and about 60% of the time I am #1. I want to make it better. We have only launched in 4 states but plan on launching an additional 4 states over the next few weeks and I want to make sure we are building things properly. Any feedback would be wonderful. As usual, thanks everyone!! -Alex
On-Page Optimization | | dbuckles0