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
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
-
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 -
Im seeing a Dot after the / on a new project, never seen this before, any issues using this format ?
Hi Ive got a new project and seeing a dot after the forward slash something ive never seen before what does it mean ? Are there any seo issues regarding it, is it bad practice or fine to proceed using that format ? Example below; www.domain.co.uk/**.**cool-new-product Thanks Dan
On-Page Optimization | | Dan-Lawrence0 -
Should you use Plural version of a keyword or singular
H If kw research shows that singular version of a keyword has higher search volume than plural version should you still use plural version in main on-page areas to try and catch both instances or focus on the singular ? cheers dan
On-Page Optimization | | Dan-Lawrence0 -
Title Attribute Length + Use
Hi, Is there an optimum character limit for attribute titles like there is for meta titles? On my ecommerce site I am adding about 280 characters product category page headers to succinctly describe what the page is such as in the example below; MENS BRIEFS + TANGAS We stock a range of mens briefs from leading designer brands that offer popular cuts and fabrics such as mens cotton briefs. You will also discover styles that are a little more risqué for those looking for something more daring in sexy mens briefs and tangas. I have added the following [title attribute] to this header text (MENS BRIEFS + TANGAS)so it displays the following title attribute text when you hover over it. My intention behind this is so that it enables me to provide visitors with access (via assistive reading software or hovering their cursor over the header text) to a bit more information, which they my find useful [title attribute text] - Mens briefs and tangas. These are possibly the most common and long established style of mens underwear, yet they still come in a variety of cuts and styles. The common feature amongst all men’s briefs is that they have a full rear panel that partly or entirely covers the bottom. They will have cut away legs, a pouch at the front and are supported with an elasticated waistband. Briefs and tangas can vary in the amount coverage in the side panels around the hips and top of the legs and the rear. The more revealing and skimpier tanga style usually consists of only a pouch at the front that is supported with an elasticated waistband and a minimalist rear, with no side panels that exposes the hips.[title attribute text] Is this too much? Can search engines penalise me for it? Am I using/misusing title attributes? Thanks
On-Page Optimization | | UnderMe0 -
Meta descriptions better empty or with duplicate content?
I am working with a yahoo store. Somehow all of the meta description fields were filled in with random content from throughout the store. For example, a black cabinet knob product page might have in its description field the specifications for a drawer slide. I don't know how this happened. We have had a programmer auto populate certain fields to get them ready for product feeds, etc. It's possible they screwed something up during that, this was a long time ago. My question. Regardless of how it happened. Is it better for me to have them wipe these fields entirely clean? Or, is it better for me to have them populate the fields with a duplicate of our text from the body. The site has about 6,500 pages so I have and will make custom descriptions for the more important pages after this process, but the workload to do them all is too much. So, nothing or duplicate content for the pages that likely won't receive personal attention?
On-Page Optimization | | dellcos1 -
Using fathead page keywords for directories and as a red herring to competitors
I'm fairly new to SEO and I have been reading a lot on here and the SEOmoz guides over the last few days, finding it very interesting. I am wondering about page keywords, I read that the engines no longer use them. In this thread they say they still use them because of directories. http://www.seomoz.org/ugc/why-i-still-use-meta-keywords#new-comment So I was wondering, because directories are always smaller scale than search engines would keywords that are normally high competition have more clout in them? If so then using them could be misleading to competition if they think they are the actual keywords? or might this contradict between your actual chosen keywords in the directories backlink anchor text or something?
On-Page Optimization | | Zoolander0 -
Recreate missing pages or just use 301 redirect?
Hi, on the Competitive Comparison section of the "link analysis" page the top 5 sites are linking to pages on my site that no longer exist. I'm wondering if it is worthwhile to recreate these pages that no longer exist or if I should just use a 301 redirect to some page on my site that has related info. Thanks for your suggestions.
On-Page Optimization | | PillarMarketing0 -
Where to Put Content For Product Pages - How To Structure Website?
Currently we have 300+ products. We do not have a CMS or Ecommerce site at the time being for certain reasons. Currently our site is set up with content on almost every single page. The main catagory page, explains everything on the main page, then our products page has a lot of text too. But right now, it seems as if our main pages are only ranking. In the near future I will be using a cms and purchasing a template. I noticed most Ecommerce style websites have just the product with the name and price, then when they click on the product it brings you to that page with a brief product description and some photos. My question is, does each page need content? Or can just the product page itself have content? For example, say we have a link to SHOES. Then the shoes page displays dress, casual and athletic. Then the athletic page brings you to a page with, running, tennis, cross training shoes, and so forth. Is it best to write content on this main catagory page? If so, how much? Or should we focus on putting content on the actual page of the individual product? Along with pictures and specifications? I know Content is Key and we are doing pretty well at that, however, I am starting to wondering if we have to much content or too similar content. What is the best structure to try and recieve GREAT organic rankings?
On-Page Optimization | | hfranz0