アイディアボード

Just another WordPress site

HTML5でJavaScript,jQueryを高速読み込みする

   

このブログのWordPressテーマを自分で作ろうとしてひな形のHTMLを書いているのですが、「そういえばJavaScriptはheadタグの中じゃなくてbodyタグを閉じる直前に書くと良いって前に聞いたなぁ」と高校生の頃の知識を思い出し、今はどうなんだと調べてみたら、HTML5になって色々できる事が増えていました。ちょいとメモ書き。

非同期読み込みのasync属性と遅延読み込みのdefer属性

2013年7月現在、iOS端末(iOS6.1.4)で依存関係のある複数のJSファイルではうまく動作しませんでしたが、こんなのがありました。


とまぁこんな感じで指定します。
HTML5対応ブラウザならasync属性によってjQuery.jsを非同期で読み込み、非対応ブラウザでもdefer属性によって、HTML部分のレンダリングが終わってからjQuery.jsをロードしてくれるんだとか。

細かい説明はこちらから。
HTML5/ページ全般/script要素 スクリプトの実行方法を指定する - TAG index Webサイト

またその効果についてはこちらから。
【レポート】script要素、asyncとdeferの効果 | 開発・SE | マイナビニュース

async属性とdefer属性が使えるのであれば、JavaScriptはbodyタグを閉じる直前ではなくheadタグの中に置いた方が良いのでしょうね。HTMLレンダリングと同時並行してくれるみたいだし。
ただ、依存関係のあるJSファイル(例:jQueryとjQueryプラグインの様)に使うと上手く動作しなくなっちゃいました。スマートフォンだと特に。

ちなみにCSSでも非同期読み込み出来るのかなと調べてみても該当文書が見つからず、普通にHTMLに書いてあるなら非同期読み込みしてくれるらしいです。JavaScriptから呼び出した時はまぁゴニョゴニョ。

SNS共有ボタンも非同期読み込みする

instacode77697

2年近く前の話ですが、便利なものが世の中にはあるようです。
最近海外で流行りのTwitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプトにはてなを加えてみた | ゆっくりと…

ただ単に非同期にするだけでなく、訪問者がある程度そのサイトのコンテンツを読んでくれた時に改めて読み込むという方法もあるそうです。これは良い。
Webサイトの読み込み体感速度が2秒くらい上がるかも。SNSボタンは後から読み込め!
ただこちらの方法、「document.write()」を使っている様なんですが、これってアクシデントの元になるとかで古き悪しき知恵だって話をどこかで聞いたような。自分で使うときにはちょいと改変するかなぁ。

と、調べてみたら存外にいろいろ出てきました。Google先生ありがとうございました。

 - 解説記事