What’s a masterfully crafted responsive GUI good for if the user experience is ruined by a site’s horrible performance? You are right: nothing. At all.

“jQuery is hogging resources.”

“Don’t use jQuery if you want your site to be fast on iPads.”

Opinions like these can be heard more and more lately in the developer world – jQuery is said to be a heavy-weight library and its reputation is slowly decreasing. But what if you’re working on code that mostly deals with DOM elements? And you really would benefit from using jQuery? Use it! jQuery is still one of the best libraries to even out browser bugs and inconsistencies and making DOM manipulation easy. But make sure you use jQuery in a way that adds as little to your page weight as possible. There are quite a few steps that can be taken to ensure your site is as fast as can be although jQuery is part of it.

1. Use (minified!) jQuery 2.x if possible.

jquery.com currently offers two versions of jQuery on their download page: 1.x and 2.x. Their API is the very same. Their difference lies in browser support…and file size! If you don’t absolutely need to support Internet Explorer 6, 7, and 8, go with jQuery 2.x. Comparing the minified versions of 1.11.3 and 2.1.4, this saves you 12 KB.

Speaking of minified – make sure that you’re loading the minified script, no matter what version you are using. This saves over 150 KB.

2. Load it at the end of your page.

When loading a page, your browser traverses the source code from top to bottom. When hitting a <script>, it reads through the entire code even of external JS-files before going on with the rest of the page. While it does that, contents that are located below the <script>  in your code can not be displayed yet.

To prevent scripts from blocking site rendering, it is a good practice to move them to the end of your html code, right before your closing </body>  tag. This way your contents are displayed, so the user can already look at them, and functionality is added with a slight delay.

3. Customize jQuery with grunt.

Think you’ve done everything you can to reduce file size by using the latest minified version of jQuery? It gets much better. You can now build your own jQuery and simply leave out modules that you don’t need (or just add them as needed). It’s easier than you might think.

Grunt makes it possible. If you are not familiar with this JavaScript task runner you should definitely have a closer look at it, it can save you tons of precious time when developing websites. What modules exist within jQuery and how to exclude them is described on jQuery’s GitHub page. It’s a piece of cake, especially if you are already familiar with using grunt.

4. Cache selectors in a variable.

By taking the first three steps, you have done quite a bit to improve your page weight and your site will show up faster in your browser. But what about jQuery itself – some of its functions are executed slower than vanilla JavaScript? This is true but it is quite the effort to test and research which functions are slow in which browser and if you can live without them but still support all browsers in your system specification.

However, a golden rule to follow is to store selectors in a variable instead of using them over and over. Every time you are using a jQuery selector such as $(“#element”) , jQuery will work through the DOM to find the element. By assigning it to a variable and reusing that, it only has to find the element once.

 
// So instead of using this
$('#element').width('100px');
$('#element').show();

// always do this
var $element = $('#element');
$element.width('100px');
$element.show();

It is surprising how often even more advanced developers use the same jQuery selector over and over in their code – even in loops. The impact on page performance is for example examined in this jsperf test.

[mc4wp_form]