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
-
Which is better? One dynamically optimised page, or lots of optimised pages?
For the purpose of simplicity, we have 5 main categories in the site - let's call them A, B, C, D, E. Each of these categories have sub-category pages e.g. A1, A2, A3. The main area of the site consists of these category and sub-category pages. But as each product comes in different woods, it's useful for customers to see all the product that come in a particular wood, e.g. walnut. So many years ago we created 'woods' pages. These pages replicate the categories & sub-categories but only show what is available in that particular wood. And of course - they're optimised much better for that wood. All well and good, until recently, these specialist page seem to have dropped through the floor in Google. Could be temporary, I don't know, and it's only a fortnight - but I'm worried. Now, because the site is dynamic, we could do things differently. We could still have landing pages for each wood, but of spinning off to their own optimised specific wood sub-category page, they could instead link to the primary sub-category page with a ?search filter in the URL. This way, the customer is still getting to see what they want. Which is better? One page per sub-category? Dynamically filtered by search. Or lots of specific sub-category pages? I guess at the heart of this question is? Does having lots of specific sub-category pages lead to a large overlap of duplicate content, and is it better keeping that authority juice on a single page? Even if the URL changes (with a query in the URL) to enable whatever filtering we need to do.
On-Page Optimization | | pulcinella2uk0 -
Do sites with more pages rank better?
If a site has more pages and also has good internal linking, then logically it would rank better. Is this the case? Should I be building big (but high quality) sites?
On-Page Optimization | | T0BY0 -
Maximum page size for better seo results?
Does really page size affect the results in search engines? And, what is the maximum in this case?
On-Page Optimization | | Eslam-yosef0 -
Difference in using dividers in TITLE TAG
Hi everyone, i know that dividers in title or even title tag doesnt have much of an impact on better rankings. I had great rankings for many keywords, not using dividers or using only one divider. However for better reading comprehension and usability, and also aesthetics i started to use the pipe as my main divider and other secondary dividers. I saw many pages drop in rankings vs other less competent and with less content pages. My format was as follows: Product Brand | Product description - Additional info or local info ie. Fiber Glass MBI | Insulation Batts for Home and Commercial use - Acoustic and Thermal Insulation I changed the format for a handful of pages, and saw immediate results on rankings and traffic on those pages. Product Brand with Product Description - Additional Info ie. Fiber Glass MBI Insulation Batts for Commercial use - Acoustic and Thermal Insulation. Does it sound like something i should implement page wide. I personally like the aesthetics of the pipe as it gives a cleaner look, but the better rankings on the changed pages with using only one divider makes me think. Does it sound familiar, or its just a coincidence, Regards,
On-Page Optimization | | JesusD0 -
A Bazaar 10 Days In WMT & Moz
Hey All, Just wondering if anyone else has experienced anything like this or has any idea what happen to one of my sites last week. I have a lot of question and unanswered weirdness that seems to be occurring in the data. It kind of plays out like this. Noticeable drop off in organic SE traffic WMT kicks out 70% of my structured schema data Moz drops DA to 14 from 17 Moz MR drops from 3.50 to 2.74 Total Indexed pages (as per SEOQuake tool bar) Drops from 500 to 224 All the images submitted via a sitemap have been unindexed according to WMT. This only a 3 month old web site with a minimal back linking profile, we're talking less than 100. No one has been working on the site, the only thing that has happen in the last month is blog post being posted. All unique content and well formatted. Then at the beginning of this week I saw traffic increasing again, and this was confirmed when WMT updated and I got my Moz update. All schema data back in WMT, with no acknowledgement of the drop; the graph just continues in a steady rise as tho nothing happened. Traffic back up to normal levels, as tho nothing happened. I have noticed a 100% increase in the amount of pages being blocked by robots.txt, I haven't changed it, nor has anyone else, it has been the same since the site was launched. I'm hoping that Moz will put the DA and MR back to where they were, and no damage will be done.\ But my question is, What the hell happened? It nearly wiped the site of the face off the earth for 10 days, how do I find out what did it, why and stop it from happening again? I have noticed the number of pages indexed by google, as quoted by SEOquake tool bar not WMT regularly jumps from anywhere from 200 to 500, Any ideas? I know their are many different elements at play here, where do I start, I can't sit back and hop it never happens again. Thank you to anyone that wants to roll their sleeves up and have ago at this one. Best, IAn
On-Page Optimization | | cookie7770 -
Wordpress when to use posts or pages
Hi Guys, I have a network of EMD sites that currently use a homepage and then we have a blog page which has 5-6 posts on. Is this the best way to do it with sites under 10-20 pages? Or should we create say 3-4 new pages/categories and drop the posts relevant to each page/category in there? Thank you Jon
On-Page Optimization | | imrubbish0 -
Alt tag using photoshop
Simple question i think. Ive started adding alt tags to images using the slice tool in photoshop. This takes up a menu were the last part of is alt tag: This way to add alt tags does work right? I used SEO-browser afterwards and couldnt see the tag. There are maybe other better ways to see if your tags are in there ? Dan L.
On-Page Optimization | | danlae0 -
Repeat Keyword Phrase or Use Variations
Is it better to repeat a keyword phrase on a page's text that you have already used once, or to use a different variation of the keyword phrase?
On-Page Optimization | | SparkplugDigital0