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
-
Are descriptive titles better?
I'm thinking about changing the page titles on my website and wanted to know if it is a good idea to help improve SEO! Using a page 'training and engagement' as an example (as is on the dropdown), the page title itself is actually 'Providing the skills to make the change stick.' Is that long descriptive title negatively effecting me? Or should I change it to 'Training and Engagement'? Any help would be greatly appreciated 🙂 Sam
On-Page Optimization | | sammecooper0 -
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 -
Do non-canonical pages need to worry about things like Alt Text, H1 tags, etc?
Just wanted to confirm, if we have multiple similar pages, with all of their canonicals pointing towards the prime page, does it impact SEO rankings at all if the non-canonical pages were missing alt text from their images, or shared duplicate or multiple H1 tags? Basic SEO page construction stuff? I know some will hurt user CTR but wanted to make sure that SEO crawlers don't care about them even if indexed.
On-Page Optimization | | SimonZM2 -
When To And When To Not Use AMP
Hi All, I hope someone might be able to help me with this. I am looking at implementing AMP on a website. I have been doing a stack of research into advantages of using AMP etc. However I am struggling to find an answer to when I should not / where not to be implementing AMP. More specifically I see large sites that are running AMP but it does not seem to be on all pages, how is the best way to determine when or when not I should be using AMP. Thanks In Advance, Mark
On-Page Optimization | | amevamark0 -
Using H3-4 tags in the footer or sidebars: good or not?
Howdy SEOmoz fans! Is it considered a good / bad / neutral practice to include H tags in the footer, as a mean to group a few links? Take http://www.seomoz.org/ for instance: - Voted Best SEO Tool 2010! = H2
On-Page Optimization | | AxialDev
- Looking for SEO consulting? = H3
- Product and Tools = H3 Company = H3 etc. I often see the same principle applied to sidebars. I feel like because they don't contribute to the actual content structure and because they are repeated from page to page, we should avoid them, but I have nothing to back my intuition. [+] Perhaps they are helpful for usability (screen readers) and thin added value (i.e. category names that carry more weight than if they weren't headers). What do you think? Thanks for your time.1 -
Using rel="nofollow"
Hello, Quick question really, as far as the SERPs are concerned If I had a site with say 180 links on each page - 80 above suggested limit, would putting 'rel="nofollow"' on 80 of these be as good as only having 100 links per page? Currently I have removed the links, but wereally need these as they point to networked sites that we own and are relevant... But we dont want to look spammy... An example of one of the sites without the links can be seen here whereas a site with the links can be seen here You can see the links we are looking to keep (at the bottom) and why... Thanks
On-Page Optimization | | TwoPints0 -
Duplicate content issues with products page 1,2,3 and so on
Hi, we have this products page, for example of a landing page:
On-Page Optimization | | Essentia
http://www.redwrappings.com.au/australian-made/gift-ideas and then we have the link to page 2,3,4 and so on:
http://www.redwrappings.com.au/products.php?c=australian-made&p=2
http://www.redwrappings.com.au/products.php?c=australian-made&p=3 In SEOmoz, they are recognized as duplicate page contents.
What would be the best way to solve this problem? One easy way i can think of is to nominate the first landing page to be the 'master' page (http://www.redwrappings.com.au/australian-made/gift-ideas), and add canonical meta links on page 2,3 and so on. Any other suggestions? Thanks 🙂0 -
Repeat Keyword Phrase or Use Variations
Is it better to repeat a keyword phrase on a page's text that you have already used once, or to use a different variation of the keyword phrase?
On-Page Optimization | | SparkplugDigital0