Although most interactive theme elements may not require jQuery, it is a popular JavaScript dependency in WordPress themes.
Since its inclusion in the WordPress core more than ten years ago, jQuery has long been the most popular JavaScript library on the internet.
Table Of Contents
−
Moreover, jQuery made it simple to get around the fact that JavaScript feature sets and implementations were still quite varied among browsers when it first gained popularity.
What is jQuery?
If you’re reading this, you probably detest jQuery and wish it wouldn’t slow down your website loading.
The Javascript toolkit jQuery allows you to create dynamic web pages with cutting-edge animations, functionality, visual effects, and more. There are around 10,000 lines of code in jQuery, yet you may only be using 10% of them.
Always use the latest version
jQuery is always being developed and enhanced. The team is always looking for innovative approaches to enhance program performance.
A selector library called Sizzle was just launched; it is said to increase Firefox processing speed by up to three times.
Google is your friend (GIYF) in this circumstance as well if you want to keep current without downloading the library several times. There are several Ajax libraries available on Google.
It Is quicker and simpler to link to the script itself. Use 1, which will automatically access the most recent edition of the library, rather than hard-coding the precise version of jQuery (1.3.2).
<script type=”text/javascript” src=http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js></script>Combine and minify your scripts
Since most browsers can’t handle over one script at once, they queue them up, which lengthens load times.
You want to combine all the scripts into a single file and use a compression tool to minify them if you intend for the scripts to be loaded on each page of your website. Faster load times result from smaller file sizes.
With an Envato Elements subscription, you can download hundreds of site templates, UI elements, WordPress themes, and plugins, among other things. Get unrestricted access to a growing collection of millions of artistic and programming resources.
Use for instead of each
Any helper equivalents are always slower than native functions.
You should always rewrite your JSON to produce an array so that you may loop more easily over any objects you get as JSON.
It is feasible to calculate how long it takes for each of the two functions to execute using Firebug.
| 0102030405060708091011121314151617 | var array = new Array ();for (var i=0; i<10000; i++) { array[i] = 0;} console.time(‘native’);var l = array.length;for (var i=0;i<l; i++) { array[i] = i;}console.timeEnd(‘native’); console.time(‘jquery’);$.each (array, function (i) { array[i] = i;});console.timeEnd(‘jquery’); |
The values shown above are 2 ms for native code and 26 ms for the “each” function of jQuery. The ‘each’ function in jQuery takes more than ten times as long as the “for” loop in native JS, at least when I tried it on my local machine, and they weren’t actually doing anything (just populating an array). This time will undoubtedly rise when working on more challenging tasks, such as updating CSS properties or performing other DOM manipulation activities.
Use IDs instead of classes
Because of how the library behaves, selecting items by ID is preferable: The item is retrieved quickly by jQuery using the getElementByID() native function of the browser to give a rapid query.
It is worthwhile utilizing a more complicated selector, creating your selector, or defining a container for the feature you need to choose rather than relying on the really useful class selection approach.
// Example creating a list and filling it with items
// and selecting each item once
console.time('class');
var list = $('#list');
var items = '<ul>';
for (i=0; i<1000; i++) {
items += '<li class="item' + i + '">item</li>';
}
items += '</ul>';
list.html (items);
for (i=0; i<1000; i++) {
var s = $('.item' + i);
}
console.timeEnd('class');
console.time('id');
var list = $('#list');
var items = '<ul>';
for (i=0; i<1000; i++) {
items += '<li id="item' + i + '">item</li>';
}
items += '</ul>';
list.html (items);
for (i=0; i<1000; i++) {
var s = $('#item' + i);
}
console.timeEnd('id');Give your selectors a context
According to the documentation for jQuery, the DOM node context was first supplied to jQuery (if none was passed, then the context will equal the document).
The selector should be used in combination with it to establish the precise query that was used. As a result, if you must use classes to specify your elements, at least properly utilize selectors to stop jQuery from scanning the whole DOM.
Cache
Avoid making the error of repeatedly using your selectors. It should be stored in a variable as a cache instead. This way, the DOM won’t have to look for your element repeatedly.
Never choose the same element more than once inside a loop; it will slow you down.
Avoid DOM manipulation
Due to the time-consuming nature of insert operations like append(), prepend(), and after(), DOM modification should be kept to a minimum.
The HTML() function and creating the list beforehand might speed up the abovementioned example.
No string concat(); use join() for longer strings
Although it might seem unusual, doing so speeds up the process, particularly when dealing with lengthy text strings that must be concatenated.
Make an array first, then put everything you want to combine into it. The string concat() function will be substantially slower than the join() approach.
var array = [];
for (var i=0; i<=10000; i++) {
array[i] = '<li>'+i+'</li>';
}
$('#list').html (array.join (''));Return false
You might have observed that every time one of your functions doesn’t return false, the page jumps to the top.
This outcome can be very unpleasant when dealing with lengthier pages.
So, rather than
| 123 | $(‘#item’).click (function () { // stuff here}); |
Write
| 1234 | $(‘#item’).click (function () { // stuff here return false;}); |
Don’t use <script> to jQuery in your header.php
Frequently, websites will load JavaScript, favicons, and style files in the header (which in WordPress is in your header.php file in your theme). The exception to this is JavaScript. Keep in mind that JavaScript doesn’t accomplish much until the page has completely loaded (according to the DOM) and that HTML loads from top to bottom.
Therefore, it is stupid to delay as much as the very first line of HTML on your website while 18 JavaScripts are being loaded that it cannot yet use.
Moving all of your <script> references to your footer.php file, which is called at the bottom of your site, is the simplest method to get around this.
Jay
I've worked for WooRank, SEOptimer, and working on a cool SEO audit tool called SiteGuru.co. Now I have build Linkilo and SEO RANK SERP WordPress theme. I've been in the SEO industry for more than 5 years, learning from the ground up. I've worked on many startups, but also have my own affiliate sites.
TRY OUR FULLY SEO-OPTIMIZED WORDPRESS THEME FOR AFFILIATE MARKETERS!
No need to hire SEO experts anymore to fix your site technical SEO issues
IMPROVE YOUR SITES RANKING TODAY