ソーシャルメディアボタンがウェブサイトの読み込み時間を遅くする

user2824854:

シンプルで高速なウェブサイトを作成しています。できるだけサイトを最適化しようとしています。ソーシャルメディアのボタンがウェブサイトをかなり遅くしていることに気づきました。Facebookの「いいね!」ボタン、「Twitter」ボタン、Google +ボタンを含めています。だから私はいくつかのテストを実行しました:

ソーシャルメディアボタンのないウェブサイト、読み込み時間0.24秒:

ここに画像の説明を入力してください

ウェブサイトソーシャルメディアボタン、ロード時間は1.38s:

ここに画像の説明を入力してください

これが私のコードです:

<div id="social">
    <!-- FB -->
    <div id="fb-root"></div>
    <script>(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_EN/all.js#xfbml=1&status=0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
    <div class="fb-like" data-href="http://facebook.com/textsearcher" data-width="150" data-layout="button_count" data-show-faces="false" data-send="false"></div>
    <!-- TWITTER -->
    <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.textsearcher.com/" data-hashtags="TextSearcher">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
    <!-- G+ -->
    <div class="g-plusone" data-size="medium" data-href="http://www.textsearcher.com/"></div>
    <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script>
</div>

だから私はこれらのソーシャルボタンをロードするためにいくつかのことを試みましたが、それらはウェブサイトのロード時間を遅くしません

JavaScriptによる1秒の遅延後のボタンの読み込み:

setInterval(function(){
    $("#social").html("<!-- FB --><div id="fb-root"></div>.....");
},1000);

これは役に立たず、ボタンが適切に読み込まれず、バグがありました。

ドキュメントの準備ができたらボタンを読み込む:

$(document).ready(function() {
    $("#social").html("<!-- FB --><div id="fb-root"></div>.....");
});

これも役に立ちませんでした。ボタンは正常に読み込まれましたが、Webサイトの読み込み時間はまだ> 1.00秒でした。

アイデアが足りません。ウェブサイトを遅くすることなくそれらをロードする方法はありますか?

PS。これらのテストでChromeのページ読み込み時間プラグインを使用


解決:

CodeMonkeyの回答に感謝しページ全体が読み込まれた後にソーシャルボタンを読み込むことで、この問題を最終的に解決しました必要なJavaScriptコード(ソーシャルメディアボタン用)を別のファイルに移動して、HTML /マークアップを少し見やすくしました。

JS(別のファイル、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 = "//connect.facebook.net/en_EN/all.js#xfbml=1&status=0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
/* Twitter */
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
/* G+ */
(function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); 

HTML:

<script>
    $(window).bind("load", function() {
       $.getScript('js/social.js', function() {});
    });
</script>
<!-- FB -->
<div id="fb-root"></div>
<div class="fb-like" data-href="http://facebook.com/textsearcher" data-width="150" data-layout="button_count" data-show-faces="false" data-send="false"></div>
<!-- TWITTER -->
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.textsearcher.com/" data-hashtags="TextSearcher">Tweet</a>
<!-- G+ -->
<div class="g-plusone" data-size="medium" data-href="http://www.textsearcher.com/"></div>

したがって、この読み込みタイミングが再び正常になった後、0.24秒:

読み込みタイミング

CodeMonkey:

あなたは試すことができます

$(window).load(function() {

の代わりに

$(document).ready(function() {

so it will wait until after your images and everything has loaded.

If that doesn't help, then I would suggest having them only appear on hover. Have a bunch of static images / CSS sprites, that get replaced when the user hovers over them.

If you don't want that extra step, and you have server access to install modules you can try google's mod pagespeed to defer the javascript for you https://developers.google.com/speed/pagespeed/module/filter-js-defer

If you don't have server access you can try the CDN route, Cloudflare's rocket loader is very interesting, I am testing it at the minute for similar reasons, and see ~ 33% speed increase http://www.cloudflare.com/features-optimizer

If that doesn't help you could try the old favourite of sticking the buttons at the bottom of the page and repositioning with CSS so they look higher up; that way you can have them where you want them but they don't seem to interfere with the page load time.

You could try simpler oldschool alternatives like here http://zurb.com/article/883/small-painful-buttons-why-social-media-bu

or see if service like http://www.addthis.com/ or http://www.sharethis.com/ work any faster for you

もちろん、この時点で部屋にいる象は、ページに3つの主要なソーシャルメディアボタンを配置することであり、わずか1秒で済みますが、残念ながら非常に良いようです。彼らは一見、うまく最適化されていないようだボタン複雑さPageSpeed Insightsの評価によるグーグル IIRCそれらのすべてと文句を発見何かを。

あなたは100%+の速度のヒットを受けているので、本当に必要かどうかを確認するためにいくつかのA / Bテストを提案するでしょう。共有ボタンを使用すると、トラフィックを増やしてその存在を保証できますか?

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

ウェブサイトのフッターでソーシャルメディアアイコンを中央に配置するためのヘルプが必要

分類Dev

なぜColdFusionの起動、解析、コンパイル、読み込み、シャットダウンの読み込み時間が非常に遅いのですか?

分類Dev

私のウェブサイトのYouTubeビデオの「共有する」ソーシャルメディアボタン

分類Dev

ウェブサイトのデザインには多くの画像があり、読み込み時間が長くなっています

分類Dev

SwiftUIでウェブサイトを読み込んでいる間にアクティビティインジケーターを読み込む

分類Dev

ウェブサイトの画像の読み込みを遅くします:)

分類Dev

ワードプレスのウェブサイトをスピードアップする方法。読み込みに時間がかかりすぎる

分類Dev

ソーシャルメディアのウェブサイトをブロックする

分類Dev

読み込みが遅いWebサイトからテーブルデータをこする方法

分類Dev

タブレイアウトパネルの読み込みに時間がかかりすぎる

分類Dev

ウェブサイトの読み込み時間とボリュームを取得するにはどうすればよいですか?

分類Dev

読み込み時にウェブサイトがフェードする

分類Dev

リッチテキストエディター(TinyMCE)のjqueryプラグインがPHPページに読み込まれている間に読み込みアニメーションを表示する

分類Dev

軽量のウェブサイト:遅延読み込みとアンカーを使用

分類Dev

ページの読み込み間でnodejsチャットアプリケーションウィジェットを保持する方法は?

分類Dev

Pythonリクエストでウェブサイトの読み込み時間を測定する

分類Dev

Pythonリクエストでウェブサイトの読み込み時間を測定する

分類Dev

ウェブサイトの読み込み/応答時間(画像)

分類Dev

ソーシャルメディアのウェブサイトで言及されている場合のメインのウェブサイトの画像

分類Dev

ウェブサイトのページの読み込みが非常に遅い

分類Dev

Laravelでデータをフェッチしている間、APIの読み込み時間が非常に遅い

分類Dev

単一ページのウェブサイト、SEOおよびソーシャルメディアの共有ボタン

分類Dev

ページの読み込みが完了すると消える大きなビデオファイルを読み込んでいる間、AvadaワードプレスサイトのシンプルなCSSまたはJavaScriptの読み込み画面

分類Dev

データベース サイズが徐々に増加した後、PHP アプリケーションの読み込みが遅くなる

分類Dev

オープンソースソフトウェアによって構築されたeshopの読み込み時間が遅い

分類Dev

データソースの読み込み中にアプリウィンドウがハングする

分類Dev

SPAのAzureアプリケーションインサイトにおけるページビューの読み込み時間とブラウザーページの読み込み時間の違い

分類Dev

ウェブサイトの読み込み時に `<div>`要素にアニメーションエントリを与えるにはどうすればよいですか

分類Dev

Chromeがウェブサイトの読み込み時に混合コンテンツエラーをスローする

Related 関連記事

  1. 1

    ウェブサイトのフッターでソーシャルメディアアイコンを中央に配置するためのヘルプが必要

  2. 2

    なぜColdFusionの起動、解析、コンパイル、読み込み、シャットダウンの読み込み時間が非常に遅いのですか?

  3. 3

    私のウェブサイトのYouTubeビデオの「共有する」ソーシャルメディアボタン

  4. 4

    ウェブサイトのデザインには多くの画像があり、読み込み時間が長くなっています

  5. 5

    SwiftUIでウェブサイトを読み込んでいる間にアクティビティインジケーターを読み込む

  6. 6

    ウェブサイトの画像の読み込みを遅くします:)

  7. 7

    ワードプレスのウェブサイトをスピードアップする方法。読み込みに時間がかかりすぎる

  8. 8

    ソーシャルメディアのウェブサイトをブロックする

  9. 9

    読み込みが遅いWebサイトからテーブルデータをこする方法

  10. 10

    タブレイアウトパネルの読み込みに時間がかかりすぎる

  11. 11

    ウェブサイトの読み込み時間とボリュームを取得するにはどうすればよいですか?

  12. 12

    読み込み時にウェブサイトがフェードする

  13. 13

    リッチテキストエディター(TinyMCE)のjqueryプラグインがPHPページに読み込まれている間に読み込みアニメーションを表示する

  14. 14

    軽量のウェブサイト:遅延読み込みとアンカーを使用

  15. 15

    ページの読み込み間でnodejsチャットアプリケーションウィジェットを保持する方法は?

  16. 16

    Pythonリクエストでウェブサイトの読み込み時間を測定する

  17. 17

    Pythonリクエストでウェブサイトの読み込み時間を測定する

  18. 18

    ウェブサイトの読み込み/応答時間(画像)

  19. 19

    ソーシャルメディアのウェブサイトで言及されている場合のメインのウェブサイトの画像

  20. 20

    ウェブサイトのページの読み込みが非常に遅い

  21. 21

    Laravelでデータをフェッチしている間、APIの読み込み時間が非常に遅い

  22. 22

    単一ページのウェブサイト、SEOおよびソーシャルメディアの共有ボタン

  23. 23

    ページの読み込みが完了すると消える大きなビデオファイルを読み込んでいる間、AvadaワードプレスサイトのシンプルなCSSまたはJavaScriptの読み込み画面

  24. 24

    データベース サイズが徐々に増加した後、PHP アプリケーションの読み込みが遅くなる

  25. 25

    オープンソースソフトウェアによって構築されたeshopの読み込み時間が遅い

  26. 26

    データソースの読み込み中にアプリウィンドウがハングする

  27. 27

    SPAのAzureアプリケーションインサイトにおけるページビューの読み込み時間とブラウザーページの読み込み時間の違い

  28. 28

    ウェブサイトの読み込み時に `<div>`要素にアニメーションエントリを与えるにはどうすればよいですか

  29. 29

    Chromeがウェブサイトの読み込み時に混合コンテンツエラーをスローする

ホットタグ

アーカイブ