jQuery has become ubiquitous on the web and in WordPress. Many of its components are in the WordPress core software, the admin uses it heavily, and it’s readily available for front-end use as well. We enqueue it without thought when we need it, but should we always do so?<\/p>\n
I tend to think not, and in this article, I’ll show you why, and how you can achieve the same results without jQuery.<\/p>\n
jQuery<\/a> is awesome because it provides an easy-to-use framework<\/a> that anyone can understand and get started in minutes.<\/p>\n Complex DOM traversals and animations become a single line of strung together functions \u2013 easy-peasy.<\/p>\n In many cases, jQuery is nothing more than overhead. You may use 5% of the codebase for your DOM traversal and them a tiny bit more for changing an attribute. The more JavaScript<\/a> you need to write the more reason you have to use jQuery. If you’re only writing a couple of lines, it’s mostly unused code.<\/p>\n Expanded jQuery clocks in around 250kb and compressed it’s about 85kb. The version of jQuery core WordPress uses is only about 30kb, but that’s still way too much if you just need to select a couple of links and change their colors.<\/p>\n To put all that into perspective, if your site has 1 million unique views a month you’ll generate 30GB of traffic from unused code \u2013 what a waste!<\/p>\nWhy jQuery Is Not<\/em> Great<\/h2>\n
The Fix: Vanilla JavaScript<\/h2>\n