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
-
When using long-tail keywords, should you exactly match for the url or delete "in" "to" etc.?
long-tail keyword - "seizures in adults with no history" Should you include "in and with" in the url?
On-Page Optimization | | Moleculera0 -
Should we use the same word in multiple mega menu link text?
We are currently working on a redesign of our site and I'm working on our mega menus. In the middle of this we had an agency evaluate our current/old site for improvements. (yes the timing is strange) One of the things they recommended is updating our link text in our mega menu. See image: old mega menu. The links are to pages for installation guides in our installation section. They recommended adding Installation to every link. To me this looks spammy. And using the same word in the menu and therefor every page seems spammy. The question is do we need to do this on the new site? In my opinion no. We have the links under a section for installation. Is that enough or should we use installation in every menu item? 6JcZwiU krbzxqx
On-Page Optimization | | BbeS0 -
What Are other people using in replacement for sliders?
Hello, Moz Community! I am currently trying to replace a slider on our client's site. Sliders, in my opinion, are awful, they slow load times and just don't convey a solid message. I am using Wordpress and the visual composer plugin. Any ideas are really appreciated even they may seem a bit much, if I don't know how to do it I will figure it out. I apologize as well if this isn't the appropriate place for this type of question.
On-Page Optimization | | Striventa0 -
Unused CSS Tool Recomendations
Hey moz, Im currently converting my site to mobile as its an older template based on tables it will make a lot of CSS redundant. I cant delete as i go incase a page uses it im unaware of so need to clean it up when its done. Is there a tool that crawls my entire website and highlights the unused CSS in the files? Ive found a few paying tools that claim to do so but am reluctant to just spend money on something without a recommendation. Cheers!
On-Page Optimization | | ATP1 -
SEO Onpage (where I need to put the H1/2/3)?
Hi everybody, I'm working on my new website, and I have a few questions about the Headers (<h 1="" 2="" 3="">)
On-Page Optimization | | JohnPalmer
please see the attached image, I create a mock-up for you, please tell me which H I have to put on the title.
(** most of the articles will be without sub-titles so...it will be dynamic, but try to take a look on the "sidebar" and "menu link".</h> 6ER0EpK0 -
Can Sitemap Be Used to Manage Canonical URLs?
We have a duplicate content challenge that likely has contributed to us loosing SERPs especially for generic keywords such as "audiobook," "audiobooks," "audio book," and "audio books." Our duplicate content is on two levels. 1. The first level is at our web store, www.audiobooksonline.com. Audiobooks are sometimes published in abridged, unabridged, on compact discs, on MP3 CD by the same publisher. In this case we use the publisher description of the story for each "flavor" = duplicate content. Can we use our sitemap to identify only one "flavor" so that a spider doesn't index the others? 2. The second level is that most online merchants of the same publisher's audio book use the same description of the story = lots of duplicate content on the Web. In that we have 11,000+ audio book titles offered at our Web store, I expect Google sees us as having lots of duplicated (on the Web) content and devalues our site. Some of our competitors who rank very high for our generic keywords use the same publisher's description. Any suggestions on how we could make our individual audio book title pages unique will be greatly appreciated.
On-Page Optimization | | lbohen0 -
Different pages for OS's vs 1 Page with Dynamic Content (user agent), what's the right approach?
We are creating a new homepage and the product are at different stages of development for different OS's. The value prop/messaging/some target keywords will be different for the various OS's for that reason. Question is, for SEO reasons, is it better to separate them into different pages or use 1 page and flip different content in based on the user agent?
On-Page Optimization | | JoeLin0 -
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