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
-
With generic product like screws, for example what is best practice when writing descriptions? It's tough writing unique content for something when the only difference is lengths
With generic product like screws, for example what is best practice when writing descriptions? It's tough writing unique content for something when the only difference is lengths
On-Page Optimization | | Jacksons_Fencing1 -
Critical Page Problems.
As I design my new pages I place them into the page optimizer. When I place the keyword in that I am trying to rank for my page is coming up as an A. With that said, I am still receiving error messages with critical fix results. Here is a screenshot of this: http://screencast.com/t/DuUrP8xM Curious on how I should fix this? The pages are directly on my blog which makes it accessible to search engines ( So I think). Any input would be greatly appreciated.
On-Page Optimization | | Jasonalanmagic0 -
Trying to SEO a site that used Header Tags for Design
I am trying to SEO a website that was built years ago and uses Header tags for design. The site must have 25 and tags used for design purpose. Is there any way to work around this problem? Perhaps a code that tells Google to ignore these as Headers? The web designers say that they are looking to fix the problem sometime this summer but you never know if that means it a month away or years away. I really want to help this website but I believe that the Header tags are one of the reasons that his site does not show in the top 100 rankings for any keywords. Any help would be great. www.wallybuysell.com Chris.K
On-Page Optimization | | CKerr0 -
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 -
Crawl Diagnostics - Duplicates and canonical problem
SEOmoz crowl diagnostic reports duplicates (title, content) issue on this addres: http://www.meblobranie.pl/biurowe/fotele-biurowe/promocje page already has canonical tag - is this a bug of crowler, or smth wrong on page?
On-Page Optimization | | SITS0 -
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 -
Does anyone have any experience with using Altruik for optimizing a retail site?
Greetings - can anyone offer an opinion on the services of http://www.Altruik.com/? They claim to be able to effectively optimize the deep pages of online retailers. I welcome any and all feedback! Eric
On-Page Optimization | | Ericc220 -
CSS background images weight impact
Hi,
On-Page Optimization | | GianniCuccu
do you think that the use of a single 1.8Mb background image sitewide could have a big negative impact and make a website disappear from SERPS? thank you0