Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to increase page loading speed with AddThis widget?

<script type="text/javascript" 
    src="http://s7.addthis.com/js/250/addthis_widget.js"></script>

I am using this code for facebook, twitter etc, but there is a script in this which makes the page loading speed extremely slow. Can you please help with the solution for this, the entire code is below

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
    <a class="addthis_button_preferred_1"></a>
    <a class="addthis_button_preferred_2"></a>
    <a class="addthis_button_preferred_3"></a>
    <a class="addthis_button_preferred_4"></a>
    <a class="addthis_button_compact"></a>
    <a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">
    var addthis_config = {
        "data_track_addressbar": true
    };
</script>
<script type="text/javascript" 
    src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4dfeea6f5bf22ac6">
</script>
<!-- AddThis Button END -->
like image 348
Siva Shanker Avatar asked Feb 17 '23 09:02

Siva Shanker


2 Answers

Besides moving everything to the bottom of the page as Mudshark already said, you can also use the async addthis version:

http://support.addthis.com/customer/portal/articles/381221-optimizing-addthis-performance#.USyDXiVuPYo

  <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#async=1"></script> 

 function initAddThis(){
      addthis.init()
 }
 // After the DOM has loaded...
 initAddThis();
like image 91
Wolph Avatar answered Feb 20 '23 01:02

Wolph


One of the solutions would be to use deferred JavaScript loading pattern for AddThis library.

There are several nice JavaScript libraries helping you out with that problem. I personally use mostly Modernizr.load (or yepnope.js by itself)

You can read more on that issue and improvement in Improve Your Page Performance With Lazy Loading article.

As a side note, I was able to improve page load by about 35% average in my past projects by using deferred JavaScript loading patter. I hope that will help.

like image 26
Tom Avatar answered Feb 19 '23 23:02

Tom