Posted by moneyfish168 on June 5, 2008 at 6:39pm
I always thought small css file will increase drupal performance. thats why I split my css depends on which node its loading. I have separate css file for forum, story .....
this is the css file i include for my drupal front page.
<style type="text/css" media="all">@import "/sites/all/modules/geshifilter/geshifilter.css";</style>
<style type="text/css" media="all">@import "/sites/all/themes/bluebreeze/css/views-list-forum_posts.css";</style>
<style type="text/css" media="all">@import "/sites/all/themes/bluebreeze/css/views-list-latest_articles.css";</style>
<style type="text/css" media="all">@import "/sites/all/themes/bluebreeze/css/views-list-top_10_articles.css";</style>
<style type="text/css" media="all">@import "/sites/all/themes/bluebreeze/css/view_list_hot_topics.css";</style>
<style type="text/css" media="all">@import "/sites/all/themes/bluebreeze/style.css";</style>today, I read an article "Best Practices for Speeding Up Your Web Site".
it suggests to use min css files to reduce HTTP Requests. but if I put all the css in style.css to make 1 http request. then the css file gonna get bigger.
how do you balance between large css file and http request?
Comments
Even you have a 100 KB big
Even you have a 100 KB big css file, it will be compresses (gz'ed) to about 20 KB, and take less time than load 2 css file, 5 KB each (http request overhead).
Drupal has a feature that merges all your css into one.
--
www.thongtincongnghe.com
Trang tin điện tử về CNTT, Viễn thông, Điện tử...
YSlow
take a look @ http://developer.yahoo.com/yslow/ -- excellent treatise on this subject.
There is also a Google video that will help u understand the intricacies.
The work is also publish as a book http://oreilly.com/catalog/9780596529307/
Thanks,
Arman.
Can also use a static file server
Let something like lighttpd or nginx serve your static files and Apache the dynamic content.
See:
http://www.lullabot.com/articles/using-lighttpd-static-file-server
as an example.
Cheers
Jason
interesting idea..
btw, i really like what i hear about lighttpd, does that work on windows btw?
There are several things you
There are several things you can do:
- Aggregate all applicable css files into one ( Drupal handles this with an MD5 hash so your good to go )
- Minify
- gzip
- do not use @import
- Serve from CDN or static file server
Vision Media - Victoria BC Web Design
Tj Holowaychuk
Vision Media - Victoria BC Web Design
Victoria British Columbia Web Design School
Aggregate all applicable css
Hi,
How i will aggregate all css and js file as a single css/ js file.
In Drupal 6 navigate
In Drupal 6 navigate to
/admin/settings/performance
Both CSS and JS aggregation are in the "Bandwidth optimizations" section.
--
Dave Hansen-Lange
Director of Technical Strategy, Advomatic.com
Pronouns: he/him/his
thanks for help. Now I have
thanks for help.
Now I have only 1 css file, 1 javascript file, I minified them and enabled gzip. now front page loads alot faster.
I test it using Yslow. if its empty cached, take about 5-6 s to load front page. if its primed cached. only take about 1-2 s, which is really good.
i wonder if theres way for me to make it even more faster when its empty cached. rite now , my javascript file is huge about 120 k, after minified, it became 60-70k i think.
this 1 javascript file includes jquery.js , drupal.js and nifty.js.
You could try putting the js
You could try putting the js at the bottom of the page if you have not already, or far future expires header which wont help your dilemma with the empty cache page load. I am not sure how large nifty.js is but that sounds far to large, many of my sites have around 7 or 8 javascripts aggregated/minified/gzipped and its usually roughly 50k. Other than that as the others mentioned you may want to find a fast CDN provider to utilize or a static file server
Vision Media - Victoria BC Web Design
Tj Holowaychuk
Vision Media - Victoria BC Web Design
Victoria British Columbia Web Design School
PS. My upcoming book "High
PS. My upcoming book "High Performance Drupal" may be something you will find of interest :)
Vision Media - Victoria BC Web Design
Tj Holowaychuk
Vision Media - Victoria BC Web Design
Victoria British Columbia Web Design School
tjholowaychuk, thanks for
tjholowaychuk, thanks for help. js file is at bottom. I kinda regret to use nifty js file, but 2 late to change my layout now.
I should post my web site here. mompreneurguide.com
..One, and only one, CSS file?
Current system (maybe I'm wrong!):
User goes to gallery page: served aggregated CSS file with standard styles and styles specific to gallery. CSS file is cached on browser side.
User goes to forum page: served aggregated CSS file with standard styles and styles specific to forum. CSS file is cached on browser side.
In this example there are two separate CSS files that contain DUPLICATE content (the standard styles).
Wouldn't it be better to serve a CSS file with all the styles, albeit huge, once and avoid requests for duplicate code. The first time the user visits your site they'll get a performance hit but after that it'll be sweet.
Another alternative would be to serve an aggregate 'essentials' CSS file and an aggregated 'page specific' CSS file. For each page the user visits the aggregated 'essentials' CSS file would be already in their cache, the only new file to download would be the 'page specific' file.
The same principles could be applied to .js files as well.
I wouldn't like to punish my visitors as they reach my site...
... as longer pageload times are the perfect excuse to abondon a site. I think it is much better work making a very fast entry page, mainly the home, and then try to speed up things, use caching and so on...
You could also even preload certain components using javascript, but punish homepage performance would be a big fault form my point of view
re: don't use @import
tjholowaychuk, why is this?
@import has problems with urls
I think that's why.
I implemented a particular version of D6 css aggregation at http://blogs.gamefilia.com (user blogs related to games in spanish) which is based on D5. It is not a simple backport because the site has a particular implementation to allow users configure their blog designs. When porting D6 css aggregation I found that urls in @imported css files where broken and fixed it.
I'm not sure if this has been fixed in Drupal yet. If not, I could try to provide a fix or something. Not sure if there's a bug report open about this. :-/
BTW, that site uses big css files and I found aggregation speeds page load times a lot. The biggest css file we generate is about 40KB. I think the key is gzipping. We use Apache2/mod_deflate for that, and squid in front of.
About css aggregation..
What we need is a next step, and that is to compress the css, and js, and not just aggregate it.
Still has too much white space.
However for debugging, we should have a readable version..
CSS is minified. I agree
CSS is minified. I agree though, my previous framework requires non-packed and non-minified JS, which is then optionally minified/aggregated and it seems to work great with the PHP port of JSMin.
Vision Media - Victoria BC Web Design
Tj Holowaychuk
Vision Media - Victoria BC Web Design
Victoria British Columbia Web Design School
has someone...
come up with a module or patch, that makes that work within drupal?