Optimize jQuery to Improve WordPress Speed Performance

As a wordpress theme developer I understand the importance of website speed. It not just increase your chance to be liked by google or other search engine but creates credibility among your users. If you have a nice wordpress theme then it is very much possible that it must be using jQuery to do all those animated stuff and DOM manipulation.

Yes, DOM manipulations are expensive in terms of performance. If there are lot of DOM insertions and manipulations then your site might end of with poor performance.

jQuery-to-Improve-Wordpress-Speed-Performance

I am going to discuss some basic jQuery code writing ways we all know but don’t follow. Specially WordPress Theme developers, they must write better jQuery to make awesome theme.

LOOPS

Loops are necessary and can’t be ignored.

$.each(arrayToIterate, function(i, arrayElem){
     var newItem = "<li>" + arrayElem + "</li>";
     $("#ulElement").append(newItem);
});

Above code has a performance problem. Suppose array contains 100 elements then this code will endup appending 100 times into the DOM.

We can optimize this code by collecting all the DOM insertions into one variable and then append that variable for just once. Of course it will depend on situations, but that’s the basic idea behind it.

var collection = ""; //creating a variable
$.each(arrayToIterate, function(i, arrayElem){
     collection += "<li>" + arrayElem + "</li>";
}
$("#ulElement").append(collection);

There can be other variants of this version but I think you get the basic idea.

Caching Length of Loops

As I have said, you can’t ignore loops, here is another improvement.

We often do this:

for (var i = 0; i < customArray.length; i++ ){
     //Do our stuff
}

Can you see the problem here !! Calculating unnecessary array length with every iteration.

var arrLength = customArray.length;
for (var i = 0; i < arrLength; i++ ){
     //Do our stuff
}

Use detach()

detach() is performance booster. Know the difference between hide(), remove() and detach().

api.jQuery.com says “Remove the set of matched elements from the DOM.” But keep it’s integrity i.e. all the attached events / jQuery data will exist. Useful when you have to reinsert the element again in DOM.

detach it. Build it or Modify it and reinsert it into dom. That way you will touch DOM just twice. That’s why I call it performance booster.

var table = $( "#myTable" );
var parent = table.parent();
 
table.detach();
 
// ... add lots and lots of rows to table
 
parent.append( table );

Check for Absent Elements

There is nothing bad in bad code but morality says it’s good not to do bad things. Check whether your selected elements do exists or not. If they don’t, then why bother spending valuable processing cycles.

//It runs many functions since it get to know
//there is nothing in the selection.
$(".dontShow").hide();

Improvement

var dontShow = $(".dontShow");
//Checking elements existence.
if(dontShow.length){
     dontShow.hide();
}

Better Selection Optimization

Use ID based selections with .find()

$(“#wrap .white”); // Ok Ok

$(“#wrap”).find(“.white”); //Very Fast

ID based selections are handled by document.getElementById() which is fastest.

Be Specific on Right Hand Side

$(“div.wrap .white”); //Less Optimized

$(“.wrap td.white”); // Better Optimized

### Try less specific on Left Hand Side.

Don’t be More Specific

$(“.wrap  div.box  td.white”); // Less Optimized

$(“.wrap td.white”); // Better Optimized

### Drop middle selector.

Universal Selectors are Very Expensive

$(” .wrap > * “); // Poor Selection

$(” .wrap “).children()  OR  $(“.wrap”).find() // Better Selection