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 Schema would a Web design/development/seo ageny use and what is the schema.org link?
What Schema would a Web design/development/SEO Ageny use, and what is the schema.org link? I cannot for the life of me figure it out. ProfessionalService has been deprecated.
On-Page Optimization | | TiagoPedreira0 -
Targeting Home page is better for local seo
Hey guys i need know whether targeting homepage for local SEO is good or creating separate page for locatin
On-Page Optimization | | moz12pro0 -
Should I Use WooCommerce Tags & Attributes?
I'm helping an online furniture store search engine optimize a WooCommerce store and I'm trying to make sure our taxonomies make sense. I'd love any help you guys can give, but I'm particularly interested in determining whether we should use tags. Product attributes make sense to me, but I'm concerned to use tags because of the propensity for creating duplicate content. Thanks in advance for any help you guys are willing to give.
On-Page Optimization | | cbizzle0 -
Do sites with more pages rank better?
If a site has more pages and also has good internal linking, then logically it would rank better. Is this the case? Should I be building big (but high quality) sites?
On-Page Optimization | | T0BY0 -
301 Problem
Hi Guys, Just have a small problem with a htaccess 301 redirect. I would like to 301: www.old-domain.com & old-domain.com to www.new-domain.com. The site is exactly the same with the same directory structure so i would also like all the subpages to work. Eg: www.old-domain.com/folder/page & old-domain.com/folder/page to www.new-domain.com/folder/page Many thanks
On-Page Optimization | | MSSTORAGE0 -
Unused CSS
Is there any advantage to removing unused CSS on a wp theme template. If removed will it not merely be added with the next update?
On-Page Optimization | | casper4340 -
Is Unique Content in the First Fold Better than Below the Fold?
Hi, Understand that Google will prefer unique content to be in the first fold of the website. But if those unique content are placed below the fold (in the center, right side or at the end of page), will Google place lower priority on the content?
On-Page Optimization | | globalsources.com0 -
Post Title - Use the blog's name or not?
In the tile of my post, shoudl I used my blog's name in it at the end or emit the blog name. EX: title of post with keywords | name of blog OR EX: title of post with keywords The site's name is 3 words long, so I'm worrying that those extra words are diluting the keywords in the post's name that I'm trying to target.
On-Page Optimization | | gregalam0