g+1ボタンを非同期で読み込むようにしてみよう。
PageSpeed Insightsでページの表示スピードを解析したところこんな表示が出た。
”次のスクリプトの非同期バージョンを使用してください:
https://apis.google.com/js/plusone.js”
これっていったい何のファイルなんだろう？
どうもg+1ボタンのスクリプトみたいだ。
g+1ボタンを非同期で読み込んでちょっとでも、サイトのページ速度を改善できるなら非同期にしてみようじゃないか！
現在設置されているg+1ボタンのコード
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>
現在設置されているg+1ボタンのコードの解説
g+1ボタンを読み込むスクリプト
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
g+1ボタンを表示するコード
STINGER3のg+1ボタンを表示するコード
<g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>
「tall」は縦長のボタン。
<?php the_permalink(); ?>">は対象となるURL。
ちなみにボタンのみのシンプルなg+1ボタンを表示するコードは↓
<g:plusone></g:plusone>
ほかにもg+1はいろいろな形で表示できる。
http://www.google.com/intl/ja/webmasters/+1/button/index.html
非同期のg+1ボタンのコード
<g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>
<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>
非同期のg+1ボタンのコードの説明
赤い文字のところがg+1ボタンを非同期で読み込むコード。
g+1ボタンの表示コードの後に非同期で読み込むコードをつけている。
シンプルなg+1ボタンのコードを非同期にする場合は下のようになる。
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone>
非同期ボタンのコードは↓
<g:plusone></g:plusone>
<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>
非同期のg+1ボタンを設置するには
1、ヘッダーやフッターにg+1ボタンを読み込むスクリプトが配置されている場合は、いったん、以下のg+1ボタンを読み込むスクリプトを削除。
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
2、非同期のg+1ボタンのコードをg+1ボタンを表示させたい部分に書き込む。
g+1ボタンを1ページに複数設置している場合
1、ヘッダーやフッターに設置している以下のスクリプトを削除。
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
2、g+1ボタンを表示し居場所に<g:plusone></g:plusone>を書きこみ、最後の<g:plusone></g:plusone>の下に上の赤い文字のコードを付け加える。
g+1ボタンの非同期化でページの表示速度は速くなったか？
g+1ボタン非同期化前⇒PageSpeed Insightsモバイル76点、PC81点。
g+1ボタン非同期化後⇒PageSpeed Insightsモバイル77点、PC82点。
非同期化で表示速度は少し速くなるようだ。
コメント