90点超えは簡単！ページスピードインサイトはこの3つだけ改善すればOK

WEBサイトにおいてとても重要な「ページスピード」。

Page Speed Insights（ページスピードインサイト）で指摘されやすい項目の中で、大幅に点数が上がる項目が3つあります。
その3つの項目をピックアップして、改善策をご紹介します。

とにかく少しでも点数を上げたい場合は、この3つを対応すれば点数アップが見込めます。

この記事の目次

ページスピードとは

サイトにアクセスした時に、サイトが表示されるまでの速さを指します。

サイトが表示されるまでに何秒も待たされて、イライラした経験ありませんか？
ページスピードが原因で、ユーザーが離脱してしまうことはとても多いのです。

あなたのサイトのページスピードが遅かったら、それを改善することでユーザーの離脱を防ぐことができるかもしれません。
下記のツールを使うことでページスピードをチェックすることができます。

Googleが無料で提供しているツールで、ページスピードが下がっている原因を調べることができます。
「ページスピードインサイト」と読みます。

大体上位に表示されやすい項目です。
項目名だけ見てもピンとこないので、クリックして詳細を表示します。

要するに、
「JPGやPNGを使わずに、「JPG 2000」「JPEG XR」「WebP」の画像形式を使いましょう。」
という意味です。

「じゃあその画像形式に変換すれば良いんだな」と考えますが、この対応はまだやらない方が良いです。
これらの画像形式はまだ対応しているブラウザが少ないからです。
サポートしていないブラウザでみたユーザーには、画像が見れなくなってしまうんです。

ではどうすれば良いかというと、とりあえずは何もしなくてOKです。

理由は、後述する「効率的な画像フォーマット」と「オフスクリーン画像の遅延読み込み」の2項目を対応すれば同時に解消するためです。

なのでいったん置いておいて、次の項目に進みましょう！

2つ目は、「効率的な画像フォーマット」。
クリックして詳細を確認します。

この項目が表示される場合は、下記の2つが影響しています。

これは簡単に解決できます。
下記のオンラインツールを使って、指摘を受けた画像を圧縮するだけです。

※一度の圧縮につき、20ファイル&5MBまでの制限があります。

スマホ対応（Retinaディスプレイ対応）のために2倍サイズの画像を、PCと共通で使用している場合に指摘されます。

PC：等倍サイズ
スマホ：2倍サイズ

と、画像を出し分けるようにすれば解消します。
下記の記事でご紹介されている「srcset」を使った方法で対応すればOKです。

3つ目は「オフスクリーン画像の遅延読み込み」。
詳細を見てみます。

難しく書いてありますが、「表示領域に入ってから画像を読み込むようにしましょう」という意味。

「画像の遅延読み込み」もしくは「プログレッシブ画像」を使用して対応します。
以下の記事でそれぞれの使い方を詳しくご紹介しています。

この3項目を対応して、もう一度計測してみてください。
「次世代フォーマットでの画像の配信」も含め、解消しているのではないでしょうか。

ページスピードが遅いとユーザーも離脱しやすくなってしまうので、できる限り点数は上げておきたいですね。