PageSpeed Insights で53点、poor(貧弱)って言われてしまった。。。

用意していた実験用の別サイトをPageSpeed Insights で計測したら、53点でpoor(貧弱)って言われてしまいました。

PageSpeed Insights 画面

PageSpeed Insightsとは、Google 様提供のウェブサイトの読み込みスピードを計測するサービスです。

PageSpeed Insights

このPageSpeed Insightsのサイトで計測した結果、53点のpoor だったわけです。

PageSpeed Insightsで計測するタイミングによっては、1点くらいは上下するみたいです。

必要となるプラグインを放り込んだだけなので当然といえば当然なのですが、どうせならと簡単にできる範囲でチューニングしてみることにしました。問題がなければ、このサイトも含めて適用していきます。

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 を排除する

「修正方法を表示」をクリックしてみるとこんな感じでした。

PageSpeed Insights 画面

とりあえず、サイトで使っているテーマsimplicity2に関わるファイルは対応しないことにしました。テーマのアップデートのたびにいじるのは面倒です。nend 関連は、今のところどうしようもないので放置です。

あとはjQueryとかですが、よくわからなかったのでこの段階では放置。

結局、全部放置になりました。。。

ブラウザのキャッシュを活用する

こちらのサイトに載っているコードを.htaccess ファイルにコピペしました。

[改訂版] .htaccess の見直しでWebページ高速化 | Thought is free
現在の当ブログのトップページの GTmetrix の解析結果です。 改訂前の記事から、かなり点数落ちてますが、 原因は、Google Adsense 貼り始めたからですw (以前...

対応後、PageSpeed Insights は62点に向上しました!!でもまだ「poor」(貧弱)。。。

PageSpeed Insights 画面

この項目では最後までnend のjsファイルが残ります。nendに限りませんが、外部のサイトから読み込むjsファイルについては、ブラウザのキャッシュに残る時間を自サイトで設定できないため、この項目は対応できません。

google 関連のファイルについても文句言われたりします。なんとかならないのか。。。

圧縮を有効にする

上記の「ブラウザのキャッシュを活用する」での対応で同時にある程度解消されていますので、ここでは対応なしです。

CSS を縮小する

今回は「Autoptimize」プラグインをインストールしました。

「Autoptimize」プラグインはhtml、css、JavaScriptの各ファイル内のコードを圧縮(詰め込んでいます)したりまとめたりして各ファイルの読み込みが早くなりようにしてくれます。

「Autoptimize」プラグインの設定ではHTML 、CSS 、JavaScript それぞれのコード最適化にチェックを入れました。

対応後、PageSpeed Insights は64点に向上しました!!ってアップは2点だけ(涙)。そしてまだ「poor」(貧弱)。。。

PageSpeed Insights 画面

cssとかjsファイルって元が小さいから、圧縮してもそんなに大きな影響はないのでしょう。

ちなみに今回の作業で「CSS を縮小する」の指摘が消えました。ついでに「JavaScript を縮小する」「HTML を縮小する」も同時に指摘が消えたのでちょっと嬉しかったです。PageSpeed Insights からのお小言が減ったって感じで。

追記
あとで気がついたのですが、「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」で列挙されていたcssファイルやjsファイルが「Autoptimize」プラグインの導入後、かなり減っていました。Autoptimize プラグインにまとめられているようです。
ちなみに最後まで残ったのはnend とjQueryです。

サーバーの応答時間を短縮する

サーバ自体には手を出す予定(能力?)がないので今回はキャッシュに頼ります。使っているテーマはSimplicity2 でキャッシュ系のプラグインと相性は悪いそうですが、今回は多少なりとも検証されている「W3 Total Cache」プラグインを次のサイトの手順に従って入れました。

PCとスマホを分けて綺麗に高速表示してくれるWPキャッシュプラグイン「W3 Total Cache」の簡単設定方法
パソコンとモバイルを分けてキャッシュを作成してくれるW3 Total Cacheプラグインの設定方法です。Wordpress環境でサーバーの応答時間がかなり早くなるのでページ表示が高速化が図れます。
古いモバイル機器では表示が崩れることもあるようですが、今回は対応(気に)しないことにしました。

対応後、PageSpeed Insights は65点に向上しました。。。それだけ?

PageSpeed Insights 画面

65点になって初めて表示が赤から黄色になりましたが、ちょっとイラッとしました(笑)。

jQuery.js関連に再挑戦してみた

いろいろ調べ直してみたところ、レンダリングのところで引っかかったjQuery.jsをコピペレベルで解消できる方法がありましたので、設定しました。

WordPressヘッダーでレンダリングブロックしているJavascriptをフッターで読み込むカスタマイズ方法
ヘッダーでJSファイルが読み込まれていると、ページの読み込みが遅くなります。それを防ぐために、WordpressでJSリソースファイルの読み込みを、ページの最後の方で読み込んで、レンダリングブロックを防ぐカスタマイズ手順です。

設定後放置しましたが、特に問題なさそうなのでそのまま適用としました。

これでPageSpeed Insights は68点となり、今回の挑戦は終了となりました。

PageSpeed Insights 画面

PageSpeed Insights 対応のまとめ

いくつか簡単な設定を変更(クリック&コピペ)した結果、53点から68点と15点アップとなりました。目標の70点に届かず。。。

PageSpeed Insights 対応のポイントはレンダリング関連?

今回ひとつひとつPageSpeed Insights の指摘事項に対応してみましたが、ちょっとずつしか点数アップできませんでした(それでもトータルでは早くなります)。

レンダリングへの対応が完璧になればかなりの点数アップが望めそうですが、WordPressと既成のテーマを使っている以上、ある程度以上の対応はチューニング命の方でないと難しいと思います。

それでも実験サイトは早くなりました。

とはいえ、PageSpeed Insights の得点はともかくとしても体感的にはページの表示速度が早くなったのでその点は対応してよかったです。

サイトを他の人にも見てもらいましたが早くなったという感想をもらったので、この作業量であれば今後のサイトにも適用していってもいいかなと思いました。

このサイトにも順次適用予定です。

追記1
nend のファイルが何個か指摘に出てきましたが、外したところで他のファイルがレンダリングの邪魔をしている限り対してPageSpeed Insights の得点には影響ありません。nend を導入すると遅くなるとかいう意見もネット上にありましたが、ギリギリのチューンナップを考えなければ、誤差の範囲に収まる程度なのだと思います。
追記2
ちょっと悔しかったので、nend を試しに外して計測してみました。結果は71点。
PageSpeed Insights 画面
まだ「Autoptimize」プラグインにまとめられたcssがレンダリングの邪魔をしているとのことでこれ以上いじると今後の調整が大変そうなのでここで終了です。
スポンサーリンク
python357通常PC