2012-03-04 4 views
2

私は動的ソーシャルメディアボタンを追加するために管理しているいくつかのサイトで次のコードを使用しています。動的ソーシャルメディアボタン - httpリクエストと検証エラーを減らす

それらの間で、3つのjavascript httpリクエストと無効なコードがすべてのページに追加されます。私はこれらがすべてCDNからロードされていることに感謝しますが、サイトのページの1つに重い負荷が加えられています。

要求の数を減らしたり、コードを最後にロードしたり、スクリプトを壊さずに有効性の問題を解決したりする方法はありますか?

<div id="fb-root"></div> 
<script type="text/javascript">(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 = "//connect.facebook.net/en_GB/all.js#xfbml=1"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));</script> 
<div> 
<ul> 
    <li> 
     <div class="fb-like" data-href="http://www.facebook.com/username" data-send="true" data-layout="button_count" data-width="100" data-show-faces="false"></div> 
    </li> 
    <li> 
     <a style="color: #777;" href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="twittername">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> 
    </li> 
    <li> 
     <a href="https://twitter.com/justicecampaign" class="twitter-follow-button" data-show-count="true">Follow @twittername</a> 
    </li> 
    <li> 
     <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> 
     <g:plusone size="medium"></g:plusone> 
    </li> 
</ul> 
</div> 

答えて

1

あなたができる最善のことは<body>の最後にこれらのスクリプトを移動やTwitterやGoogle+のためscriptタグにdefer属性を追加することです。ブラウザはJavaScriptのダウンロードと実行中にページの解析とレンダリングを停止するため、HTMLの途中にサードパーティのスクリプトを置くことは推奨されません。これは、ページがこれらのサードパーティ製のネットワークを利用しているためです。いずれかが遅れている場合、あなたのページはそれを感じるでしょう。これらのスクリプトを一番下に移動すると、最も重要なコンテンツが最初に解析されてレンダリングされます。

要求を減らすために、これらのサードパーティスクリプトをダウンロードして1つのスクリプトに結合して、2つの要求を取り除くことができます。欠点は、プロアクティブに監視して再結合しない限り、更新されるスクリプトの最新バージョンを取得できないことです。

私はこれらの特定のスクリプトではあまり検討していないため、私は実際に無効で話すことはできません。

+0

ページの残りの部分の後にそのコードセクションを強制的にロードする方法はありますか? – toomanyairmiles