Forum Moderators: not2easy
-Having an embedded stylesheet in the html for the homepage (for quick loading a page that is unique to the rest of the site and will have unique styles that wont' be needed in the rest of the site)
-Having a style sheet containing the styles of only the most highly trafficked areas (news, articles galleries, etc..) to be loaded when surfing to those pages.
-Having a style sheet for less trafficked areas or separate sections (unimportant detail pages, forums, etc..) to be loaded when surfing to those sections
My logic here is:
-to split up the CSS into more manageable sections for easy maintenance (so changing some CSS code in the main CSS file won't break any minor pages or forums that might have unique looks)
-have smaller CSS files (for faster loading and also easier to maintain and manage)
-load styles for sections that a user is most likely going to visit (styles for articles, news, wherever you get the most traffic. Have these styles all in one style sheet and loaded as soon as they hit these pages)
-not load extra styles that the user may never need (like a user visiting the site for the articles, and not participating in the forums, why load a style sheet with all that forum code?)
I hope you understand all this, it's a jumble in my head right now :p
I know the best thing to speed up a website is reduce http requests but it seems like doing this would only add 1 or 2 more requests IF the user visits those other sections. It will keep the file size down of a (most likely) large CSS file.
I hear that you should just have one CSS file but sometimes I wonder...
Let me know what you think.
Sometimes you can have a very large css file, and from the sounds of it, you would have a lot on your style sheet.
You could section it on one, or do it as you are stating above, via the sectional style sheets. I have seen numerous sites that do this with their styles.
4~css
A homepage has a unique style to it. The styles for it are ONLY used in the homepage and no where else (except for the sites wrapper which is seen on every page).
1. Do we keep this style info in our external CSS file, making it a larger file size(Though, once it's cached, who cares?)?
2. Do we embed all the styles needed to display the homepage into the HTML of just the homepage, cutting out an HTTP request and speeding up page load but also making our html file bigger?
I've seen and heard of sites embedding CSS and javascript in their homepage so it loads very quickly (check the source for Godaddy.com).
I see pro's and con's for this. What do you think?
[edited by: SuzyUK at 5:58 pm (utc) on Mar. 25, 2008]
I've added your other thread on here too as I think they are similar.
A recent post on Speeding Up Your Site [webmasterworld.com] may hold some clues and I'm sure I saw in Steve Souders video [video.yahoo.com] a recommendation to call as few stylesheets as possible and/or to call them via the <link> method as opposed to the @import method. - it's a long video but the CSS stuff is about 8mins in, I think)
perhaps there's something in there which mentioned what to do with "unique" CSS can't remember :o
have a watch it might help and let us know what you think