記事内に広告が含まれています。

twitterコードを非同期化してサイトの表示速度を速くする

wordpress表示速度改善 wordpressでブログを作ろう

 twitterのコードを非同期化してサイトの表示速度を早くしよう。

 twitterのコードもjsを読み込んでいるので非同期化すればきっとサイトの表示速度は速くなると思うんだ。

 facebookやはてなブックマークはすでに非同期化されている様子。

広告

現在使っているtwitterコード

<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a>
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

 <script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>を非同期化すれば良いってことかな?

 で調べてみたところ、Tweetボタンを非同期で読み込むコードを公開しているサイトがあった。

 で、それを参考にコードを変えてみた。

広告

Tweetのボタンの非同期化コード

<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a>
<script type="text/javascript">
 !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.async=true;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

Tweetボタンの非同期化でサイト表示速度は速くなったか?

 Tweetボタンの非同期化で、PCサイトの表示はちょっと速くなった。

 でも、モバイルの表示は点数変わらず。

 モバイル76点、PC84点。

SNSボタンをまとめて非同期化してみた。

SNSボタンをまとめて非同期化すると言うコードを公開してくれているサイトもあったのでこれも使ってみた。

【参考サイト】http://2inc.org/blog/2012/04/19/1374/

モバイル76点、PC84点。

コードをフッターに写してみた

モバイル76点、PC84点。

次はjQueryを使ってみる

【参考サイト】http://fukuyama.co/lazyloadsns

 結果は表示されず。

コメント

タイトルとURLをコピーしました