Web performance: Cache efficiency exercise

It's hard, in that most sites/webapps aren't hand-crafted components... I'm waist deep in a web application now, that's very difficult to prune... It has jQueryUI AND Bootstrap controls, not to mention a dozen plugins for each. It's a significant mess to say the least. The main .JS min/merged weighs in at over 1mb (down about a mb since I min/merged them) that doesn't include site js, just the libraries (not including jquery's base).

Of course, it's easy to clear that size with some big full-screen splash images, which are more and more common... it is kind of depressing. I really appreciate the work the Polymer team has done in creating paper components, and would love to see something closer to that for React as a base, most of the Paper/Component bases I've seen are still relatively heavy, with React-Bootstrap being one of the better ones.

It's not easy coming into something that's already in place, and harder to reign in the proliferation of modules that get added in.

Does this payload size include images too? If so, it's not a surprise given the increase in screen resolution.

I agree - the sizes of pages have increased, but it doesn't seem at all like the actual content in them has grown nearly the same amount. If you don't include images, then realise that 1MB is a lot of text.

The first point everyone should know about caching is to keep things as small as possible, and in fact, loading a tiny page over the network could even be faster than a locally cached but huge page that the browser needs to spend time parsing and rendering.

I'm sure they're using "$now" as a variable placeholder for the example, it's not meant to be read as a literal header. (In PHP variables begin with $.) They're not very clear on that though, so your point is valid.

Its a PHP endpoint that generates the timestamp for $now