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
-
I have speed problem in google webmaster
if i show my website to robots with less code (robots version ) is it harmful for my website ? my website is wordpress and i can't optimze it more plz help me
On-Page Optimization | | rhesti3280 -
One Main Brand Domain - One EMD which Ranks Better
Hello SEO MOZers! We have one one main ecommerce site and I have just discovered we have an EMD sitting on a .co.uk, for one of our premium product ranges, and it actually outranks our main website. It appears on page one. My question is how do I handle the EMD? I don't want to start building authority to this site, as we are currently developing the main brand site, however I can't ignore that it is ranking. There is relatively little content. There are links on the page (it's only one page) that go through to the product section on the main site. But should I 301 redirect it? What would be your advise? I want to capitalise on any traffic we could benefit from, and ultimately I want the main site to rank better for this product's keywords. Any help would much appreciated.
On-Page Optimization | | CarlaAction1 -
Is there any problem up-dating changes on our web say 2 0r 3 time in one day or sould it be 2-3 times a month
Is there any problem up-dating changes on our web site say 2 or 3 time in one day or sould it be 2-3 times a month. Thanks Trish
On-Page Optimization | | waynecoll0 -
Ranking report problem
Hello, I have two things that I'm a little concerned. Ranking report is not working because all these keywords were on google first page but the report is showing the calendar sign Crawl results, I just went from 5000 warnings and errors to 4 in two weeks. It seems a little crazy
On-Page Optimization | | angelowei0 -
2013: Top 10 content SEO tips survey
Hi folks, I was asked to write a short top 10 SEO list for editors. My search returned outdated results and SEO is changing fast these days… So, here is my little survey: What are the best settings for these most important things: Title tag: How many characters / words? Best keyword positions? Best tricks? Meta description: How many characters / words? Best keyword positions? Best tricks? Meta keywords: Use them? How many? H1 tag: How many characters / words? Best keyword positions? Best tricks? H2-H6 tags: How many characters? Best keyword positions? Best tricks? Image alternative text: How many characters / words? Best tricks? Text length: Minimum, maximum? What’s better: 1 long article or split an article in several pages? How much links within an article? Min? Max? Usage of keywords within links? Your favorite SEO tip? I would love to hear your thoughts 🙂 Best wishes,
On-Page Optimization | | GeorgFranz
Georg.0 -
E-Commerce SEO: What are the Schema.org properties you use?
Quick question about Schema.org for products. What are the properties you like to list on product-pages for an E-Commerce? Thanks.
On-Page Optimization | | AdrienOLeary0 -
Better to update or add articles?
Hi, We have an online gift store and we write new blogs every year. Question is, if we already had a blog that's called 'Top Valentine Gifts' from last year,should we update the blog content with the most updated data, or should we add a new blog called 'Top Valentine Gifts 2012' and rename the old one to 'Top Valentine Gifts 2011' (and 301 redirect the old URL)? Which one is more beneficial in terms of SEO?
On-Page Optimization | | Essentia0 -
Use 301 redirects when deleting old products?
I'm removing old products (wines) from my site, and I've been using 301 redirects for each product page back to the winery page. My question is, am I using best practice? I want people who search for these now nonexistent products to go to the winery page where they will see what is now available. But does google approve? I've also tried leaving the product's page intact but saying that it is no longer available and putting a link in the text that points to the winery page. Which is better, in the eyes of the god google? Thanks!
On-Page Optimization | | JeanYates0