Googleが以前より、ページスピード（サイトの表示速度）を意識していることはすでに周知のことかもしれないですが、
そんな中でウェブマスターのみなさんが自サイトがどのくらいの表示速度なのかを定量的に観測するツールとして、
「Page Speed Insight」（以後PSI）を活用されている方が多いのではないでしょうか。

11月に入りPSIがアップデートされ、URLを入力し分析するためのエンジンを「Lighthouse」に変更したとの発表がありました。

https://webmaster-ja.googleblog.com/2018/11/pagespeed-insights-now-powered-by.html

改善項目として何が変更されたのか以下各項目の紹介をしていきます。

新ページスピードインサイト改善項目

1.オフスクリーン画像の遅延読み込み

2.次世代フォーマットでの画像の配信

3.レンダリングを妨げるリソースの除外

4.適切なサイズの画像

5.使用していない CSS の遅延読み込み

6.効率的な画像フォーマット

7.サーバー応答時間の短縮（TTFB）

8.CSS の最小化

9.テキスト圧縮の有効化

10.JavaScript の最小化

11.必須のドメインへの事前接続

12.複数のページ リダイレクトの回避

13.キー リクエストのプリロード

14.アニメーション コンテンツでの動画フォーマットの使用

15.ウェブフォント読み込み中の全テキストの表示

 

オフスクリーン画像の遅延読み込み

オフスクリーンの非表示の画像は、クリティカルなリソースをすべて読み込んだ後に遅れて読み込むようにして、インタラクティブになるまでの時間を短縮することをご検討ください。

次世代フォーマットでの画像の配信

JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。

JPEG 2000に関してはiOS系（Safari等）、

JPEG XRに関してはMicrosoft系（IEやEdge等）、

Webpに関しては多くのブラウザ（ChromeやFirefox等）で、

それぞれ表示可能となっています。

すべてのブラウザに対応した規格は今のところないですがWebpが最も良いかと考えられます。

Webサイトへの実装方法は、各画像のソースを以下のように変更すれば完了です。

レンダリングを妨げるリソースの除外

ページの初回ペイントをリソースが阻害しています。クリティカルな JS や CSS はインラインで配信し、それ以外の JS やスタイルはすべて遅らせることをご検討ください。

適切なサイズの画像

適切なサイズの画像を配信して、モバイルデータ量と読み込み時間を抑えてください。

使用していない CSS の遅延読み込み

使用していないルールをスタイルシートから削除して、データ通信量を減らしてください。

効率的な画像フォーマット

画像を最適化すると、読み込み時間を速くして、モバイルデータ量を抑えることができます。

サーバー応答時間の短縮（TTFB）

最初の 1 バイトまでの時間は、サーバーが応答を返すまでにかかった時間を表しています。

CSS の最小化

CSS ファイルを最小化すると、ネットワーク ペイロードのサイズを抑えることができます。

テキスト圧縮の有効化

テキストベースのリソースは圧縮（gzip、deflate、または brotli）して配信し、ネットワークの全体的な通信量を最小限に抑えてください。

JavaScript の最小化

JavaScript ファイルを最小化すると、ペイロード サイズとスクリプトの解析時間を抑えることができます。

必須のドメインへの事前接続

事前接続または DNS プリフェッチのリソースヒントを追加して、重要な第三者ドメインへの接続を早期に確立できるようにすることをご検討ください。

複数のページ リダイレクトの回避

リダイレクトを行うと、ページの読み込みにさらに時間がかかる可能性があります。

キー リクエストのプリロード

<link rel=preload> を使用して、現在ページ読み込みの後のほうでリクエストしているリソースを優先的に取得することをご検討ください。

https://developer.mozilla.org/ja/docs/Web/HTML/Preloading_content

https://developers.google.com/web/tools/lighthouse/audits/preload

詳しい内容は上記にありますが、簡単にまとめると、

『ページを読み込み後すぐにページに必要なファイルを、優先度の高いファイルと同タイミングで読ませましょう。』

といった内容になります。

記述方法としては、

<link rel=”stylesheet” href=”/sample.css”>
<link type=”text/javascript” src=”/sample.js”>

とあった場合に、

<link rel=”preload” href=”sample.css” as=”style”>
<link rel=”preload” href=”sample.js” as=”script”>

このように書き換えることが必要事項となります。

アニメーション コンテンツでの動画フォーマットの使用

サイズの大きい GIF は、アニメーション コンテンツの配信方法として効率的ではありません。ネットワークの通信量を抑えるため、GIF を使用する代わりに、アニメーションには MPEG4/WebM 動画、静止画像には PNG/WebP を使用することをご検討ください。

ウェブフォント読み込み中の全テキストの表示

フォント表示の CSS 機能を使用して、ウェブフォントの読み込み中にユーザーがテキストを見られるようにしてください。

まとめ

現時点では実装が比較的難しい項目もありますが、全ては流入してきてくれるユーザーさんのために、早いに越したことはありません。

ぜひできるところから対策してみてください。