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
-
Using a hyphen in title tags and the impact of spaces
Hi I am trying to arrive at a best practice template for a title tag for my organization so does the following template still holds Primary Keyword - Secondary Keyword | Brand Name will anything be impacted if I eliminate the spaces between the hyphen, will search bots be still able to treat the first one as a priority and the second as the secondary? Primary Keyword-Secondary Keyword | Brand Name thank you
On-Page Optimization | | lina_digital0 -
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 -
Should stop words be used in titles? I'm aiming for natural title structure.
I have fully optimized on-page SEO for the following keyword (not really the one I use, but it can serve as an example): -personal driver in los angeles Even though "in" is a stop word, I prefer to have a natural (non-robotic) structure for the title - I do this by including "in". I believe that "personal driver los angeles" is too spammy and too robotic. Is this a good or a bad thing?
On-Page Optimization | | zorsto0 -
Does css float affect SEO?
It is generally believed that the closer the content is to the top of the page, the better it is for SEO. If that's incorrect, please let me know. I have a 2 column site where the left menu is navigation and right side is content. Obviously, the left menu appears in the code before the content does, but I can flip them around via css float. If I do that, the content will appear on the left visually, even though in the code it still comes after the left side navigation. Do either positions affect seo?
On-Page Optimization | | cmp1010 -
Combining CSS
One recommendation from a page speed analysis of my site was to combine CSS (external style sheets) but after reading more on the topic others say that this is not always best. Any thoughts on either approach?
On-Page Optimization | | casper4340 -
3 keywords optomize for home page. Should I create page with thoses keywords or leave it like this?
My online store home page, Furnace Filters Canada has 3 keywords with good ranking in google.ca keywords: ''furnace filters canada'' rank #1 position in google.ca keywords: ''furnace filters'' and ''furnace filter'' are on 5 or 6th position of page 1 in google.ca Those keywords are bringing most of the traffic to our site. To achieve this ranking, I had to use the On-Page Keyword Optimization, tool from seoMoz Questions: It is possible for me to create a page with the URL: https://www.furnacefilterscanada.com/Furnace-Filters or https://www.furnacefilterscanada.com/Furnace-Filter Can this improve my ranking with keywords like, ''furnace filters'' and ''furnace filter''? Is this a waist of time? If I decide to create a new page for optimization with, do I have to create one for singular and another one for plural? Creating a new page also mean removing, '' Furnace Filter'' in the home page title, until the new pages are index, I'm afraid to loss that 5th position in Google. Should I leave the home page title like it is now, '' Furnace Filter - Furnace Filters Canada - Online Shopping Store NOTE: we only do business in Canada, that is why Google.ca is more important to us Thank you, Jean Nichols
On-Page Optimization | | BigBlaze2050 -
Image Optimization - File Name Important?
I am currently working on a site with 100+ recipes that all have image file names that are relevant, but not optimized for keyword purposes. I'm wondering - from an SEO perspective - would it be worth my time to go back through all of the images and rename them with keywords in mind? On my own site I have always done this as a "best practice" but I'm curious - does it make a difference to search engines? Does anyone have any recent research/experiences that they would like to share? Thanks!
On-Page Optimization | | EssEEmily0 -
2 URLs, same content, 1 with keywords. Does this hurt me?
I'm in the process of adding some new features to our site and have a question about our URLs. Most of our URLs consist of either sitename.com/contentname or sitename.com/content/contentid I'm in the process of building a directory to those pages. The directory has a number of filters which will ultimately point to the destination page. sitename.com/filter1/filter2/contentid or sitename.com/filter1/filter2/contentname The destinations will have references. From an SEO perspective, I would think I want the filter1/filter2 version of the link indexed since this will add keywords that someone might search for. However, since the filters are dynamic, if someone just searches for contentname I would want to have sitename.com/contentname returned in the search results. Do I get any SEO benefit out of building those filter links as described if they are not the canonical links?
On-Page Optimization | | JoeCotellese810