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
-
How happy should we be about a Page 1 “See results about” SERP?
A site fell off Page 1 organic listings but now regularly appears in the right-side “See results about“ SERP. How valuable are such results, especially compared to the 1-10 organic result listing? And, are “see results about” SERPs national?
On-Page Optimization | | PKI_Niles0 -
Can I use nofollow to limit the number of links on a page?
My website is an ecommerce and we have on homepage about 470 links ! 1. We have a top bar with my account, login, faq, home, contact us and link to a content page. 2 . Then we have multistore selection 3. Then we have the departament menu, with several parants + child category links 4. Then we have a banner 5. Then we have a list of the recently sold and new products. 6. then we have an image grid with the most important cms/content pages (like faq, about us, etc) 7. then we have footer, with all info pages, contact us, about us, my account etc. There are some links that are repeted 2, 3 times. For a user it is easier to find the informations but I'm not sure how search bots (google) deal with that. So I was thinking on how can I have around 150 links to be followed. To remove the links from the page is not possible. What about to add nofollow to repeted links and some child category, as the spider will crawl the father and will access child on the next page? Is this a good strategy?
On-Page Optimization | | qgairsoft0 -
Use cookie-free domains
Is there anything simple i can install to reduce the Use of cookie-free domains, i have tried to used fooman extension but had major conflicts with other extensions? Kind regards
On-Page Optimization | | Mikaai0 -
Having a terrible time ordering the CSS Styles and Scripts in my header
Hi Guys, I am having a terrible time trying to get the correct optimized (for speed, none blocking etc) order for loading my external css and JS. I follow the recommendations from Google Page Speed or Chrome Audit and it seems no matter where I move the CSS file too (top or bottom) it complains about more blocking and stopping rendering of the page. My URL is http://www.MyFairyTaleBooks.com if some smart person out there could help me figure out what I am doing wrong and the order in which my should be organized I'd appreciate it! Oh I'm not a developer but I can re-arrange text in a file! 😉 Thank you!
On-Page Optimization | | MyFairyTaleBooks
Dinesh0 -
Have you used Reziew or Reevoo?
We are looking into companies to work with for customer reviews and ratings on our e-commerce site. We want our customers to see what others think and we want unique and fresh content on our site for Google to see and the rating star rich snippets in the SERPs. Two companies we're looking at right now are Reziew and Reevoo. Has anyone had any experience working with them? Any advice for choosing one? Or advice in general about choosing a partner for this? Any other companies you recommend?
On-Page Optimization | | dogids0 -
Should I put on a black hat and abuse Rich Snippet ?
What do people think about abusing rich snippets? I have a competitor who has started using the author tag on product pages. I guess this will be giving them an unfair advantage in the SERP. I had considered doing the same but was a bit worried about getting banned in the future. Should we go down the same path and is it likely that Google will eventually hit us with a ban?
On-Page Optimization | | DavidLenehan0 -
How Google differentiates web sites like directories?
Hi, I want to ask how google differentiates web sites like directories or company listing websites? How it understands that is a normal thing to have many links in a directory site? Are there some guides links about what to do and avoid and how to make SEO optimization for a directory web site.
On-Page Optimization | | vladokan0 -
Html and css errors - what do SE spiders do if they come across coding errors? Do they stop crawling the rest of the code below the error
I have a client who uses a template to build their websites (no problem with that) when I ran the site through w3c validator it threw up a number of errors, most of which where minor eg missing close tags and I suggested they fix them before I start their off site SEO campaigns. When I spoke to their web designer about the issues I was told that some of the errors where "just how its done" So if that's the case, but the validator still registers the error, do the SE spiders ignore them and move on, or does it penalize the site in some way?
On-Page Optimization | | pab10