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

ADD Facebook Post Photos Video Albums and Comments on My Website



Now it’s official. Earlier we were using some hacking technique to embed facebook posts or albums on our sites which required some coding understanding. Still that technique is still valid but not for those who are not regular coders. Facebook now has released it’s embedding feature for everyone which is quite interesting and very easy to implement.

Above is the example of such facebook video embedding.

Whatever you share on facebook becomes a post. So basically embedding a photo, video or simple post does mean embedding post either-way. Not going into much of details because this article is not for geeks, it’s for a normal user.

Where is the facebook embed code?


At the top right, you will see a down arrow on every post. If the post is shared as public or not locked in any other sense then you will see an embed post link while clicking this down arrow. Just click on that and you will get the embed code. Now paste this code anywhere on your website. What can be more simple than this.

Embed Facebook Post Photos Video

While writing this post I have found that embedding a photo is requires a little more than this.

How to embed FB Photo on My Website

Right click on the Photo and open it in a new tab. Then look for embed code just after the photo.

embed fb photo link

 

What about Video and Album Embedding?

Video embedding is just like photo embedding. Just open that video in a new tab and you will find the embed post link right below the video.

Album embedding is not yet been introduced. I guess FB must be working on it and soon they will release the embed code for that too.

I don’t see embed post link on some posts?

There can be various reasons reasons if you are not seeing embed code for some particular ones.

Not shared publicly. [Solution: No solution. That will be against privacy policy]

Shared someone’s post. [Solution: Open the original post. If it’s an image then open that image like I have explained above and you will see the embed code.]

There can be more reasons too.

Can I embed my own facebook posts on my website?  How?

Yes, you can embed your own posts with one condition. Post must be publicly shared. Go to your page and look for the embed code of your own post and paste it on your website.

Is this embed code good for wordpress blog post too?

Yes. While writing a wordpress blog post, paste the code in text mode (not in visual mode) at the place you like it to be rendered. When you will switch back to visual mode you will not see anything but the embedding will remain there. You can hit preview to check.