Almost all websites nowadays feature that questionably awesome Facebook "like box" on their websites. I'm not saying that doing it is a bad thing, but have you ever thought about the effect these widgets have on your page loading speed ? I'm sure you haven't and that's why this post will tell you a few things about how to add an external resource to your website without affecting performance and SEO penalties caused by slow loading.
A lot of pretentious websites load external scripts by pasting something like this into the document head:
By doing this the entire page will "wait" until the myawesomescript.js has finished loading. This could get even worse if the external website is not responding.
To avoid this all you need to do is to write a tiny piece of jQuery, that loads the external resource once the page has finished loading and appends it to your document.
Important note: Do not load scripts or other external resources that are essential to your page load using this method.
Let's say you want to embed a YouTube video inside your article. Don't just paste the embed code in the body of your page. Instead, do it like this:
The above code will wait until your page is fully loaded. Then create the iframe element and append it to the body tag (You should probably put it somewhere else if you want to use this on your live website).
1. External resources that are non-essential should be created, after the page has finished loading.
2. Page performance not only affects user experience but is also an important factor in determining your SEO rankings.