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
-
301 Redirects - Large .htaccess file question
We are moving about 5000 pages from root into different folders. We need to individually 301 each page because the are sitting at root level now: mysite.com/page.com We want to move them to: mysite.com/folder/page.html etc I dont think redirect match can works because of the different files names and folders they are being moved in to. Will 5000 entries in .htacess slow site loading? Any other suggestions how to handle?
On-Page Optimization | | leadforms0 -
I seem to have about 10 ### tags in the sidebar. Should they be removed?
A plugin inserts H3 tags in sidebar 'read more' type links. They are tangentially related to the content (as the whole site is on ice hockey), but not directly related. Will Google think these are part of the content and be a little confused on the subject matter or is it smart enough to realize this is Sidebar material? Do I need to take action/be concerned? thanks
On-Page Optimization | | BrvceTHW0 -
Robot.txt file issue on wordpress site.
I m facing the issue with robot.txt file on my blog. Two weeks ago i done some development work on my blog. I just added few pages in robot file. Now my complete site seems to be blocked. I have checked and update the file and still having issue. The search result shows that "A description for this result is not available because of this site's robots.txt – learn more." Any suggestion to over come with this issue
On-Page Optimization | | Mustansar0 -
Image File Names for eCommerce?
Hi everyone! I'm wondering about naming my product photo file names for an E-Commerce site. Let's say I say have product named Abe Lincoln in the **Print **category for sale with 4 images, relatively similar but from different views for example.Could I name them as follows? 1) abe-lincoln-print.jpg 2) abe-lincoln-print-side-view.jpg 3) abe-lincoln-print-close-up.jpg 4) abe-lincoln-print-font-view.jpg Or is that too many keywords for the page? Should I be worried about keyword stuffing? Plus once I add in title and alt tags and descriptions this could also increase the keyword count for "abe lincoln print"?
On-Page Optimization | | TheFlyingSweetPotato0 -
Break in H1 tag - big, small or no problem?
Hi, I've just taken on a new ski client who offers ski instructor courses. The landing page for the keyword [ski instructor courses] was created by the web agency but with no heading tags... http://www.snowrehab.com/ski-instructor-courses Subsequently they've put them in but I've noticed the H1 tag has a break in it where 'ski' is on a separate line to 'instructor courses' Is this an issue that need to be addressed? Also I can't look up the page in the Moz on-page grader - any ideas why? Many thanks! Richard
On-Page Optimization | | richardpatey0 -
www vs no-www duplicate which should I use
site is no-www I caught this in archives. Will this by my fix? Mike Davis Online Marketing Manager at McKesson May 22, 2013 Easy fix: in your .htaccess file, use this RewriteEngine On
On-Page Optimization | | touristips
RewriteCond %{HTTP_HOST} !^domain.com
RewriteRule (.*) http://domain.com/$1 [R=301,L] Remember to replace domain.com with your domain name.
Enjoy!0 -
Ecommerce- Keyword use in Product links on Category page
I'm wondering how Keyword use in Product links on Category pages can affect a pages rank? I have 1 site where this seems to be an issue but not on all categories. For this site, a site: keyword search ranks the category page as no.1 in the SERPS but a non-site: search shows 1 of the many products within the category as the highest ranking page (currently 20 in google) on this site. This product is probably the least likely to generate a conversion due to it's cost so this is less than ideal. The plural search of the keyword shows the category page and it ranks higher than the keyword itself (currently 9 in google) Category name and URL = keyword. The category is paginated with 12 products per page. Product URL and anchor text is brand-model-type (where type = keyword) I'd like to keep the product URLs and anchors as they are if I can as they are well searched terms themselves but I want to optimize a category page to rank for the keyword itself. Have any of you overcome a similar issue? Would adding more text to the category page dilute the issue?
On-Page Optimization | | MarcOZ0 -
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