PageSpeedInsights is Updated 2018/11

この記事では、更新されたPageSpeedInsightsについて書きます。半年ぐらい前に、検索エンジンの順位付けにページの表示速度を利用すると発表がありました。

人々はできるだけ早く質問に対する回答を見つけることができるようにしたいと考えています。研究によれば、人々はページのスピードを本当に気にしています。スピードはしばらくの間ランク付けに使用されていましたが、その信号はデスクトップ検索に集中していました。今日では、2018年7月からページ速度がモバイル検索のランキング要素となることを発表しています。

Using page speed in mobile search ranking
Official news on crawling and indexing sites for the Google index
webmasters.googleblog.com

初代のブログは格安サーバーでそんなに速度が早くないロリポップサーバーを利用していたので、急いでXサーバーに移転しました。移転直後は、PageSpeedInsightsの得点がほぼ100点でした。更新されたPageSpeedInsightsではどうなったかなと思い、

早速得点を計測してみると次のようになっていました。

パソコンは良いとして、、、モバイルは芳しくありません。

パソコンの結果について
モバイルの結果について
1. NGだった項目
2. OKだった項目
まとめ

パソコンの結果について

パソコンは100点ですが、実はよく見ると改善点があります。

ウェブフォント読み込み中のテキストの表示
- フォント表示の CSS 機能を使用して、ウェブフォントの読み込み中にユーザーがテキストを見られるようにしてください。
静的なアセットと効率的なキャッシュポリシーの配信
- キャッシュの有効期間を長くすると、再訪問したユーザーへのページの読み込み速度を向上できます。
クリティカルなリクエストの深さの最小化
- 下のクリティカルリクエストチェーンでは、高い優先度で読み込まれたリソースを確認できます。チェーンの長さを縮小する、リソースのダウンロードサイズを抑える、不要なリソースのダウンロードを遅らせるなどしてページの読み込み速度を改善することをご検討ください。
カスタム速度の記録と計測
- User Timing API を使用してアプリをインストルメント化し、主要なユーザーエクスペリエンスでのアプリの実際のパフォーマンスを測定できるようにしてください。

このエラーを見た感想としては、1と2は対応できそう。3は無理。4はアプリではないんですが、、、ブログもPWA必須の時代到来ですかねぇ。徐々に対応していきたいと思います。

モバイルの結果について

モバイルの方は、たくさんご指摘を頂いております。

NGだった項目

ウェブフォント読み込み中のテキストの表示
静的なアセットと効率的なキャッシュポリシーの配信
メインスレッド処理の最小化
- JS の解析、コンパイル、実行にかかる時間の短縮をご検討ください。配信する JS ペイロードのサイズを抑えると効果が見込めます。
JavaScript の実行にかかる時間の低減
- JS の解析、コンパイル、実行にかかる時間の短縮をご検討ください。配信する JS ペイロードのサイズを抑えると効果が見込めます。
過大な DOM サイズの回避
- ブラウザエンジニアは、ページに含まれる DOM のノード数が 1,500 個を超えないようにすることを推奨しています。ツリーの深さは 32 要素まで、子や親の要素数は 60 個までにするのが最適です。DOM サイズが大きいと、メモリの使用量が増え、スタイルの計算に時間がかかり、レイアウトのリフローというコストが発生します。
クリティカルなリクエストの深さの最小化
カスタム速度の記録と計測