JavaScript の解析を遅延させられる defer 属性について

ここで使用する defer 属性は document.write を含む JavaScript を呼び出す場合は利用できません。

最近、Google ウェブマスターツールに「+1 統計情報」という項目が追加されていたり、アドセンスのホームでも「+1」ボタンの設置を勧められていたので、Google +1 ボタンをサイト上に設置してみました。

また、いい機会なので facebook の Share ボタンと Twitter のツイートボタンも同様に設置することに。

とはいえ、Google プロフィールは作成していませんし、facebook も登録しておらず、Twitter もつぶやく気がないのであくまでボタンを設置しただけです。

で、設置してみたのはいいのですが、どうにもそれらのボタンを表示する部分でたまにページの描画が数秒止まってしまう現象が起きるようになってしまったので、今回は描画が止まる場合の解決法を記述しておきます。

JavaScript を読み込む部分でページの描画が数秒止まる場合に

ソーシャルボタンやブログパーツの描画部分で引っかかって、なかなかコンテンツ部分が表示されないという場合、その部分の JavaScript を遅延させることで先にコンテンツ部分を表示させることができます。

例として、twitter のツイートボタンのカウント表示なしコードがあるとします。

  • <a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-lang="ja">ツイート</a>
  • <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

遅延させる場合、defer="defer" を <script> に追記するだけです。

  • <a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-lang="ja">ツイート</a>
  • <script type="text/javascript" src="http://platform.twitter.com/widgets.js" defer="defer"></script>

他の遅延したい <script> 部分にも defer="defer" を追記することで、全体の描画が終わった後にまとめて描画されるようになります。

後書き

今回は、PageSpeed を参考に Web ページの表示速度向上のためにやってみたことのまとめのページで記述した「JavaScript の解析を遅延する」の内容と、ほぼ同一のものになってしまいました。

ただ、その項目は今まで未検証だったので、今回初めて defer 属性の動作を確認することになりました。

当初は Google +1 ボタンを設置してから、PageSpeed で「JavaScript の解析を遅延する」の部分にいくつかの js ファイルが表示されるようになったため、この部分を何とかしようと思って defer 属性を利用してみたのですが、何ともなりませんでした。

そもそも Google +1 ボタンは最初から遅延表示されるようになっているようですし、explict を指定することで、表示するタイミングも変えられるので、defer を置いても何の意味もないようです。

ただ、他のボタンに defer="defer" を追記してから、利用しているHTMLエディタの ez-HTML で、ページのプレビューを行うと強制終了が起きてしまったので、回避策として設置しています。

現在は、このような現象は起きなくなったので外しています。なりましたが、外部のスクリプトを非同期として読み込むために、defer を追加しています。

スポンサードリンク

inserted by FC2 system