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
-
With generic product like screws, for example what is best practice when writing descriptions? It's tough writing unique content for something when the only difference is lengths
With generic product like screws, for example what is best practice when writing descriptions? It's tough writing unique content for something when the only difference is lengths
On-Page Optimization | | Jacksons_Fencing1 -
Can we use "top 10" in title?
Hi All, This is a query regarding title tag.I have a listing page with list of hotels in each city. To improve CTR, I used "Top 10 hotels in Boston" as title even though I am showing 25 hotels per page. The page takes about "hotels" but I didn't use "top 10" term anywhere in the page. Is this called keyword stuffing? Should I use "top 10" somewhere in the page as my title says so? Thanks for your help!
On-Page Optimization | | Avinash_12340 -
How important are image file names
Hi, How important do you think the image file names are for image search?
On-Page Optimization | | jjtech
I know it used to be the best practice a while ago but is it still important? Thanks in advance, JJ0 -
Images, using a lightbox would it go against adsense TOS?
Something I have been trying to figure out. On my website each member can have up to 10 images. When viewing a profile you can select each different photo and we currently use javascript to display this in a small box so the page does not re-load. I am curious for ideas, would we be better off having the images load on a different page? Giving more pages per visit in GA or would a lightbox type pop up be optimal. My concern is that the lightbox (similar to how Facebook displays images) would be a violation of google adsense TOS. I tried to talk with a help desk member from google regarding this but I am not even sure they could speak english to understand what I was saying. What do you guys think? When it comes to handling groups of images how would you best display them for user happiness and search engine optimisation?
On-Page Optimization | | Burto0 -
Im seeing a Dot after the / on a new project, never seen this before, any issues using this format ?
Hi Ive got a new project and seeing a dot after the forward slash something ive never seen before what does it mean ? Are there any seo issues regarding it, is it bad practice or fine to proceed using that format ? Example below; www.domain.co.uk/**.**cool-new-product Thanks Dan
On-Page Optimization | | Dan-Lawrence0 -
Is alt text on images treated like text on a page?
I'm curious if the alt tags on the images on my website are treated just like text. Thoughts?
On-Page Optimization | | dan.backowski1 -
Title tag - shorter = better?
Is it true that the shorter the Title tag is the more powerful the keywords in it are?
On-Page Optimization | | echo1
I know that the main keywords have to be at the beginning of the title but, having more words in your Title could dilute the effectiveness of your main keywords? Ex: Dallas limo service | Private car by SelectLimousine. Could the fact that I have a second part of my title affect the first part by diluting its value? I would like to rank first for Dallas car service but also for Dallas car service and Dallas limousine service. Is this good practice?0