この記事では、更新されたPageSpeedInsightsについて書きます。半年ぐらい前に、検索エンジンの順位付けにページの表示速度を利用すると発表がありました。
人々はできるだけ早く質問に対する回答を見つけることができるようにしたいと考えています。研究によれば、人々はページのスピードを本当に気にしています。スピードはしばらくの間ランク付けに使用されていましたが、その信号はデスクトップ検索に集中していました。今日では、2018年7月からページ速度がモバイル検索のランキング要素となることを発表しています。
初代のブログは格安サーバーでそんなに速度が早くないロリポップサーバーを利用していたので、急いでXサーバーに移転しました。移転直後は、PageSpeedInsightsの得点がほぼ100点でした。更新されたPageSpeedInsightsではどうなったかなと思い、
早速得点を計測してみると次のようになっていました。
パソコンは良いとして、、、モバイルは芳しくありません。
パソコンの結果について
パソコンは100点ですが、実はよく見ると改善点があります。
- ウェブフォント読み込み中のテキストの表示
- フォント表示の CSS 機能を使用して、ウェブフォントの読み込み中にユーザーがテキストを見られるようにしてください。
- 静的なアセットと効率的なキャッシュ ポリシーの配信
- キャッシュの有効期間を長くすると、再訪問したユーザーへのページの読み込み速度を向上できます。
- クリティカルなリクエストの深さの最小化
- 下のクリティカル リクエスト チェーンでは、高い優先度で読み込まれたリソースを確認できます。チェーンの長さを縮小する、リソースのダウンロード サイズを抑える、不要なリソースのダウンロードを遅らせるなどしてページの読み込み速度を改善することをご検討ください。
- カスタム速度の記録と計測
- User Timing API を使用してアプリをインストルメント化し、主要なユーザー エクスペリエンスでのアプリの実際のパフォーマンスを測定できるようにしてください。
このエラーを見た感想としては、1と2は対応できそう。3は無理。4はアプリではないんですが、、、ブログもPWA必須の時代到来ですかねぇ。徐々に対応していきたいと思います。
モバイルの結果について
モバイルの方は、たくさんご指摘を頂いております。
NGだった項目
- ウェブフォント読み込み中のテキストの表示
- 静的なアセットと効率的なキャッシュ ポリシーの配信
- メインスレッド処理の最小化
- JS の解析、コンパイル、実行にかかる時間の短縮をご検討ください。配信する JS ペイロードのサイズを抑えると効果が見込めます。
- JavaScript の実行にかかる時間の低減
- JS の解析、コンパイル、実行にかかる時間の短縮をご検討ください。配信する JS ペイロードのサイズを抑えると効果が見込めます。
- 過大な DOM サイズの回避
- ブラウザ エンジニアは、ページに含まれる DOM のノード数が 1,500 個を超えないようにすることを推奨しています。ツリーの深さは 32 要素まで、子や親の要素数は 60 個までにするのが最適です。DOM サイズが大きいと、メモリの使用量が増え、スタイルの計算に時間がかかり、レイアウトのリフローというコストが発生します。
- クリティカルなリクエストの深さの最小化
- カスタム速度の記録と計測
パソコン画面に比べて増えた指摘を赤色にしました。その中の2つはJSが原因。最後の1つはWordPressを使っていると難しいかもしれませんね。
OKだった項目
- レンダリングを妨げるリソースの除外
- 適切なサイズの画像
- CSS の最小化
- JavaScript の最小化
- 使用していない CSS の遅延読み込み
- 効率的な画像フォーマット
- テキスト圧縮の有効化
- 必須のドメインへの事前接続
- 複数のページ リダイレクトの回避
- キー リクエストのプリロード
- アニメーション コンテンツでの動画フォーマットの使用
- 過大なネットワーク ペイロードの回避
更新前のPageSpeedInsightsの項目についてはクリアできているなという感じです。
まとめ
この記事では、更新されたPageSpeedInsightsについて書きました。前回よりモバイルの採点が厳しくなっています。最近、検索流入が一気に落ちたのは、モバイルページの表示速度で原点を食らったからかもしれませんね。また、１つ１つ改善を図っていきたいと思います。
コメント