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
-
Internal Linking : File Name or URI/filename.html
Hi, For crawlability, what would be the best way to do internal linking. /aboutus.html or www.xyz.com/aboutus.com Would this make any difference to the website in terms of SEO or bot crawling the website? Regards, Sree
On-Page Optimization | | jungleegames0 -
Difference in using dividers in TITLE TAG
Hi everyone, i know that dividers in title or even title tag doesnt have much of an impact on better rankings. I had great rankings for many keywords, not using dividers or using only one divider. However for better reading comprehension and usability, and also aesthetics i started to use the pipe as my main divider and other secondary dividers. I saw many pages drop in rankings vs other less competent and with less content pages. My format was as follows: Product Brand | Product description - Additional info or local info ie. Fiber Glass MBI | Insulation Batts for Home and Commercial use - Acoustic and Thermal Insulation I changed the format for a handful of pages, and saw immediate results on rankings and traffic on those pages. Product Brand with Product Description - Additional Info ie. Fiber Glass MBI Insulation Batts for Commercial use - Acoustic and Thermal Insulation. Does it sound like something i should implement page wide. I personally like the aesthetics of the pipe as it gives a cleaner look, but the better rankings on the changed pages with using only one divider makes me think. Does it sound familiar, or its just a coincidence, Regards,
On-Page Optimization | | JesusD0 -
Internal anchor text. Should we still use keywords?
I have a review site that has approximately 70 category pages. I'd like to include a few of them (not all 70) in the footer of the page for easy navigation and to direct the crawlers to the best ones. Is it advisable to use anchor text of "Category + reviews" or just leave it as "Category". I certainly dont want it to be overoptimized, but I do think its a good usability cue, so I'd be surprised if it was against guidelines. Any thoughts?
On-Page Optimization | | jim_shook0 -
Using a subdomain to improve rankings
I have a pretty simple landing page that at present targets several keywords. Is a good strategy to add a blog to the site on a subdomain with pages targeting individual keywords? Will this help the main domain rank? Also is the best strategy to focus on building links to the home page or individual pages on the subdomain? As long as each page on the subdomain links back to the home page it should pass link juice back to the home page shouldn't it? Thanks in advance!
On-Page Optimization | | SamCUK0 -
Does css float affect SEO?
It is generally believed that the closer the content is to the top of the page, the better it is for SEO. If that's incorrect, please let me know. I have a 2 column site where the left menu is navigation and right side is content. Obviously, the left menu appears in the code before the content does, but I can flip them around via css float. If I do that, the content will appear on the left visually, even though in the code it still comes after the left side navigation. Do either positions affect seo?
On-Page Optimization | | cmp1010 -
I am optimizing title tags and was wondering if it makes a difference if I use "commas" in between keywords that are synonyms or should I use "and" instead?
For example: "pants, trousers at pants.com" or "pants and trousers at pants.com".
On-Page Optimization | | EcomLkwd0 -
CMS program that have indexing problems
I am working on optimizing a website that was built with an CMS program. I searched for what pages are indexed on Google using "site:url" command. For some reason none of the pages are indexed on Google. What is the best way to index these web pages?
On-Page Optimization | | webdynamics0 -
Should I use my blog posts in a sub folder
Ok I did a search and didn't see an answer to this exact question. Most of them were about if a blog should be in a sub folder and not the blog posts themselves... so here it goes. I have a blog on my website the blog itself is in /blog/ but the blog posts themselves are situated in the root folder so it looks something like mydomain.com/cool-seo-blog-post/ Is there any reason I should change this and make it read mydomain.com/blog/cool-seo-blog-post/
On-Page Optimization | | jaybrn10