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
-
Is it better to shorten my existing url to use only keyword after domain with a 301 redirect from existing url
I have a long existing URL that has included my key word but the url has about 5 additional words in the text ( eg url would have " /super widgets in stock at the widget store " as url text after domain. keywords is super widget The URL was at the top of search results for my keyword for many years until recently. Is it better to shorten my url text to now use only my keyword " /super-widgets " after the domain with a 301 direct from my existing url to optimize it Thanks
On-Page Optimization | | mrkingsley2 -
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 -
Site Structure. Which is better?
Ideally, which model is better for site structure: 1. Homepage -> Categories -> Individual Pages (See example here http://www.wordtracker.com/attachments/bead-site-structure.gif) OR 2. Homepage -> Categories -> Sub-categories -> Indicidual Pages In the 2nd model, are the individual pages too far away from the homepage?
On-Page Optimization | | brianflannery0 -
Good idea to use hidden text for SEO purposes due to picky clients not allowing additional content?
I do SEO for eCommerce websites both in-house and for clients. A few of our clients want increased rankings but are not willing to allow us to make the changes internally to help make that happen. One of which is adding content to the webpages since 90% of them have very little to none. I have a couple clients that are extremely picky about what can be seen on their eCommerce website. They have the site setup the way they want it but it is not SEO friendly in the slightest. The pages (including homepage) have little to no content, and the only things they want changed are things visitors CANNOT see on the webpages (META, ALT Tags etc). The tactic i am wanting to use is often used by spammers but i have a legitimate reason to use this and wanted to know if this would be a good idea. They are wanting to target fairly competitive keywords but are unwilling to allow any on-page changes to add any information and keywords to help with rankings. I was thinking about adding text behind images or hide the text in whatever ways to prevent the end user from viewing it (except for the search engines). My idea was simply to add a paragraph or two of content for the search engines purely to help in ranking because they have a lot of pages that have zero content except for product image and title listings. Is this tactic recommended or does anyone have any other ideas for these type of situations. Thanks,
On-Page Optimization | | VITALBGS
Stephen0 -
404 like crazy after merging blog
So I merged my wordpress.com blog to my wordpress biz site and I now have a lot of 404's and way to many pages popping up. SEOMOZ crawl shows 290+ pages but my sitemap is only 95 pages... It is also showing on my webmaster tools for having a lot of new errors. Any ideas?
On-Page Optimization | | greenjoe0 -
Can you expound why i have to avoid using meta keywords?
I'm using the on page report card and it tells me that i have to avoid using meta keywords.I'm a little bit confused. I thought that it's important to use it all the time so search engine can better index the site. if I use SEO Quake it will tell me in the diagnostic test that I need to input keywords.
On-Page Optimization | | jsevilla0 -
Is it ok to put a strapline on every website page or does it confuse the bots?
We have just started doing SEO for a new client. Their web design agency has built a cms website for them and in the footer area of each page there is some global content which contains: a) the company's address b) a strapline, ie "family law specialists" I have 2 questions: I have understood from previous SEO classes I've been to, that putting the same keywords on each page of a site is a no-no as then Google won't know what page to bring up for that keyword. However, is it ok to put an address on every page and can Google tell that it is just an address? What about the strapline? Family law specialists isn't actually a keyword I'm currently tracking but I could add it to SEOMoz. however is it a problem having on every page or is it ok because it's in the footer?
On-Page Optimization | | mfrgolfgti0 -
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