90点超えは実は簡単!ページスピード対策はこの3つだけ対応すればOK! ノウハウ

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

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

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

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

スポンサーリンク

ページスピードとは

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

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

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

Page Speed Insights(PSI)

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

PageSpeed Insights
スポンサーリンク

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

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

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

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

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

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

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

スポンサーリンク

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

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

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

  • 画像を圧縮していない
  • PCとスマホで同じ画像を使っている

画像を圧縮していない

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

TinyPNG – Compress PNG images while preserving transparency
Make your website faster and save bandwidth. TinyPNG optimizes your PNG images by 50-80% while preserving full transparency!

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

PCとスマホで同じ画像を使っている

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

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

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

srcsetとsizes属性でサイズ(解像度)ごとに画像を出し分ける方法
これからのレスポンシブイメージは表示サイズに加えて高解像度デバイスへの対応も必要です。JavaScriptを使わずにHTMLだけで画像ファイルを切り替えられる srcset と sizes 属性の書き方・使い方について詳しく解説します。
スポンサーリンク

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

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

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

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

スポンサーリンク

まとめ

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

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

ノウハウ
スポンサーリンク
amelog