jQuery.jsを移動

jQuery.js もしくは jQuery.min.js(minが一般的だと思うので以下 jQuery.min.js に統一)は head に置きなさいと何かで読んでずっと head に置いてました。

jQuery自体サイズが小さいので head でロードさせても処理時間は 30ms 程度。ページの読み込みスピードにはあまり違いはありません。

ところが Google PageSpeed Insights ではレンダリングブロックによってスコアはガクンと下がるんですね。

Sponsored Link

2015年4月後半からモバイルフレンドリーが本格化して、モバイルデバイスからの閲覧に優しくないといけない。数日前に SEO鈴木さんのブログにモバイルフレンドリー導入後、検索表示順位が下がってアクセスが半減したという記事もありましたし。真剣にモバイル対応を検討しないといけません。

そこでサイト読み込みスピードを高速化し PageSpeed Insights のスコアアップを狙うわけですが、一番手っ取り早いのはjQuery.min.js の位置を変えることです。

jQuery.min.js は headに置かない

jQuery.min.js を head 内に書くとレンダリングブロックを起こすので head に書きません。どこに書くかと言えば、一番最初に jQuery を実行するコードの直前。このブログでいえば広告を移動させるjQueryが最初なので、サイドバーとフッターの間に jQuery.min.js を置いています。

jQuery の置き場所による PageSpeed Insights スコアの違い

jQuery.min.js を head 内に置いたときと body 内に置いたときの違いを Google PageSpeed で比較すると驚きです。

jQueryをhead内に置いたときのPageSpeed Insightスコア68jQueryをbody内に置いたときのPageSpeed Insightスコア86図をクリックすると詳細を表示します。

このブログのトップページで測定。jQuery.min.js は Google の CDN を使用。

http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js

一目瞭然で、head に置いたときは68ポイント、body 内が86ポイントと18ポイントも違いがありました。

jQuery.min.js を一番最初に jQuery が呼ばれるコードの直前に移動するだけで18ポイントも高速化が実現できたということです。

この PageSpeed Insights は1ポイント上げるのがなかなか難しい。その意味では一発で18ポイントは奇跡的。

あまりにも嘘っぽいので測定結果を見たいという方はコチラをクリックして実測して下さい。head に置いたパターンはもちろんありませんが現状が確認できます。

jQuery.min.js の非同期読み込みは不可

レンダリングブロックを回避するなら、単純に非同期(async)で head に書けばいいじゃない。と、ちょっと前まで考えていました。

<script async src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

これでレンダリングブロックも発生しない。万歳。

ところがある日、スーパー超シンプルテンプレートを使ってくださっている方から連絡を頂きました。

iPhone の Safari だと jQuery が動くけど、iPhone Chrome だと動いていない。

その後、デスクトップ版も含め、色々なブラウザでテストした結果、FireFox でもjQueryが動いていないことが判明。

Google Chrome と Microsoft IE 中心に検証していたので、jQuery は async で head に置くと全てのブラウザで動作が保障されるわけではないということに気が付きませんでした。

という理由で jQuery.min.js を head 内に async で置くとレンダリングブロックは回避できても機能しないので意味がないのであります。

おわりに

jQuery.min.js の位置確認だけで約20ポイントアップはデカいです。やってみる価値アリだと思います。

ただ、あくまでも Google PageSpeed Insights のスコアアップ対策であって、先述の通り jQuery.min.js の読み込みは0.03〜0.04秒なのでどこに置いてもさほど変わりません。モバイルフレンドリーと絡め Google からの評価を上げることが目的みたいなものです。

Wordpress は高速化系のプラグインで jQuery をフッターに移動したつもりが、自己診断機能で head に移動していたりと、こういうフロントエンドのカスタマイズが厄介です。Async JS and CSS という非同期ロードの Wordpressプラグインがあるようなので試してみようと狙ってます。» Async JS and CSS

そういう面倒な思いをしているのでなおさら jQuery.min.js の位置を自由に動かせる Seesaaブログのような無料ブログは本当に魅力的だし、上手くやれば Wordpress よりも Seesaa ブログの方がサイト読み込み処理を速くできることがあります。

このカスタマイズでのスコアアップは?

このカスタマイズでアップする Google Pagespeed Insights のスコアは18。90越えの道のりはまだまだ長いのであります。

Sponsored Link

この記事へのコメント

0件
コメントをどうぞ
お名前:[必須入力]

メールアドレス:

ホームページアドレス:

コメント:[必須入力]

Sponsored Link