用意していた実験用の別サイトをPageSpeed Insights で計測したら、53点でpoor（貧弱）って言われてしまいました。
PageSpeed Insightsとは、Google 様提供のウェブサイトの読み込みスピードを計測するサービスです。
このPageSpeed Insightsのサイトで計測した結果、53点のpoor だったわけです。
必要となるプラグインを放り込んだだけなので当然といえば当然なのですが、どうせならと簡単にできる範囲でチューニングしてみることにしました。問題がなければ、このサイトも含めて適用していきます。
目次
PageSpeed Insights への対応を試みてみた
PageSpeed Insights からのお小言
PageSpeed Insights では下記の項目が指摘されました。
- スクロールせずに見えるコンテンツのレンダリングをブロックしている
- JavaScript/CSS を排除する
- ブラウザのキャッシュを活用する
- 圧縮を有効にする
- CSS を縮小する
- JavaScript を縮小する
- HTML を縮小する
- サーバーの応答時間を短縮する
上記にひとつひとつ対応してみたいと思います。
PageSpeed Insights に対応する上での前提
- CMSとしてWordPress + Simplicity2を使用
- 諸事情によりサーバは変更しないので現サーバでの改善考える
- 対象サイトは数を作っていく予定なので改善のためにリソースをつぎ込まない
- 実験サイトの目的に関わるのでnendの広告（オーバーレイ）は外さない
- 点数が低く評価されるmobile の点数を対象とする（「パソコン」のほうは「モバイルの点数」 ＋ 9点くらい）
PageSpeed Insights の改善方針
難しいこと・手数がかかることはしない
いろいろなパターンにトライして統計を取るようなことはしません。サクッと設定して効果がありそうなことだけをやります。
例えば設定ファイルにコピペするだけの作業は可ですが、調子を見ながらプラグインの設定をいろいろ変更してみるとかは横展開を考えると毎回やっていられないので不可です。
サーバの設定自体に関わることには手を出さない
サーバ設定は友人が設定してくれたままの状態で使用します。サーバの設定にかける時間（能力？）がありません。
100点満点は目指さない
他サイトでPageSpeed Insights 関連の記事を読むと「本当なのか？」と疑問に思うほど点数が高く、90点台や100点満点なんかの表記もあります。
でも、実際にそのサイトをPageSpeed Insights で評価してみると（負荷をかけてごめんなさい。そんなにかかっていないと思いますが）60点とか表示され、本当に100点近くまで行ったのかと疑問に思える点数になっています。
今回は70点超えたらいいな、くらいで調整します。点数も大事ですが、サイトの読み込みが早くなったように感じられれば今回の実験はOKです。
PageSpeed Insights の指摘を順番に改善してみる
今回行ったWordPressの設定変更やコピペの内容については、参考となったサイトをご紹介しています。
スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
「修正方法を表示」をクリックしてみるとこんな感じでした。
とりあえず、サイトで使っているテーマsimplicity2に関わるファイルは対応しないことにしました。テーマのアップデートのたびにいじるのは面倒です。nend 関連は、今のところどうしようもないので放置です。
あとはjQueryとかですが、よくわからなかったのでこの段階では放置。
結局、全部放置になりました。。。
ブラウザのキャッシュを活用する
こちらのサイトに載っているコードを.htaccess ファイルにコピペしました。
対応後、PageSpeed Insights は62点に向上しました！！でもまだ「poor」（貧弱）。。。
この項目では最後までnend のjsファイルが残ります。nendに限りませんが、外部のサイトから読み込むjsファイルについては、ブラウザのキャッシュに残る時間を自サイトで設定できないため、この項目は対応できません。
圧縮を有効にする
上記の「ブラウザのキャッシュを活用する」での対応で同時にある程度解消されていますので、ここでは対応なしです。
CSS を縮小する
今回は「Autoptimize」プラグインをインストールしました。
「Autoptimize」プラグインはhtml、css、JavaScriptの各ファイル内のコードを圧縮（詰め込んでいます）したりまとめたりして各ファイルの読み込みが早くなりようにしてくれます。
対応後、PageSpeed Insights は64点に向上しました！！ってアップは2点だけ（涙）。そしてまだ「poor」（貧弱）。。。
cssとかjsファイルって元が小さいから、圧縮してもそんなに大きな影響はないのでしょう。
ちなみに今回の作業で「CSS を縮小する」の指摘が消えました。ついでに「JavaScript を縮小する」「HTML を縮小する」も同時に指摘が消えたのでちょっと嬉しかったです。PageSpeed Insights からのお小言が減ったって感じで。
あとで気がついたのですが、「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」で列挙されていたcssファイルやjsファイルが「Autoptimize」プラグインの導入後、かなり減っていました。Autoptimize プラグインにまとめられているようです。
ちなみに最後まで残ったのはnend とjQueryです。
サーバーの応答時間を短縮する
サーバ自体には手を出す予定（能力？）がないので今回はキャッシュに頼ります。使っているテーマはSimplicity2 でキャッシュ系のプラグインと相性は悪いそうですが、今回は多少なりとも検証されている「W3 Total Cache」プラグインを次のサイトの手順に従って入れました。
対応後、PageSpeed Insights は65点に向上しました。。。それだけ？
jQuery.js関連に再挑戦してみた
いろいろ調べ直してみたところ、レンダリングのところで引っかかったjQuery.jsをコピペレベルで解消できる方法がありましたので、設定しました。
設定後放置しましたが、特に問題なさそうなのでそのまま適用としました。
これでPageSpeed Insights は68点となり、今回の挑戦は終了となりました。
PageSpeed Insights 対応のまとめ
いくつか簡単な設定を変更（クリック＆コピペ）した結果、53点から68点と15点アップとなりました。目標の70点に届かず。。。
PageSpeed Insights 対応のポイントはレンダリング関連？
今回ひとつひとつPageSpeed Insights の指摘事項に対応してみましたが、ちょっとずつしか点数アップできませんでした（それでもトータルでは早くなります）。
レンダリングへの対応が完璧になればかなりの点数アップが望めそうですが、WordPressと既成のテーマを使っている以上、ある程度以上の対応はチューニング命の方でないと難しいと思います。
それでも実験サイトは早くなりました。
とはいえ、PageSpeed Insights の得点はともかくとしても体感的にはページの表示速度が早くなったのでその点は対応してよかったです。
サイトを他の人にも見てもらいましたが早くなったという感想をもらったので、この作業量であれば今後のサイトにも適用していってもいいかなと思いました。
このサイトにも順次適用予定です。
nend のファイルが何個か指摘に出てきましたが、外したところで他のファイルがレンダリングの邪魔をしている限り対してPageSpeed Insights の得点には影響ありません。nend を導入すると遅くなるとかいう意見もネット上にありましたが、ギリギリのチューンナップを考えなければ、誤差の範囲に収まる程度なのだと思います。
ちょっと悔しかったので、nend を試しに外して計測してみました。結果は71点。
まだ「Autoptimize」プラグインにまとめられたcssがレンダリングの邪魔をしているとのことでこれ以上いじると今後の調整が大変そうなのでここで終了です。