【PageSpeed Insights】修正が必要-スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
PageSpeed Insightsでブログをチェックしたら、下記のエラーメッセージが出ました。
64 / 100
修正が必要
スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
修正が必要は、赤色の感嘆符で表示されています。つまり、googleによると「この問題を修正すると、ページのパフォーマンスが大幅に改善されます。」というもの。
ページの表示速度を少しでも早くしたいと考えているので、修正をしてみる。
では、どうやって修正するか？メッセージには以下のように続いていました。
このページには、レンダリングをブロックするスクリプト リソース が 2 個、CSS リソースが 5 個あります。これが原因で、ページのレンダリングに遅延が発生しています。
まず、レンダリングとは、簡単に言うと、htmlなどに書かれた記述を、表示することです。
そのレンダリングを妨げる（ブロック）存在があり、そのためにページの表示が遅れているというのです。
私のブログの場合、「スクリプト リソース が 2 個」と「CSS リソースが 5 個」がそれにあたります。
PageSpeed Insightsでは、具体的なファイル名や記述を教えてくれます。
あとは、修正箇所に手を加えていくのですが、具体的にどうやって修正していくのかも、googleは教えてくれます。
「スクリプト リソース が 2 個」の修正
私の場合は2個ともjsファイルでした。
google先生は「レンダリングをブロックする JavaScript を除去してください」と支持をくれてリンクも教えてくれました。
レンダリングを妨げる JavaScript を削除する
参考URL：https://developers.google.com/speed/docs/insights/BlockingJS
対処方法は2つあるようです。
一つ目が、スクリプト内容をインラインにする方法。
ブログ内にjsファイルへのリンクがあると、googleロボット？がそのファイルへ行ったり来たりして無駄な時間がかかるみたいです。なので、ファイルを行き来しないように、最初から元のブログページ内にjsファイルの内容を記述してしまいましょう、という内容だと理解しました。（スクリプトの内容が小さい場合に有効な方法）
二つ目が、jsファイルの読み込みを遅らせる方法。
この方法ではｊｓファイルを読み込むは読み込むけれども、ページ表示に影響がないように、読み込む順番を調整する方法だと理解しました。
説明には「JavaScript がページの読み込みを妨げないように、JavaScript を読み込むときに HTML の async 属性を使用することをおすすめします。」とあります。async 属性とは下記のサイトが解りやすく説明してくれています。
async属性を利用することで簡単にスクリプトを非同期で読み込むことが出来ます。
非同期でjsを読み込むとスクリプトをバックグラウンドでダウンロードできるので、ページのレンダリングを速くすることが出来ます。参考URL：http://www.aiship.jp/knowhow/archives/20559
ここで該当のｊｓファイルの中身を確認します。
内容が少なければ一つ目、多ければ二つ目で対処したいと思います。
二つのjsファイルは内容が多かったので二つ目の対処であるasync 属性の付与で対処したいと思います。
ブログはワードプレスで作っているので、いろいろとファイルを探ったりしてみたが、結局解決方法はわかりませんでした。
そんな時に見つけたWPプラグインがHead Cleanerです。
このプラグインを入れると解決しそうなので、試してみます。
具体的な設定方法などは、こちらのブログがわかりやすいので参考にさせていただきました。
Head Cleaner の最も理想的な設定方法
参考URL：http://bazubu.com/head-cleaner-23851.html
こちらの設定方法にのっとって修正した結果、PageSpeed Insightsから「スクリプト リソース が 2 個」のエラーは表示されなくなりました。
「CSS リソースが 5 個」の修正
次は、「CSS リソースが 5 個」の修正をどうするかです。対処法は下記のように案内してくれます。
次のCSS 配信を最適化してください
参考：https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
早速、該当ページを見てみます。
CSSリソースに対しては、jsファイルの時と同様に、少ないファイルであればインラインにしてしまおうという方法が紹介されています。ただし書きとして大きなCSSファイルは、インラインにしてしまうと逆に不具合が生まれるとあります。CSSはなんだかんだで膨大になるのでインラインはちょっと現実的ではないような気がします。
で、他の方法はというと、特に紹介されていませんでした。
他の手法を探すうちに、CSSの最適化とは改行やスペースなどの無駄を省くことだと、ざっくり理解しました。
そのためのプラグインも存在しているとのことです。というか先にインストールしたHead Cleanerがそれのようです。
でも、いまいち使い方がわかりません。
そこで、下記のサービスを使って、手動でCSS最適化をしてみました。
参考URL：http://www.creativyst.com/Prod/3/
対象ファイルは5ファイルなので、対応できると思います。
ただし、この方法だと、一度最適化したCSSファイルは元に戻りません。可読性が著しく低下します。バックアップを取るなりして下さい。ただ、私の場合は、ワードプレスを使っており、フリーテーマの子テーマを作って編集しています。今回の対象は親テーマのCSSなので、普段編集することはありませんので、それほど気を遣わずに最適化していきたいと思います。
結果、2ファイルしか最適化できませんでした。なぜならもともと圧縮され最適化されていたから。
PageSpeed Insightsのポイントも変化なし。
意味あるのかな。。。
