Test HTTP Requests Tools Blog Learn Quizzes Smile API Log In / Sign Up
Test HTTP Requests Tools Blog Learn Quizzes Smile API Log In / Sign Up
« Return to the tutorials list
We have updated the website and our policies to make sure your privacy rights and security are respected.
Click here to learn more about the way our website handles your data.

Remove this message.

Best way to load your external content using jQuery

Difficulty: 40 / 50 Tweet

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.

Asyncronously load your scripts

A lot of pretentious websites load external scripts by pasting something like this into the document head:

        
            <script type="text/javascript" src="//whatever.com/myawesomescript.js"></script>
        
      
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.

      
          <script type="text/javascript">
            jQuery(window).load(function(){
              jQuery('<script>').attr("src", "http//whatever.com/myawesomescript.js").appendTo("body");
            });
          </script>
      
    

Important note: Do not load scripts or other external resources that are essential to your page load using this method.

Load your iframes after the parent page has finished loading

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:

      
        <script type="text/javascript">
        jQuery(window).load(function(){
          jQuery('<iframe>').attr(
            {
              "src": "//www.youtube.com/embed/ceU4ANZKdOM",
              "width": "1280",
              "height": "720",
              "frameborder": "0"
            }).appendTo("body");
        });
        </script>
      
    

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).

What you've learned ?

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.

comments powered by Disqus