「PageSpeed Insights」のスコアがLighthouseで分析されるようになって大変|Googleのスピード測定ツール

投稿ページ画像 IT
この記事は約5分で読めます。

Googleが提供するパフォーマンス測定ツール「PageSpeed Insights」が分析エンジンに「Lighthouse」を使用するようになっていました。(2018年11月14日 公式ブログにて公表)

Googleの提供しているパフォーマンス測定ツールの分析エンジンが代わりその影響を多くのサイトが受けたと思います。

当サイトももちろん例外ではなく、かなり影響を受けました。PC版はともかくとして、モバイル版のスコアはとても低いものがありました。もし興味があればスコア等も載せていますので参考になればと思います。

以前のPageSpeed Insights結果

今回のPageSpeed Insights結果

パソコンでの表示はいいんです。99点なんで。これ以上は無理でしょ。
問題はモバイル端末のスコアです。
検索のほとんどはモバイルなので、このスコアが低いことは見過ごせません。

対策しましょう。
そうしましょう。

ADD

今回のPSIの指標となるものは?

分析エンジンが変われば当然大切にしている指標が異なります。
今回、Lighthouseの指標は以下のようです。
1.コンテンツの初回ペイント (First Contentful Paint)
2.速度インデックス (Speed Index)
3.インタラクティブになるまでの時間 (Time to Interactive)
4.意味のあるコンテンツの初回ペイント (First Meaningful Paint)
5.CPU の初回アイドル (First CPU Idle)
6.入力の推定待ち時間 (Estimated Input Latency)

Lighthouseが大切にしている指標がわかったところで、次はそれぞれが何を指しているのか分析しましょう。

コンテンツの初回ペイント(First Contentful Paint)

コンテンツの初回ペイントとは、簡単に言うとテキストまたは画像が初めてペイントされるまでにかかった時間です。

速度インデックス(Speed Index)

速度インデックスとは、ページのコンテンツが取り込まれて表示される速さを表します。

インタラクティブになるまでの時間(Time to Interactive)

ページが完全にインタラクティブになるまでの時間です。

意味のあるコンテンツの初回ペイント(First Meaningful Paint)

意味のあるコンテンツの初回ペイントとは、ページの主要なコンテンツが可視化されるまでにかかった時間です。

CPU の初回アイドル (First CPU Idle)

CPU の初回アイドルとは、ページのメインスレッド処理が静止し、初めて入力の処理が可能になるまでにかかった時間です。

入力の推定待ち時間(Estimated Input Latency)

上のスコアは、ページ読み込みの最もビジーな 5 秒間における、ユーザーの入力に対するアプリの応答時間(ミリ秒)です。待ち時間が 50 ミリ秒より長い場合、アプリの反応が悪いと思われる可能性があります。

サイトの改善が出来次第レポートを提供したいと思います。

対応後PageSpeed Insightsスコア

まずは対応後のスコアは以下です。

何をやったの?

画像圧縮系のプラグインの変更

EWWW Image Optimizer

以前はパンダのマークのプラグインを使用していたのですが、今回変更してみました!

※(Compress JPEG & PNG images)というプラグインを使ってました。

今回の分析エンジンの変更に伴い、JPEG、PNGといった画像ではスコアが下がります。そのため、ウィッピー(webp)という拡張子の画像にEWWW Image Optimizer で変換します。

キャッシュ系のプラグインの変更

WP Fastest Cache

これも同様で、使用していたものを変更しました。

WEBフォントの廃止

以前はWEBフォントを使用していたため、読み込みにかなり時間がかかってしまっていました。

PNG?JPEG?圧縮?いやいやWEBPらしいぞ。

スコアレポートを見るとPNGやJPEGファイルをいくら圧縮しようが、拡張子が左記であれば、まだサイズを小さくできるとレポート上で怒られてしまいます。WEBPはなにも新しくもなにもない(詳しくはないので調べていただきたいです)のですが、たしかChrome上?でしか動作しないファイルだったような気がしていて当サイトでは画像を圧縮しかしていませんでした。※違うブラウザ(Chrome以外)ではwebpではなく、サイトにアップロードしたpngもしくはjpegといったファイルが使用されるはず…

スコアが低いままなのも癪なのでどこまでスコアをあげられるか試してみたら、PC版は100点を取ることができました。そこで今回使用したプラグインの内容をすべて公開です。といっても1つしか導入していないのですが。

プラグインを導入しよう

今回導入したのはEWWW Image Optimizerです。PNG、JPEGからWEBPに変換してくれるプラグインです。ただ、おそらく多くの方が使用しているであろう、画像圧縮系のプラグインとは競合してしまうため、どちらかは停止しておく必要があります。

 設定方法は1点を除き簡単です。インストールすると以下の設定ページからWebPタブを選択します。JPG、PNGからWebPにチェックを入れます。すると、↓

すると、下記画像が設定ページ下に表示されるようになります。要は、.htaccessファイルにこの白枠内の文字列全てを挿入してくれと言っています。

あとはINSERTボタンを押すだけで大丈夫です。

画像アップロード中にHTTPエラー(2019/07/02追記)

画像アップロード中にHTTPエラーで画像がWordPressにアップロードできなくなりました。何回か失敗することは以前からあったのですが、ここ最近では毎回エラーとなってしまいアップロードできない自体に。。。

プラグインが悪い?と思い、停止させてからアップロードを行うも失敗。

結果から言うと、サーバー側の設定でした。

何回か実行するうちにHTTPエラー以外に下記のエラーメッセージが表示されていました。

Fatal error: Maximum execution time of 30 seconds exceeded

30秒経っても処理が終了しないから、強制終了するね!みたいな感じです。

これはプラグインとかネットワーク環境の問題とか色々ありそうですが、30秒以上にすればとりあえずタイムアウトは回避できます。

コメント

タイトルとURLをコピーしました