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 -
Which is better? One dynamically optimised page, or lots of optimised pages?
For the purpose of simplicity, we have 5 main categories in the site - let's call them A, B, C, D, E. Each of these categories have sub-category pages e.g. A1, A2, A3. The main area of the site consists of these category and sub-category pages. But as each product comes in different woods, it's useful for customers to see all the product that come in a particular wood, e.g. walnut. So many years ago we created 'woods' pages. These pages replicate the categories & sub-categories but only show what is available in that particular wood. And of course - they're optimised much better for that wood. All well and good, until recently, these specialist page seem to have dropped through the floor in Google. Could be temporary, I don't know, and it's only a fortnight - but I'm worried. Now, because the site is dynamic, we could do things differently. We could still have landing pages for each wood, but of spinning off to their own optimised specific wood sub-category page, they could instead link to the primary sub-category page with a ?search filter in the URL. This way, the customer is still getting to see what they want. Which is better? One page per sub-category? Dynamically filtered by search. Or lots of specific sub-category pages? I guess at the heart of this question is? Does having lots of specific sub-category pages lead to a large overlap of duplicate content, and is it better keeping that authority juice on a single page? Even if the URL changes (with a query in the URL) to enable whatever filtering we need to do.
On-Page Optimization | | pulcinella2uk0 -
How to peroperly use h1 , h2 and h3 tag on your website.
Is it better to have different h1 for each page or have the same h1 across the site. I am using h1 fin wordpress for beside that I have 4 more h1 in the same page how to properly use h2 and h3 can we have muliple h2 on a page. what would be an ideal hx tag order be ? h1
On-Page Optimization | | conversiontactics
h2
h2- h3 h3 If anyone can provide some answers Many thanks0 -
Can you use multiple keywords for on page for ranking?
I understand using a keyword (or phrase) and correctly building that into the site structure (URL, Title Tag, body, etc). So, this question is going to be elementary, but I am starting to question myself as I write content. I have a client, for example, that has a new site and a page for Chocolate cakes. Now the other pages they built out are for Cheesecakes, Cupcakes, etc. So we optimized the Chocolate cakes page with our keyword throughout (Getting an A+ on page content grade). But now they are asking me why they can't be found for chocolate eclairs, chocolate fudge cake, devils chocolate cake, double chocolate cake, etc. My first quick answer is that they should build more pages. But am I doing this wrong?
On-Page Optimization | | cschwartzel0 -
Should you use Plural version of a keyword or singular
H If kw research shows that singular version of a keyword has higher search volume than plural version should you still use plural version in main on-page areas to try and catch both instances or focus on the singular ? cheers dan
On-Page Optimization | | Dan-Lawrence0 -
Which pages should use rel="canonical" links?
I have many pages showing up as multiple content. Most of the them belong to product pages for my store, login pages that show up everywhere on the site, etc. I know that I need to use the rel=canonical link in the header but after searching the forum I'm still unsure of what pages need it. Is it the pages that I don't want searched/crawled by Google or the other way around? Thanks! Crystal
On-Page Optimization | | COfashionista0 -
Problem with left navigation links on an e-commerce site diluting pagerank
I'm trying to decide how to deal with left navigation links on my e-commerce website diluting the amount of link juice passed to other links on the page. Any suggestions? Only options I can think of are: Nofollow the links use javascript (I'm assuming googlebots are still able to find these) Leave them as they are as followed links
On-Page Optimization | | Ralzaider0 -
Why does SEOmoz use /blog/content-title vs /category/content-title? Any difference?
Assume a brand new blog being designed and all other things equal. What are the pros & cons between using the url structure /blog/content-title vs. /category/content-title? Note:
On-Page Optimization | | JasonJackson
Both scenarios would be using categorical archiving.0