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
-
Should I use 'Click here' as an inbound link for my cornerstone content?
Hello Should I use 'Click here' as an inbound link for my cornerstone content? Example: For a full selection of our Facebook Event Attendee packages, please click here. OR Example: Please click the following link for a selection of our Facebook Event Attendee packages. This is my product page to help you better understand the context: LikeChimp
On-Page Optimization | | xdunningx0 -
What does Appropriate Use of Rel Canonical mean?
I'm a newb and see this on my report and I don't understand what it means. Any help?
On-Page Optimization | | smartapps0 -
Wordpress category url problem.
I have set up wordpress categories but the permalinks are showing as www.mydomain.com/?cat=12 as opposed to the category name. The child categories though work fine and show as www.mydomain.com/category/chidcatgegory I've obviously got my permalink settings wrong somewhere. How do I fix this?
On-Page Optimization | | SamCUK0 -
Is it better to delete old job pages on a recruitment site?
My client (online recruitment) has over 1.5 million pages indexed, the majority of which are old job posts and listings since they began. I wanted to know if it would be better to keep all of the pages, or advise my client to delete some of the archive as these pages will no longer be attracting traffic.
On-Page Optimization | | AxonnMedia0 -
How would you target alternative names for your product with the use of internal/landing pages?
Recently, there has been some new industry names that have emerged for the type of software we provide and we want to make sure that we rank for those terms (of course!). The 3 names combined are too long for a title tag and would look odd to incl all 3 in the homepage. Any suggestions (or examples) of how this could done without looking spammy? I also don't really know where to put this within our website. e.g. enterprise portal, enterprise information portal (EIP) or corporate portal Any suggestions would be most welcome
On-Page Optimization | | alexpeps0 -
Keyword in url, which way better?
Hello, is there a difference between urls for targeting keyword "brazil tourist visa" fastbrazilvisas.com/tourist or fastbrazilvisas.com/brazil-tourist-visa ? ran the report In-Page Optimization it tells "no keyword usage in url". is there an idea behind that? thanks
On-Page Optimization | | Kotkov0 -
Image Optimization - File Name Important?
I am currently working on a site with 100+ recipes that all have image file names that are relevant, but not optimized for keyword purposes. I'm wondering - from an SEO perspective - would it be worth my time to go back through all of the images and rename them with keywords in mind? On my own site I have always done this as a "best practice" but I'm curious - does it make a difference to search engines? Does anyone have any recent research/experiences that they would like to share? Thanks!
On-Page Optimization | | EssEEmily0 -
Are xml sitemaps still in use today?
Hi, Are you still using XML sitemaps today? If yes, does it bring any benefit to your website like faster indexing of webpages or better rankings? Are you using special features like video sitemaps or sitemap index files? Best regards, Tobias
On-Page Optimization | | Tobiask-1215731