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
-
Using Google structured Data for SEO benefit
Hi there I run www.isacleanse.com.au and I've set up some Structured data using Google Webmaster Tools which says it will be picked up during the next Google update (has been set up over 4 weeks ago), however I dont seem to see any of the structured data for the products/reviews/ratings etc coming through in search results. Question at hand: Is there additional things I need to do in the code of the website or should this be sufficient? (see attached screenshot) szpFUpX
On-Page Optimization | | IsaCleanse1 -
Robot.txt file issue on wordpress site.
I m facing the issue with robot.txt file on my blog. Two weeks ago i done some development work on my blog. I just added few pages in robot file. Now my complete site seems to be blocked. I have checked and update the file and still having issue. The search result shows that "A description for this result is not available because of this site's robots.txt – learn more." Any suggestion to over come with this issue
On-Page Optimization | | Mustansar0 -
Does Google Analytics' Enhanced Link Attribution cause any SEO problems?
We are looking to implement Google Analytics Enhanced Link Attribution on our site. Our tech person says that this will cause SEO problems because of "duplicate URLS." I am not technical, so I don't understand this at all and can't find any research on the topic. I would like to know if there are any known SEO problems caused by putting in Enhanced Link Attribution.
On-Page Optimization | | DGM0 -
My Meta Description changes when i use different keyword in google search.
Hello everyone, I have a question for the community. I have a website with several articles and news that i manage. I set specific meta descriptions for every page but when i search in google it gives me back different meta descriptions depending on the keyword that i use to search. What i notice is that google looks in my page for the most relevant part of the text that combines with my keyword and gives me back that result. I thought that this only happen when i have an empty meta description. Anyone felt the same ? Best Ricardo www.meuportalfinanceiro.pt
On-Page Optimization | | Adclick0 -
Can I use Same Keyword for Multi pages Title Tags?
Hello All, I am working on client website and currently they are targeting One Keywords for multi pages. As I have search with Allintitle: Search query and Google display around 37 pages of website which carry same keyword in "Title Tags". I have told to client to change the "Title Tags" but they want that keyword for all relevant pages. So I want to know is that harm in Search Engine Ranking? Note: They have not done the link building activities for multi pages with same Keyword, they are using only in "Title Tags" only
On-Page Optimization | | jemindesai0 -
Im being graded an F but im number 1
im an f grade for one of my urls but im ranked number 1 for the keyword im chasing, this doesnt make sense??
On-Page Optimization | | swimby0 -
If I want to rank well on one keyword would it be better to optimize multiple pages on the website for the keyword or should I only optimize one page for that keyword?
If I want to rank well on one keyword would it be better to optimize multiple pages on the website for the keyword or should I only optimize one page for that keyword?
On-Page Optimization | | CustomOnlineMarketing0 -
One of my Campaigns have a problems!
Last week my Campaign "De Prevención" crawled many pages, and sudenly, only crawled one???? Canyou help me.
On-Page Optimization | | ClaritaMurcia0