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 heading tag to use on sidebars and footers
Hello, I have some awareness of how to use H1, H2 and H3.
On-Page Optimization | | kowston
H1 only once per page as the main page heading.
H2's should be subheadings, H3's are sub-sub headings of the and so on.
This structure gives hierarchy and opportunities to use additional keywords in an order of priority. I can clearly understand how this would work in an article but what about other content on the page such as global/frequently repeated elements like sidebars and footers? I see sites - and in particular, I have examed SEO focused sites - that use H3, H4 and H5 in these instances seemingly giving themselves scope to use at least H2 tags as part of the page content and break out of the structure hierarchy when dealing with sidebars and footers. I suppose this could signal theses headings are sections of the page that are less relevant than the main article content but that is just an assumption. I don't know what is correct.0 -
How to overcome blog page 1, 2, 3, etc having no or duplicate meta info?
As the above what is the best way to overcome having the same meta info on your blog pages (not blog posts) So if you have 25 blog posts per page once you exceed this number you then move onto a second blog page, then when you get to 50 you then move onto a 3rd blog page etc etc So if you have thousands f blog pages what is the best method to deal with this rather than having to write 100s of different meta titkes & descriptions? Cheers
On-Page Optimization | | webguru20141 -
How to rank well on 2 keywords - 2 separate pages or 1 combined page
Hi, I have a website about allergy. We ar developing new content, and through keyword research I have discovered that "dog allergy" and "cat allergy" are both very common searches. However, the cause, and symtoms are very alike for these 2 types of allergy so it would make sense to combine the two allergies on one page. So my question is: What do I choose to increase my chances to ranke the best I can for both "cat allergy", and "dog allergy"? Should I develop 2 separate pages for cat & dog allergy or should I do a combined page? (We would of course review the texts so no duplicate content/text would be used if we chose to have 2 pages) I would be so greatful for your advice!! Kind regards, Jeanette
On-Page Optimization | | Mylan-GDM0 -
Using Transcription Service For Videos - Have Question Around Search and Spiders
Hi All, So I have put together a weekly video series on security topics. I have read an SEOmoz post around how you can boost SEO by adding the transcription to the page, which makes perfectly good sense. My question is, can I include the first couple of paragraphs and then have a "read the full transcription" so when the user clicks, the rest of the content appears? Do the search engine spiders only crawl the first two paragraphs in this instance or do they crawl the whole thing even though the entire content is not on the page? I dont mind making the page longer and including the entire transcription if it is easier for SEO but if there is no difference, than I think the first option would be the best user experience. Thanks for the help Pat
On-Page Optimization | | PatBausemer0 -
Page authority 1 for new URLs
Hi There Quite a beginner question. I have changed url structure last week and is already avaliable on google.What i find strange is that the PA reported by SEOMOZ is 1 and there's no google cache. If the page has to crawled yet, why it's avaliable on google index already? Dario
On-Page Optimization | | Mrlocicero0 -
What should I put in the image ALT and title text for blogger?
Hello, I wanted to know what should I put in the image ALT and title text for blogger. I've read so many damn articles about ALT text and Title text for blogger; nothing explained what I put in it though. What am I supposed to put in it that will help me with my on page optimization? (Stuff like do I use spaces or dashes, do I put my keyword in there, how many characters should I not exceed, do I put one word or two words?) If I have a picture of a backpack, what should the alt text be? What if I have 10 different pictures of backpacks on 1 page? How about if I had a backpack next to a tv in an image? A specific answer or a detailed one is nice!
On-Page Optimization | | 6786486312640 -
Robots.txt file
Does it serve any purpose if we omit robots.txt file ? I wonder if spider has to read all the pages, why do we insert robots.txt file ?
On-Page Optimization | | seoug_20050 -
How many times to use keyword
So if I have my main site, blog and article directory section, can I use keyword in all three places, but obviously different, unique content? And if so, can I link them to make it even more powerful?
On-Page Optimization | | azguy0