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 title contain the term Top 10?
One of my clients' run a hyperlocal marketplace (have different pages for each city) to hire music teachers. Should the title be "Hire Violin Teachers, Tutors from Boston"? or "Top 10 Violin Teachers of Boston". I prefer former title as it has 2 keywords - "violin teachers", "violin tutors" than latter. But my client argues that "Top 10" has a strong affinity to attract users that would increase CTR. Am I right? or Is he right? and Why?
On-Page Optimization | | Avin1230 -
If I am using Lazy Load & Ajax Technology then how "tools.pingdom.com" will consider website performance?
Hello Experts, If I am using Lazy Load & Ajax Technology then how "tools.pingdom.com" will consider website performance? I am not using this technology but few of my competitors are using this technology but still there performance in pingdom tool worst than my ecommerce site Little bit confuse please help. Thanks! Wrights
On-Page Optimization | | wright3350 -
URL Path. What is better for SEO
Hello Moz people, Is it better for SEO to have a URL path like this: flowersite.com/anniversary_flowers/dozen_roses OR flowersite.com/dozen_roses Is it better to have the full trail of pages in the URL?
On-Page Optimization | | CKerr0 -
Google Map Marker not showing up when using HTML Embed Code
Hi community, For several clients, when embedding the Google Maps, the Marker DOES NOT appear. I am copying straight from Google Maps, it appears fine in Google Maps. Is there HTML I can add or is there something wrong with the map marker to begin with? These are verified listings. Help! Thank you! Priscilla
On-Page Optimization | | FullMedia900 -
Is the use of some keywords necessary to be included in many of the pages?
Hello, I have a website about SEO and webdesign. I want to ask will mentioning these two keywords in many of my articles have any benefit for particular landing pages that I have. F.e.: I have two pages: example.com/seo example.com/web-design They are optimized and have Grade A in SEOMOZ's onpage tool for their two keywords. So my question is: Will broad use of my keywords SEO and webdesign in the text, title or alt not only on my two landing pages but also in other articles of my website also help these two pages to rank higher for their keyword. I see in Webmaster Tools (http://images.seroundtable.com/google-content-keywords-1351084751.jpg) there is an option to see the content keywords in your website. May be that shows that the content in my website is more relevant to particular topic and that also can influence the ranking of my two landing pages.
On-Page Optimization | | HrishikeshKarov0 -
Is there any problem up-dating changes on our web say 2 0r 3 time in one day or sould it be 2-3 times a month
Is there any problem up-dating changes on our web site say 2 or 3 time in one day or sould it be 2-3 times a month. Thanks Trish
On-Page Optimization | | waynecoll0 -
Which pages should use rel="canonical" links?
I have many pages showing up as multiple content. Most of the them belong to product pages for my store, login pages that show up everywhere on the site, etc. I know that I need to use the rel=canonical link in the header but after searching the forum I'm still unsure of what pages need it. Is it the pages that I don't want searched/crawled by Google or the other way around? Thanks! Crystal
On-Page Optimization | | COfashionista0 -
Do we need to use the canonical tag on non-indexed pages?
Hi there I have been working in / learning SEO for just over a year, coming from a non dev background, so there are still plenty of the finer points on-page points I am working on. Slowly building up confidence and knowledge with the great SEOMoz as a reference! We are working on this site http://www.preciseuk.co.uk (we are still tweaking the tags and content by the way- not finished yet!) Because a lot of the information is within accordians, a page is generated for each tab of the accordian expanded, for example: http://www.preciseuk.co.uk/facilities-management.php is the main page but then you also have: http://www.preciseuk.co.uk/facilities-management.php?tab=0 http://www.preciseuk.co.uk/facilities-management.php?tab=1 http://www.preciseuk.co.uk/facilities-management.php?tab=2 http://www.preciseuk.co.uk/facilities-management.php?tab=3 http://www.preciseuk.co.uk/facilities-management.php?tab=4 http://www.preciseuk.co.uk/facilities-management.php?tab=5 All of which are in the same file. According to the crawl test, these pages are not indexed. Because it is all in one file, should we add the canonical tag to it, so that this is replicated in all the tab pages that are generated? eg. Thanks in advance for your help! Liz OneResult
On-Page Optimization | | oneresult
[email protected]2