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
-
What tools or tactics do you use to identify which ranking factors Google is weighting for your industry or keyword?
Google ranking factors are increasingly more complex and less universal. Google is emphasizing different ranking factors for different scenarios. What tools are available that can help identify which ranking factors Google may be weighting for a given query or industry? For example, are there any tools that provide correlative analysis of Google's rankings for a given keyword?
On-Page Optimization | | AdamThompson0 -
Moz Pro recommends not using a keyword more than 15 times. If there is a lot of content and the density is low, is it okay to go over that?
From MOZ on-page grader... "Recommendation: Edit your page to use your targeted keywords no more than 15 times." But if I use a keyword 50 times and the keyword density is only 2 percent, is that ok? What is more important, the raw number used or the density?
On-Page Optimization | | Jeremy-Marion1 -
Tags vs. Categories? What should I use?
I'm starting with a blog (self-hosted wordpress) and I'm thinking of the following content structure so that the readers are easily able to locate relevant content: Background: It's a blog which gives people relevant info about government jobs. To start with we will just be publishing information about these jobs but over a period of time also intend to post content that helps readers prepare for these jobs. In other words, right now it's just about detailed job notifications but in the coming months, we shall also post about preparation-related information. Typically, each of the job notifications can be bifurcated like: Jobs basis industry Banking Railways Clinical, etc. Jobs basis company ABC co. DEF co. XYZ co. etc. Jobs basis State / City City 1 City 2, etc. Jobs basis educational qualification Graduation Post-Graduation, etc. Now, I'm seriously confused how should I structure this data from the perspective of Categories & Tags such that it's reader as well as SEO-friendly. Do note that each of the government jobs post ideally falls in a couple of above mentioned categories. Thanks..
On-Page Optimization | | Shalin.TJ0 -
Google Authorship Problems
Hi, I seem to be having a few problems with getting google authors set up on Wordpress. I've set up my G+ account, put the link to my blog http://appointedd.com/blog/ and then registered it on the yoast plugin. However, I'm not sure it's set up correctly and I can't seem to be able to get it to work. I'm hoping a fine someone here has experience in this as I'm a little flustered. thanks.
On-Page Optimization | | LeahHutcheon0 -
One page dropped like a stone from rankings - why?
I have one page targeted to a specific keyword that seems to have dropped into oblivion but rest of website seems Ok and as usual. website is www.pod-exhibition-systems.co.uk search term is "banner stands" Grade is A in SEO moz tools and 3 other SEO programs. looking for an avenue to try as has been 2 weeks so far. regards Joe
On-Page Optimization | | podweb0 -
Ranking report problem
Hello, I have two things that I'm a little concerned. Ranking report is not working because all these keywords were on google first page but the report is showing the calendar sign Crawl results, I just went from 5000 warnings and errors to 4 in two weeks. It seems a little crazy
On-Page Optimization | | angelowei0 -
Am I cannabalizing my title tags or is there a better way?
I've read some info about title tags and meta, and I'm getting a little confused. If there is a previous discussion that I've missed, please redirect me. thank you. So I have a locksmith and one of his pages is on Auto Locksmith. For every car, I have a page. i.e Acura, Audi, BMW etc. Here is my title tag: Acura Car Keys| Ignition Switch Repair| Key Duplication BMW Car Keys| Ignition Switch Repair| Key Duplication Same for the rest of the different car models on the site. I previously asked a question on here about "What is Cannibalization", and after reading the answer, as well as a full article about it, I think I may be potentially cannibalizing my site with these title tags, though my SEO Moz has not indicated that I am. Should my title tags be instead... Acura car keys| Acura Ignition Switch Repair| Acura Key Duplication for each vehicle page? Additionally, all the Meta Descriptions on each vehicle page read the same as well. Is this correct? We duplicate Acura car keys, repair ignition switches, extract broken keys, replace remotes, reprogram transponder keys and provide emergency locksmith srvc. Lastly, this is for a city, yet I have not placed the city modifier in my tags nor content. Somehow it knows what city I'm in because some of my pages are ranking on Page 1, however other pages are ranking like #188, #257...So I'm just confused. Thanks for any help you can provide. Jaye
On-Page Optimization | | jayestovall0 -
Best way to do a 301 redirect when the incorrect page has rank and FB likes
Due to a site structural problem with our CMS we have alot of duplicate content pages (1 page, with multiple urls). We are in the process of setting up 301 redirects to correct the problem. Meanwhile; one of the pages with the "incorrect" URL happens to be the page google favors and also has about 100 FB "likes". The question is: Are we better off keeping the "incorrect" URL for that particular page and redirect the other url to it? Both have a page rank of 3. Thanks
On-Page Optimization | | foodsleuth0