jQueryとCSSを最後に読み込ませてサイトの表示速度を上げる方法

お元気ですか。Hodaです。

当ブログのレンダリング遅延をなくすため、レンダリングをブロックするスクリプトとCSSリソースを特定し、対策を講じました。

具体的には、WordPressにてheadタグ内に出力されるjQueryをフッターに移動させ、Webフォント「Font Awesome」のCSSリソースを最後に読み込むようにしました。

結果、表示速度が大幅に改善されたので、方法をまとめておきます。

この取り組みの背景

スマートフォンなどのモバイル端末における、Hodalogの表示スピードを改善するため、PageSpeed Insightsにて検証を行っています。

修正指示に従ってHTMLとCSS、JavaScriptのコードを圧縮したり。

キュンキュンになったコードを元に戻す方法をマスターしたり。

モバイル端末における表示速度の改善を進めてきました。

さらなる進化を遂げるため、「レンダリングをブロックしているリソースの最適化」に挑戦しました。

当ブログにおいては、最も対策が必要な項目としてGoogleに指摘されていたのです。

私はGoogle先生の言いなり。

喜んでこの問題に取り組みました（白目）。

そもそも「レンダリングをブロック」ってなに？

ここでいうレンダリングとは、Webページをブラウザで表示するための描画処理のことを指します。

HTML/CSSに記述されている文字や画像の大きさなどの情報をブラウザが受け取って描画されます。

このレンダリング処理がなんらかの理由でブロックされると、その分Webページの表示が遅れてしまうわけです。

レンダリングを止めてるやつがいる！

レンダリング遅延が発生する主な原因は、CSSとJavaScriptのリソースです。

それらのファイルが読み込まれて処理をする間、描画処理がストップします。

対策

1. サイズの小さい外部ファイルはインライン化（HTMLファイルに記述）する
2. スクロールせずに見えるコンテンツのリソースを残し、他は後から読み込むようにする
3. 使わないリソースなら削除する

など、いくつかあります。

今回は2番目の対策を講じました。

具体的な方法

プログラムは上に書かれたコードから順に処理が進みます。

レンダリングをブロックするCSSやJavaScriptファイルはheadタグ内で読み込むことが多いです。

それらのリソースの記述をフッター（bodyタグ最後）へ移します。

WordPressにて自動に読み込まれるjQueryをフッターへ移動

functions.phpファイルに次のコードを記述しました。

wp_から始まるタグはWordPressのテンプレートタグです。

wp_deregister_script();

……()内のスクリプトを除外します。

wp_enqueue_script();

……()内のスクリプトを読みだします。上のコードでは、GoogleのCDNにて新たにjQueryを読み込んでいます。()内5番目の値がtrueのとき、フッターでスクリプトを出力します。

Font AwesomeのCSS読み出しコードを最後に出力

link rel~でhead内に用意したCSSはJavaScriptのように非同期で読み込む方法はありません。

body内に記述すると動作しましたが、正規の書き方ではないので構文エラーになります。

そこで、「マルチデバイス対応サイト構築」という本を参考に、次のスクリプトをbody内最後に入れました。

<script type="text/javascript">
var mycss=function(){// mycss関数を定義。{}内の処理を実行。
  var l=document.createElement("link");// link要素をlに代入。
  l.rel="stylesheet";// lにrel="stylesheet"属性を付与。
  l.href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css";// lにhref属性を付与。
  var s=document.getElementsByTagName("link")[0];// HTML内の最初のlink要素名をsへ代入
  s.parentNode.insertBefore(l,s);// sの直前にlを出力
};
window.addEventListener("DOMContentLoaded",mycss);// DOMの構築が終わったらmycss関数を実行
</script>

head内にある適当なlink要素の直前にFontAwesomeを読み込ませる関数を用意し、DOM構築後に起動させるスクリプトです。

結果

スコアが90を超えました。

やったね！

まとめ

重いリソースを最後に読み込ませることで、表示速度が大幅に改善されました。

満足したので、表示速度の改善は今回で終わりにします。

それではまた、ごきげんようﾉｼ