memcache php caching js css and images

Question

Was after some advice/feedback if possible.

I am working on a large project and the dev team have requested we merge all the JS/CSS and cache this with memcache as one file, to speed things up.

My concern is this is not a way I'm used to working, I only want to load JS and CSS that is needed per page, for what I think is an obvious reason.

I have also been looking at some other high traffic sites and no one else seems to be doing this.

Can anyone give me some pros and cons for this approach please?

Thanks in advance

Richard

Seems like you have two questions here - should I use memcached to cache js/css and should I combine all my js/css into a single file. I'd suggest you post those two questions separately as they are really unrelated. — Eric Petroelje
– Eric Petroelje, Commented May 18, 2012 at 15:14
I guess the question is what are the pros and cons against caching one huge css and js file, and serving it against actually only using whats needed per page and letting the browser cache it, and what the pros and cons are for that? — user989952
– user989952, Commented May 18, 2012 at 15:15
@user989952 If you merge everything into one file and let the browser cache that, it will speed things up very slightly as there will only be one GET /whatever.css ... If-Modified-Since: per page load, but it will be negligible in terms of practical gain, I suspect. Even then, I can't see that memcache would help much for a single static file, plus every time a new client arrives/the cached copy expires, you have to transfer the whole lot again. In general I'm on your side with this, what they are suggesting sounds like a silly idea to me. — DaveRandom
– DaveRandom, Commented May 18, 2012 at 15:56
@DaveRandom Speed what up very slightly? Server performance or page load time? While server performance may not be dramatically improved by munging to one file (though it will help a bit), the page load time can be dramatically improved, depending on the circumstances. Page load time is what affects the user, so it's a vital factor in ensuring a good user experience. See my answer for a mathematical breakdown. — Benjamin Cox
– Benjamin Cox, Commented Jun 18, 2012 at 21:20

Benjamin Cox · Accepted Answer · 2012-06-18 21:28:07Z

3

"I've been looking at some other high traffic sites and no one else seems to be doing this"

Really? That surprises me quite a bit... it's kind of considered step one for decreasing page load times. See here: http://developer.yahoo.com/performance/rules.html. If you want to test adherence to load time best practices, you may also want to try their performance testing tool YSlow: http://developer.yahoo.com/yslow/.

Here's why this is considered a best practice: browsers have a limit of around 8 simultaneous connections, and a limit of 2 (more for non-conforming browsers) per specific server. So if you're producing multiple files for a given page then they will load somewhat serially, since your browser will make fifteen round-trips to your server, two at a time.

So let's see how this plays out. Suppose you've got fifteen files at 10k each, or you could munge them together into a 150k file. Say the latency to the server is 65ms, and the download rate is a measly 25k/sec. Let's do the math... here's the equation:

$page_load_time = ( ($simultaneous_connections * $load_time_per_file) 
                       + $latency_per_request ) 
                  * ($number_of_files/$request_cycles)

Where:

$request_cycles = max(1, ($number_of_files/$simultaneous_connections))

So, with 15 files at 10k each:

((2 * .4 seconds) + .065 seconds) * 7.5 =  6.4875 seconds

or with a single 150k file:

((1 * 6 seconds) + 0.065 seconds) * 1 = 6.065 seconds

Not a dramatic difference, but still almost half a second of user waiting time!

Now - what happens when they're on a 3g connection? Or having a little wi-fi trouble? Let's try more bandwidth (100k/sec) and more latency (250ms):

((2 * .1 seconds) + 0.250 seconds) * 7.5 = 3.375 seconds

or

((1 * 1.5 seconds) + 0.250 seconds) * 1 = 1.750 seconds

Woah! Now all those separate little files has almost doubled the page load time!

Add in a whole bunch of other files, your fancy TypeKit load, ad server load, Facebook plugins, etc. etc. etc. and this stuff starts to matter even more.

answered Jun 18, 2012 at 21:28

Benjamin Cox

6,12024 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DaveRandom Over a year ago

You do make a good case here so I shall tentatively award you a +1, although I do still disagree at least in part, I think that a good client caching header setup is more important in the long run. But I have to say you make your case well.

Benjamin Cox Over a year ago

@DaveRandom - thanks, Dave! You'll get no objection from me on the importance of good caching headers... but there's another mole to whack once that's taken care of.

Collectives™ on Stack Overflow

memcache php caching js css and images

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related