JavaScriptの非同期読み込みで表示速度改善

ウェブページの読み込み時間は速いに越したことはありません。SNSのボタンの表示などのJavaScriptを非同期読み込みをすることでページの表示速度を改善してみました。

今まで様々な方法でウェブページの速度改善に取り組んできましたが、まだまだ改善の余地があります。 SNS楽天のボタンや広告の表示で、ページの表示は遅くなるばかりでした。SNSのボタンをJavaScriptの非同期読み込みをすることでページの速度を改善することができます。

ウェブページの表示速度が速いサイトはグーグルの評価が上がる可能性があるそうですので、今後もページの表示速度の改善に努めていきたいものです。

はてなブックマークの非同期読み込み

はてなブックマークでは次のように非同期読み込みに対応しています。

<a href="//b.hatena.ne.jp/entry/http://example.jp/" class="hatena-bookmark-button" data-hatena-bookmark-title="タイトルの例" data-hatena-bookmark-layout="standard-balloon" title="このエントリーをはてなブックマークに追加"><img src="//b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script src="//b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

このようにscript要素のasync属性が非同期読み込みになっているからです。

async="async"

その他のSNSのボタン表示などを非同期読み込みに変更

ヘッドタグ内のグーグルのプラス1ボタンと外部jsファイルの読み込みに、同様にasync="async"の記述を追加してみました。

<script src="https://apis.google.com/js/plusone.js" async="async"></script>
<script src="http://mydomain/****.js" async="async"></script>

scriptタグにasync属性を付けた場合、document.writeでページに書き込む処理が使えないようなので注意が必要です。

次にボディタグ内のSNSボタンの設置場所にも次のようにscriptタグにasync属性を付けてみました。これはツィッターとフェイスブックの場合です。

<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a><script src="http://platform.twitter.com/widgets.js" async="async"></script>
<script src="http://connect.facebook.net/ja_JP/all.js#xfbml=1" async="async"></script>

HTML4やXHTMLではW3Cエラーになります

async="async"の記述は。HTML4やXHTMLではW3Cでエラーになります。コードのscript要素のasync属性が、HTML5以外では不明な属性になるからです。

これはエラーになっても仕方がありません。ページの表示速度の方を優先します。その後、ウエブページをHTML5に対応させました。

グーグルアドセンスコードも非同期にしてみました

グーグルアドセンスコードは最近、非同期コードも生成できるようになっています。広告コードを取得する画面で「同期」と「非同期」を切り替えることができます。デフォルトは非同期です。

結果

ページの読み込みは非同期では並列に行われるようで、スピードのチェックページでチェックすると、ずいぶん速くなりました。今のところ特に問題は起きていないようです。グーグルのアドセンスホーム画面のスコアカードでも、ページスピードの改善を確認できました。

後は、楽天のモーションウィジェットの広告の表示が遅いのが気になります。しかし、広告を外すわけにもいかず、痛し痒しというところです。とりあえず普通のバナー広告にして広告量も減らしてみました。