Tools and Services Blog Learn Quizzes Smile API Log In / Sign Up
Tools and Services Blog Learn Quizzes Smile API Log In / Sign Up
« Return to the tutorials list
We have updated our privacy policy to let you know that we use cookies to personalise content and ads. We also use cookies to analyse our traffic and we share information about your use of our site and application with our advertising and analytics partners. By using this website or our application you agree to our use of cookies. Learn more about the way this website uses cookies or remove this message.

Best way to load your external content using jQuery

March 5, 2014 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