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
-
Need advice on the better URL structure to go with
I am rebuilding our existing website on a new platform and need advice on which URL structure would be the most ideal. The following examples are of a product that we have with a very long page title. Not all of our products have titles this long, but enough of them do to cause some concern. I was also wondering if I should end the url with file type .html or if leaving it out is better. Thanks in advance! OPTION 1. this example just uses the root domain and the entire product title separated by dashes http://ewheels.nextmp.net/staggered-full-set-br-2-20x9-ace-alloy-aff01-metallic-silver-machined-face-flow-formed-br-2-20x10-5-ace-alloy-aff01-metallic-silver-machined-face-flow-formed OPTION 2. this example uses the crawl path as well as the entire product title http://ewheels.nextmp.net/wheels/ace-alloy-wheels/ace-alloy-aff01-metallic-silver-machined-face-flow-formed/staggered-full-set-br-2-20x9-ace-alloy-aff01-metallic-silver-machined-face-flow-formed-br-2-20x10-5-ace-alloy-aff01-metallic-silver-machined-face-flow-formed OPTION 3. this example uses the crawl path and just the part number at the end since the folders already contain all the keywords necessary http://ewheels.nextmp.net/wheels/ace-alloy-wheels/ace-alloy-aff01-metallic-silver-machined-face-flow-formed/ace-2090aff01silace-20105aff01sil
On-Page Optimization | | elementmotor0 -
Page authority still on 1 after url change and 301 redirect
Hi Moz analytics suggestion to help ranking is to have a keyword or phrase in the url so I advised a client to do this they changed one of their pages urls, this page previously had a page authority of 26 since the change its gone down to 1.
On-Page Optimization | | genkee
I advised them that they must do a 301 from the old page but they took a few weeks to do this, would this of affected it why is it not showing up yet its been 3 weeks now, since the 301 and 5 weeks since the url change.0 -
Does Google use 302's to pass value to the target page?
Hi, I've received the below advice, is this correct? Throughout the site, the 302 (moved temporarily) status code is used for redirects, which Google will use to pass value to the target page. Is this correct? I was under the impression a 301 was used to pass value to the target page? Could someone explain the difference between a 301 and a 302, I'm not 100% sure. Thanks, Nathan
On-Page Optimization | | Heehaw0 -
Should i avoid using H2 to optimize my home page
Hi, my site is www.in2town.co.uk and i am looking at ranking for lifestyle magazine but i am a bit worried. The titles of the articles on the home page are h2, and i am just wondering if i should change this to h3 as it may get confusing for google. Can anyone let me know if i should keep the article titles as h2 or if i am right that they need to be changed to h3 or something else any help would be great
On-Page Optimization | | ClaireH-1848860 -
Should I put on a black hat and abuse Rich Snippet ?
What do people think about abusing rich snippets? I have a competitor who has started using the author tag on product pages. I guess this will be giving them an unfair advantage in the SERP. I had considered doing the same but was a bit worried about getting banned in the future. Should we go down the same path and is it likely that Google will eventually hit us with a ban?
On-Page Optimization | | DavidLenehan0 -
Why isn't our site being shown on the first page of Google for a query using the exact domain, when its pages are indeed indexed by Google
When I type our domain.com as a query into Google, I only see one of our pages on the homepage, and it's in 4th position. It seems though, that all pages of the site are indexed by google when I type in the query "site:domain.com". There was an issue at the site launch, where the robots.txt file was left active for around two weeks. Would this have been responsible for the fact that another domain ranks #1 when we type in our own domain? It has been around a couple of months now since the site was launched. Thanks in advance.
On-Page Optimization | | featherseo0 -
Is it a problem to have the same phone number on two websites in same niche?
is it a problem to have the same phone number on two websites in same niche? For instance if I had two completely different websites for one painting contractor client. All the content is completely different other than the logo and phone. It is in the same niche for "spokane painters and spokane painting contractor" .. will google see the same phone and penalize?
On-Page Optimization | | Superflys0 -
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