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
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
-
I have speed problem in google webmaster
if i show my website to robots with less code (robots version ) is it harmful for my website ? my website is wordpress and i can't optimze it more plz help me
On-Page Optimization | | rhesti3280 -
What is the best tag to use for your Logo ?
Hi, I'm wondering what is the best tag to use on your logo. We're currently using h1 and i want to scrap that ASAP.
On-Page Optimization | | Alex.harvey.Cortex0 -
Screaming Frog - What are your "go to" tasks you use it for?
So, I have just purchased screaming frog because I have some specific tasks that need completing. However, looking at Screaming Frog generally, there is so much information I was wondering for those who use it, what are the top key tasks you use it for. I mean what are your "go to" things you like to check, that perhaps are not covered by the Moz Crawl reports. Just looking for things I perhaps hadn't thought about, that this might be useful for.
On-Page Optimization | | TheWebMastercom0 -
How to overcome blog page 1, 2, 3, etc having no or duplicate meta info?
As the above what is the best way to overcome having the same meta info on your blog pages (not blog posts) So if you have 25 blog posts per page once you exceed this number you then move onto a second blog page, then when you get to 50 you then move onto a 3rd blog page etc etc So if you have thousands f blog pages what is the best method to deal with this rather than having to write 100s of different meta titkes & descriptions? Cheers
On-Page Optimization | | webguru20141 -
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 -
ECommerce & Reviews when generated by 3rd Party uses Javascript
Hi all, I am trying to optimize our product pages and I know one of the important factors is showing customer reviews. While we have plenty of reviews to show they are collected by a third party (Shopper Approved) and the way we have been told to display them on our pages is via a Javascript. My question is, is this sufficient for search engines to be able to crawl and interpret the Javascript or are we missing out on user generated content since it is displayed via Javascript. If so are there best practices or recommendations to help us? Thank you!
On-Page Optimization | | MyFairyTaleBooks
Dinesh
http://www.MyFairyTaleBooks.com <- this is the site in question if it helps.2 -
How do I get rid of duplicate page titles when using a php site?
Hi. I have an e-commerce site that sells a list of products. The list is divided into categories and then those categories for the various pages on the site. An example of a page title. would be given root/products.php?c=40 another page would be given root/products.php?c=41 Is there a way to structure the site with SEO in mind?
On-Page Optimization | | curtisgibbsiii0 -
Re SEO, Is it better to have a mega menu or one split into categories?
Hi From an SEO perspective is it better to have 1 large listed menu - over 100 internal links - or say a much smaller menu split into say 10 categories - so 10 links.
On-Page Optimization | | joeprice
This menu would be appearing on nearly all pages but not the home page In terms of the user experience, in my case, I have a feeling having 1 large menu is possibly preferable as it reduces the number of clicks the user makes to get to the desired information and categorisation can be a bit subjective, but i'd like some advice from an SEO perspective. Thanks0