サイトの表示速度高速化のためにレンダリングブロックJavaScriptを削除する
PageSpeed Insights でサイトを検証すると「スクロールせずに見えるコンテンツのレンダリングブロック JavaScript / CSS を排除する」と提案されることがよくあります。
今回はJavaScriptに焦点を当ててその対処方法を書いていきます。
いつものことながらこのサイトは初心者向きです、IT用語の解説はイメージを優先したおおざっぱなものですし、対処方法もすぐに出来る単純なものに限定しています。あらかじめご了承ください。
対処法の大まかな考え方
まず用語の整理から。WordPressをはじめてばかりの人にとって「レンダリング」という言葉は馴染みがないかもしれません。わたしは日常会話で聞いたことがないです。
レンダリング (rendering) は、データ記述言語やデータ構造で記述された抽象的で高次の情報から、コンピュータのプログラムを用いて画像・映像・音声などを生成することをいう。（レンダリング (コンピュータ) – Wikipedia）
ブラウザがWebページを表示するとき、HTMLドキュメントに書かれた内容を上から順に解析して、処理をしていきます。そこで途中にJavaScriptがあると、ほかの作業はいったん脇に置かれた保留状態になり、JavaScriptで指示された内容だけを終了するまでやり続けることになります。
したがって、JavaScriptのファイルサイズがやたらと長く大きかったり、複雑な処理内容があったり、たくさんの作業が並んでいたりすると、ブラウザの表示はそこで足止めを食らってしまうわけです。
ブラウザではページをユーザーに表示する前に解析する必要があります。解析中に外部スクリプトがある場合は、解析を停止して、その JavaScript をダウンロードしなければなりません。そのたびにネットワークの往復が追加されるため、ページが最初に表示されるまでの時間が遅くなります。（レンダリングを妨げる JavaScript を削除する – PageSpeed Insights — Google Developers）
ということは、JavaScriptによるレンダリングを妨げないようにするためには、処理を後回しにしたり、外部にあるJavaScriptファイルへの読み込み回数を減らしたり、ファイルサイズそのものを小さくしたり、もっといえば不要なものは使わない、といった対策が必要になってきます。
Google Developersの推奨する解決方法
Google Developersによって推奨されている方法は2つです。
- 小さなJavaScriptをインライン化する
- JavaScriptの読み込みを遅らせる
まず「小さなJavaScriptをインライン化する」というのは、平たくいうと「JavaScriptのファイルサイズが少ないのならいちいち外部ファイルとして読み込ませるのはやめて、HTMLドキュメント内に書いちゃえよ」ということです。そうすることでWordPressが外部リクエストする手間をひとつ減らすことになります。ただし、この方法はごく小さなファイルサイズ（数行で終わるような内容）でないと、期待した効果が得られないので注意です。
つぎの「JavaScriptの読み込みを遅らせる」は、「先にJavaScript以外のファイルをを読み込ませてから、あとのほうでJavaScriptを読みこませるような順序設定を行う」ということです。Googleさんからの提案なので、Google Adsense広告についての対策を紹介しています。ブラウザがページ全体の読み込みをする途中で、たくさんのJavaScriptが読み込まれ、それがなかなか終わらないことで、次の処理へと進めないことがサイトの表示速度が遅くなる原因にを解消します。
WordPress以外のサイトでも使える方法
「小さなJavaScriptをインライン化する」
この方法はGoogle Developersでくわしく説明されています。全く同じことを書いてもしかたがないので、こちらはリンク先にしたがってやってください。
レンダリングを妨げる JavaScript を削除する – PageSpeed Insights — Google Developers
元のHTMLがこうだとします。
<script type="text/javascript" src="small.js"></script> |
このsrc=”small.js”がJavaScriptファイルの場所を指定ます。このファイルが数行程度であれば、中身をごっそりコピペしてHTMLに書いちゃいましょう。
<script type="text/javascript"> /* ここにsmall.jsの中身をコピペする */ </script> |
コピペが済んだら「src=”small.js”」の部分は不要ですので消しておきます。あとは空になったsmall.jsファイルを削除しておしまいです。簡単ですね。
「JavaScriptの読み込みを遅らせる」（Google Adsense広告）
こちらはGoogle AdSenseを導入しているサイト向け。「非同期」の広告コードを取得して書き換えるだけです。
ログインして「広告の設定」をクリックします。「広告ユニット」が並んでいるところの「コードを取得」を選んでください。
「広告を作成しました」という小さなウィンドウが出るので「コードタイプ」を「非同期」に変更します。
あとはサイト内のGoogle AdSense 広告のコードを書き換えるだけです。
JavaScriptをひとつずつ非同期にする
この「非同期」にする方法は、もちろんGoogle Adsense広告だけでなく、ほかにもいろんなJavaScriptで効果を発揮します。ブログパーツでしたらそれを配布しているサイトで方法が書かれていると思いますし、あらかじめ「非同期」に設定されているものも多いです。
具体的な手順は、該当するサイトや、技術ブログのコードを参考にしてください。ちょっと難しい内容になるのと、ひとつひとつ個別に解説しないといけなくなるので、これ以上は書きません。
<script>タグの「async」または「Deferred」で検索してみるといっぱいでてきますよ。
JavaScriptはCSSのあとに書く
HTMLのヘッダー部分ではCSSやJavaScriptの参照先を記述しますが、その順序の話です。
必ずCSSを先に書き、JavaScriptは後に回します。
CSSは複数に同時読み込みができますし、すべての処理が完了していなくても、ほかのファイルを読み込むことが可能です。それに対して、JavaScriptはひとつが読み込まれたら、そこでストップします。その読み込み作業が完了するまで、次のコードへは進めません。
なので、先にすべてのCSSをさっさと読み込ませちゃいましょう。たとえばこんなふうに。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> …… <link rel="stylesheet" type="text/css" href="normalize.css"> <link rel="stylesheet" type="text/css" href="styles.css"> <script src="http://www.site.com/AAA.js"></script> <script src="http://www.site.com/BBB.js"></script> …… </head> |
もちろん、CSSとJavaScriptを交互に書くのも、同じ理由から避けるべきです。
ファーストビューに必要でないJavaScriptを</body>閉じタグの直前で読み込ませる
上と似たような考え方です。いわゆるファーストビューで必要なCSSなどをHTMLの前の方（ヘッダー部分）に書き込み、後から読み込んでも問題のないJavaScriptは後方に持っていきます。</body>閉じタグの直前に置くことをよく聞きます。
当サイトではやってないので効果がどれくらいあるのか、あまり良くわかりません。
WordPressのサイトで使える方法
プラグインを利用する
有名どころをまとめておきます。どれも人気のプラグインで多くのサイトで使われていますが、中には1年以上も更新のないプラグインもあるので、新しいのに乗り換えてもいいかもしれません。
- Asynchronous Javascript （非同期読み込み）
- WP Deferred Javascripts （遅延ロード）
- Async JS and CSS （多機能）
- WP Minify Fix （圧縮）
- Autoptimize （圧縮など）
インストールするだけで機能するものや細かい設定ができるものがあります。レンダリングを妨げる JavaScriptの対応をしてくれるプラグインは微妙な設定が必要です。はかに使っているプラグインやテーマの影響を受けて、サイトの表示が崩れたり、アフィリエイト広告がへんなところに表示されることも多々あります。
こればっかりはサイトに合わせて試行錯誤しながら、ベストな組み合わせを探していくしかありません。
JavaScriptファイルを小さくする
こちらはWordPressが外部ファイルへのリクエストを減らす工夫になります。
めっちゃ単純化してしまうと、5つのファイルがあると最低でも5回はファイルを読み込まなければなりませんが、ファイルが1つだと1回でいい、ということです。じっさいはもっといろんなプロセスがあると思ってください。
次の手順で行います。
- JavaScriptファイルを一つにまとめる
- JavaScriptを圧縮する
これが出来る人はJavaScriptを少しは齧ったことがある人になると思うので、わからなければプラグインに頼ったほうが楽チンです。ヘタにいじると修復不可能になりかねないので、分かる人におすすめの方法になります。
まず複数のJavaScriptをひとつのファイルにまとめます。これはコピペでいいですね。つぎに圧縮作業ですが、これは無料サイトを使います。
Refresh-SF – Online JavaScript and CSS Compressor
よく知られたサイトに「Online YUI Compressor」がありますが、そちらのサイトが新しくパワーアップするようです。このような注意書きが表示されていました。
Warning! This site will soon be replaced by a similar tool I’ve created which you can test here: http://gpbmike.github.io/refresh-sf/. It does not use YUI Compressor, but supports many of the newer CSS features.
使い方は単純で、ボックスの中に英文で説明書きがある通りです。
Paste your JavaScript or CSS code here, or drag in files from your desktop.
JavaScriptの中身をコピペして、右上の「JavaScript」ボタンをクリックするだけで圧縮作業をしてくれます。改行やコメントなどが削除されているのがわかります。CSSなどにも対応しています。
あとは圧縮された中身を元のJavaScriptの代わりに使うだけです。
JavaScriptの修正や更新を考えている場合には新しいファイル名を変更して使用し、元のファイルを【保存版】として残しておくと便利です。
さいごに
いろいろ書きましたが、初心者でもできることがけっこうあることがわかります。JavaScriptのコードを書き換えたり、functions.phpを編集してできることもありますが、そちらは中級編と考えて、今回紹介した方法からやってみてはいかがでしょうか。
ちなみに、上記の半分くらいをやって、このサイトはPCで100点取れました。
まあ、時間帯によってまちまちですがね(´・ω・`)