PageSpeed Insightsというサービスはご存知ですか？Googleが提供するサービスで、ホームページの表示速度を計測して最適化についてのアドバイスをくれます。そのアドバイスの一つとして、「レンダリングをブロックするJavaScriptを除去してください」と表示された時の対処方法について今回は説明していきます。
Page Speed Insightsをつかってみる
Page Speed Insightsを使ったことがない！という方のためにまずはPage Speed Insightsの使い方を説明します。
サイトの表示速度について分析する
使い方は簡単です。
1. まずは下記のリンクからPageSpeed Insightsのページにアクセスしてください。
2. 下のような画面が表示されるので、ホームページのURLを入力して分析ボタンをクリック。
使い方は以上です。これで下のような表示速度についての分析結果が表示されます。ちなみにこれはGoogleのウェブマスターブログの表示速度について分析した結果です。
このように速度がUnavailableとなることがあります。これには理由があるそうですが、今回はその理由についての説明は割愛させていただきます。Googleのウェブマスターブログでも取得できないということはあまり気にする必要もないのかなぁと思っています。
最適化についての提案を確認する
では次に最適化についての提案を確認しましょう。先ほどの分析結果の画面を下までスクロールすると最適化についての提案という項目が表示されています。
もし表示されていない場合は、最適化されているということです！
最適化についての提案の項目の中に、レンダリングをブロックするJavaScriptを除去してくださいと出てきた場合、以下の対策を講じることで表示速度が早くなる可能性があります。
レンダリングをブロックするJavaScriptを除去する方法
では早速レンダリングをブロックするJavaScriptを除去する3つの方法を説明していきます。
レンダリングをブロックするってどういう意味？
方法を説明する前に、まずはレンダリングをブロックするという言葉の意味を説明します。
レンダリングについて調べてみると、以下のように説明されています。
レンダリング（rendering）とは、データ記述言語やデータ構造で記述された抽象的で高次の情報から、コンピュータのプログラムを用いて画像・映像・音声などを生成することをいう。元となる情報には、物体の形状、物体を捉える視点、物体表面の質感（テクスチャマッピングに関する情報）、光源、シェーディングなどが含まれる。”render” の原義は「表現する、翻訳する、（脚本などを）上演する」などの意味。
出展：レンダリング (コンピュータ) – Wikipedia
なんだか…わかりそうでよくわからん！という感じですね。
今回の場合のレンダリングという言葉を噛み砕いて説明すると、
HTMLやCSSやJavaScriptなどの言語をつかってコンピューターが読めるように書かれたデータを、実際に画面に表示する文字や画像などに変換することです。
ブロックというのは、邪魔する・止めるという意味なので、
レンダリングをブロックするというのは、だいぶ簡潔に説明するとHTMLやCSSやJavaScriptなどの言語を文字や画像に変換するのを邪魔するという意味です。
つまり、JavaScriptがレンダリングをブロックする = 表示が遅くなるので、このJavascriptをどうにかしようということですね。
では解決方法を説明していきます。
JavaScriptをインライン化する
レンダリングをブロックするJavaScriptを除去してくださいと書かれるのは、JavaScriptを外部スクリプトとして読み込んでいる場合です。外部スクリプトとして読み込んでいる状態ではHTMLにこのように書かれています。
<html>
<head>
<script type="text/javascript" src="example.js"></script>
</head>
<body>
<div>
Hello, world!
</div>
</body>
</html>この場合、 example.js というJavaScriptドキュメントが別に存在し、そのドキュメントをHTMLに読み込むかたちになっています。
JavaScriptをインライン化するとはこの example.js のドキュメントに書かれている中身をHTML上にそのまま記載してしまおうということです。
仮にこの example.js の中身が次のように書かれているとすると、
/* example.jsの中身です */このexample.js をインライン化するには次のように書くことができます。
<html>
<head>
<script>
/* example.jsの中身です */
</script>
</head>
<body>
<div>
Hello, world!
</div>
</body>
</html>このようにスクリプトの内容をインライン化すれば、外部のドキュメント（上記の例ではexample.js）を読み込んでくる必要がなくなり、レンダリングを早くすることができます。
じゃあ、なんでもかんでもインライン化したら良い！と思いがちですがそこは注意が必要です。
インライン化するとHTMLのサイズが大きくなってしまうため、最適なパフォーマンスを提供するためにはインライン化するのは小さいスクリプトに限るようにGoogleも推奨しています。
JavaScript を非同期にする
インライン化が難しいJavaScriptの場合、非同期にするという方法もあります。
画面の読み込みとは別で、外部のJavaScriptを非同期で読み込ませることで、レンダリングへの影響をなくす手法です。
非同期にするには、HTML5から実装された async もしくは defer をつかいます。
asyncをつかう
スクリプトタグに次のようにasync属性を指定します。
<script type="text/javascript" src="example.js" async></script>これだけでJavaScriptを非同期にすることができます。
ただし注意しなけらばならない点があります。
asyncは読み込み順を考慮してくれません。
タイミングによっては、先に読み込まないといけないJavaScriptが後に読み込まれてしまい、エラーが出る場合があるので注意してください。
deferをつかう
スクリプトタグに次のようにdefer属性を指定します。
<script type="text/javascript" src="example.js" defer></script>asyncとは違い、deferは読み込み順を維持してくれます。
Googleはなぜかasyncの方を勧めていますが、読み込み順とかよくわからない！という場合はdeferを使えば心配不要なんじゃないかなと思っています。
さいごに
今回はホームページの表示速度を高速化するための手法の一つ「レンダリングをブロックするJavaScriptを除去する」方法を説明しました。難しそうな気がしますが意外と簡単な作業ですので、表示速度が遅いと感じている場合は試してみても良いかもしれません。
もし実践した場合、ホームページがちゃんと問題なく表示されているかの確認はお忘れなく。
