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
結果は表示されず。
コメント