After stewing over Alex Russell’s performance budget for some time, I reduced my JavaScript footprint last night from 105KB to 18KB by removing jQuery as a dependency.1 I rewrote my use of jQuery into pure JavaScript. As a result, the site loads faster — consistently under 100ms — with zero setbacks to the user experience.

jQuery has been called a “find something do something” library, and that’s an accurate description for it. It is not a robust library for reactively perculating state changes through a UI. If you want that, you’ll use VueJS or React or Angular. Since those libraries are heavier than my simple frontend needs at this site however, I chose to just go with pure JavaScript.

When jQuery was first released in August 2006, it solved a real need, because these aforementioned frameworks didn’t exist and native JavaScript was bad at “find something do something.” Eleven years later, that’s changed. jQuery is redundant. The native abilities in JavaScript to fetch DOM objects by class name, to manipulate those classes, and to transverse up and down the DOM from a specific object, are all only slightly more verbose than their jQuery equivalents.

Sure, it’s still a wee faster writing jQuery than pure JavaScript, but hardly for someone well-versed in the native abilities of JavaScript, and whatever miniscule time savings jQuery affords is not worth the additional 82-87KB in file size that results in its use.

For the more curious, here’s a gist of the pure JavaScript for Drinking Caffeine.

  1. Of that 18KB, 16KB of it is for PrismJS syntax highlighting. If I were fine doing without that, my JavaScript would be a mere 2KB. ↩︎