what is heavier on load time: css or php requests?

Question

I'm using a cms (Wordpress) and have a gaggle of external stylesheets I'm loading on each page, though some of these stylesheets are page specific. Overall I'm getting bad scores from Yslow and Page Speed so I'm considering adding some php conditionals to tell the browser to load only the page specific css files as necessary. However, I'm wondering if I'm actually going to decrease load time since I'll be adding more PHP requests to for the browser.

Answer 1

This depends on your server hardware, the size of your stylesheet and on whether you have any opcode caching PHP extension (such as eaccelerator) installed.

But in most cases the network is a major bottleneck, so adding those conditionals is likely a good idea.

Answer 2

It depends greatly on the network demographic. However, network is almost always slower then CPU time, so if you can remove additional HTTP requests, you'll be better off.

Keep in mind also that browsers can only download 4 (or 6, or 8) files at a time from a single given host, so if you can combine CSS into a single file, that'll also perform better.

Answer 3

Google says 90-95% of the page load time happens on the client side: YouTube

Answer 4

By adding some php conditionals you are not adding more PHP requests to for the browser.
Honestly, PHP do not make requests to the browser at all.

And adding some conditionals to the PHP code will affect no performance. But save browser from unnecessary CSS requests.
So, it would be better of course.

Answer 5

I'm not sure what you mean by PHP requests in this case, although it sounds like you're weighing the performance impact of PHP conditional statements vs. browser requests.

It's almost always going to make a bigger impact (a far bigger impact, in fact) to reduce the number of browser requests whenever possible. Unless your conditional statements are extraordinarily complex, there will likely be a difference measured in orders of magnitude.

In the case of a relatively simple website (e.g., one that doesn't make a lot of server-side network requests or do complex server-side calculations), most page loading speed improvements can be done on the client side. I'd highly recommend Steve Souders's book High Performance Web Sites for a lot more information on this.

A page loading profiler (e.g., Firebug's "Net" tab or Safari/Chrome's "Resources" tab) will also ultimately tell you if your optimizations are worth it. While they technically only measure performance from the browser's perspective, that also includes the time that the server takes to process and respond to requests. If the request for your HTML document slows down (I doubt it will), then that's likely due to the extra PHP code. I would expect that eliminating even one unnecessary stylesheet request would far offset the performance impact of a conditional statement.

Answer 6

you should only ever have 1 (2 max) global CSS files

after that, if you need page-specific CSS, it's OK to have another 1 or 2

DO NOT load PHP files as CSS as the mere act of starting a PHP interpreter is hundreds of times more intensive than serving a static CSS file. So adding PHP conditionals inside your CSS and renaming it .PHP is NOT the answer

what you might want to investigate is merging all your CSS files into one and using special classes to trigger them

for instance, instead of doing this:

main.css

body { background-color: black; color: white; }

my-custom-page.css

body { background-color: white; color: black; }

just do this:

main.css

body { background-color: black; color: white; }
body.custompage { background-color: white; color: black; }

and add class="custompage" to your BODY element whenever you want that behaviour

because body.custompage has more qualifiers than just body, it will have higher priority and override your previous declaration. you can also do

.custompage a { color: red; }
.custompage p { font-weight: bold; }

then you can have a single, identical, CSS call for all of your pages

and browser cache loves that

Answer 7

concat all your css in to one css.

+- 2 kb wont matter, but one less request matters a lot.

csstidy could do the job.

same goes for javascript. huge effect on performance.