I&#39;m creating a simple and fast website, and I&#39;m trying to optimize the site as much as I can. I noticed that social media buttons are slowing down the website by quite a lot. I&#39;m including the Facebook Like Button, Twitter Button and Google+ Button.
So I ran a few tests:

Website **without** social media buttons, loading time 0.24s:

![enter image description here][1]

Website **with** social media buttons, loading time 1.38s:

![enter image description here][2]

Here is my code:

    &lt;div id=&quot;social&quot;&gt;
        &lt;!-- FB --&gt;
        &lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
        &lt;script&gt;(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = &quot;//connect.facebook.net/en_EN/all.js#xfbml=1&amp;status=0&quot;; fjs.parentNode.insertBefore(js, fjs); }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));&lt;/script&gt;
        &lt;div class=&quot;fb-like&quot; data-href=&quot;http://facebook.com/textsearcher&quot; data-width=&quot;150&quot; data-layout=&quot;button_count&quot; data-show-faces=&quot;false&quot; data-send=&quot;false&quot;&gt;&lt;/div&gt;
        &lt;!-- TWITTER --&gt;
        &lt;a href=&quot;https://twitter.com/share&quot; class=&quot;twitter-share-button&quot; data-url=&quot;http://www.textsearcher.com/&quot; data-hashtags=&quot;TextSearcher&quot;&gt;Tweet&lt;/a&gt;
        &lt;script&gt;!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);&lt;/script&gt;
        &lt;!-- G+ --&gt;
        &lt;div class=&quot;g-plusone&quot; data-size=&quot;medium&quot; data-href=&quot;http://www.textsearcher.com/&quot;&gt;&lt;/div&gt;
        &lt;script type=&quot;text/javascript&quot;&gt; (function() { var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true; po.src = &#39;https://apis.google.com/js/plusone.js&#39;; var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s); })(); &lt;/script&gt;
    &lt;/div&gt;

So I tried few things to load these social buttons without them slowing website load time.


Loading buttons after one second delay via JavaScript:
      
 

    setInterval(function(){
   	 	$(&quot;#social&quot;).html(&quot;&lt;!-- FB --&gt;&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;.....&quot;);
    },1000);

This did not help, buttons didn&#39;t load up properly and they were bugging.

Loading buttons after document is ready:

    $(document).ready(function() {
        $(&quot;#social&quot;).html(&quot;&lt;!-- FB --&gt;&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;.....&quot;);
    });
This did not help either. Buttons loaded just fine but website load time was still &gt;1.00 seconds.

I&#39;m running out of ideas. Any way to load them without slowing down website?

PS. Used [Page load time][3] plugin for chrome in those tests


----------
**SOLUTION:**

Thanks to CodeMonkey for his answer, I eventually solved this problem by loading social buttons after **entire** page is loaded. I moved the necessary JavaScript code (for social media buttons) in a separate file to make my HTML/markup little bit cleaner.

JS (in a seperate file, social.js):

    /* Facebook*/
    (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = &quot;//connect.facebook.net/en_EN/all.js#xfbml=1&amp;status=0&quot;; fjs.parentNode.insertBefore(js, fjs); }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
    /* Twitter */
    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
    /* G+ */
    (function() { var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true; po.src = &#39;https://apis.google.com/js/plusone.js&#39;; var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s); })(); 

HTML:

    &lt;script&gt;
    	$(window).bind(&quot;load&quot;, function() {
    	   $.getScript(&#39;js/social.js&#39;, function() {});
    	});
    &lt;/script&gt;
    &lt;!-- FB --&gt;
    &lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;fb-like&quot; data-href=&quot;http://facebook.com/textsearcher&quot; data-width=&quot;150&quot; data-layout=&quot;button_count&quot; data-show-faces=&quot;false&quot; data-send=&quot;false&quot;&gt;&lt;/div&gt;
    &lt;!-- TWITTER --&gt;
    &lt;a href=&quot;https://twitter.com/share&quot; class=&quot;twitter-share-button&quot; data-url=&quot;http://www.textsearcher.com/&quot; data-hashtags=&quot;TextSearcher&quot;&gt;Tweet&lt;/a&gt;
    &lt;!-- G+ --&gt;
    &lt;div class=&quot;g-plusone&quot; data-size=&quot;medium&quot; data-href=&quot;http://www.textsearcher.com/&quot;&gt;&lt;/div&gt;


So after this load timings were normal again, 0.24s:

![Load timings][4]


  [1]: http://i.stack.imgur.com/nv3OA.png
  [2]: http://i.stack.imgur.com/U54dS.png
  [3]: https://chrome.google.com/webstore/detail/page-load-time/fploionmjgeclbkemipmkogoaohcdbig?hl=en
  [4]: http://i.stack.imgur.com/UVR8O.png

All Twitter Button Solutions on Gang of Coders

Total of 1 Twitter Button Solutions

Social media buttons slow down website load time