SEOに影響を与える表示速度改善【画像編】

画像ダイエット

ページ表示速度の重要性

サイトを立ち上げたばかりの時は、サイトのデザインやコンテンツの作成に時間をさいてしまい、ページの表示速度にまで意識が回らない事もあるかと思います。

コンテンツの中身やデザインも非常に重要ですが、頑張って作ったサイトを見てもらうために、表示速度も非常に重要です。

表示速度が遅いと、どのようなデメリットが生じるかよく理解して、しっかりと対策していきましょう。

SEOへの影響

2018年、Googleは『ページの読み込み速度を検索ランキングの要素に使用する』ことを正式にアナウンスしました。

ページの表示速度が速ければ速い程高評価を受けるといったものでは無く、表示速度の遅いページの評価を下げるといった内容になっています。

『ページ単位』ではありますが、表示速度の遅いページがいくつもあると、結果的にサイト全体の評価に影響が及んでしまうかもしれません。

また、初期の段階から表示速度を意識していれば後々の修正も楽になるため、早いうちから対策していきましょう。

あくまでも、表示速度が遅いページが評価を下げられるため、あまり神経質になる必要は無く、一定の基準を満たしていればSEO上は問題ありませんが、自分のサイトの表示速度を計測した事の無い方は一度確認してみると良いかと思います。

以前までは、PC上でのページの読込速度の評価がアルゴリズムに用いられていましたが、現在はモバイル上でのページ読込速度の評価がアルゴリズムに対し適用されています。

特に、レスポンシブデザインを使っている方や、PCとスマホで表示を分けている方は、スマホでの表示速度に注意しましょう。

ユーザーエクスペリエンスを損なう

ページの表示速度はSEOへの影響だけではありません。

むしろユーザーに対しての影響の方が大きいです。

自分がページを見るときは、当然すんなりページが表示された方が良いはずです。

ページ表示速度が遅いと直帰率や離脱率の数値が大幅に上がるというデータも存在します。

頑張って作ったページが、表示速度が遅いがために読まれる事なく他のサイトへ行かれてはもったいないです。

SEO上はあくまでも『一定基準』を満たしていれば問題ありませんが、ユーザーにとっては少しでも速い方が良いわけで、直帰率や離脱率は現状、SEOへの影響は無いと言われていますが、Googleのかかげるユーザーファーストには反してしまうため、今後SEOへの影響が出てきてもおかしくはありません。

サイトスピードチェック

まずは、自分のサイトのページのスピードを確認してみましょう。

サイトの表示速度をチェックするには、Googleが提供しているPageSpeed Insightsを使うのがおすすめです。

表示速度の確認方法は簡単で、『PageSpeed Insights』にアクセスし、調べたいサイトのページのURLを入力し、『分析』ボタンを押すだけです。

PageSpeed Insights

そうすると、表示速度の点数や改善点を教えてくれます。

測定結果

  • 赤表示:0~49
  • 黄色表示:50~89
  • 緑表示:90~100

先ほど述べたように、表示速度が遅い場合に評価を下げられる可能性があるため、赤表示(0~49点)となってしまったページは対策が必要かと思います。

100点を取る必要はありませんし、無理にサイトのデザインを変更してまで対応する必要も無いかと思いますが、ユーザーの利便性を向上させるためにも高得点を目指しましょう。

この点数ですが、『回線状況』や『サーバーの状況』、『測定したデバイスの性能や状況』によって毎回異なる数値が出ます。

点数はあくまでも参考にし、『改善点』を表示してくれるので、1つ1つ対応できるものは対応していきましょう。

画像ファイルサイズ削減方法

ページの表示速度を改善する方法は色々ありますが、『PageSpeed Insights』に画像への指摘があった方は、画像に対してしっかりと対策しましょう。

既に多くの画像をアップロードしている方は非常に手間な作業になってしまいますが、簡単で効果の高い対策なので、是非実践しましょう。

特に『速度の向上』はもちろん、画像はファイルサイズも大きいため『通信容量の削減』にも大きな効果を発揮するため、ユーザーエクスペリエンスの向上にもつながります。

01適切なサイズに変更

画像には『サイズ』があります。

画像サイズ(大きさ)を適切なサイズに変更する事で、画像のファイルサイズを小さくする事ができます。

ここに1枚の写真があります。

未加工の画像

この画像は未加工の状態で、『大きさ:1920*1281px』、『1.35MB』です。

つまり、ユーザーがこのページを表示した場合、この画像を表示するだけで、『1.35MB』の通信容量を使ってしまいます。

ツールを使って、『大きさ:1920*1281px』の画像ファイルを、『大きさ:600*400px』に変更してみます。

縮小後の画像

未加工の状態で『1.35MB(1,350kB)』であったファイル容量は、『134KB』にまで小さくなりました。

画像や縮小するサイズによって結果は異なりますが、今回は『約10分の1』の容量に削減する事ができました。

画像を表示する際、デバイスの画面サイズによって表示される大きさは異なりますが、サーバーにアップロードされている画像を取込み、その画像を画面サイズに合わせて、『小さく』または『大きく』表示しています。

そのため、不必要に大きな画像を使うのは避けるべきです。

ただし、画像大きさを小さくするデメリットもあります。

画像を小さくする事で解像度が落ちると画質が悪くなる可能性があります。

画像サイズを変更するツールによって、解像度の劣化具合は異なります。

そのため、とにかく小さくすれば良いというものではなく、『適度』に縮小しましょう。

また、画像の使い方によってもその度合いは異なります。

その画像がメインで使われている場合、例えばデザイン性の高い商品画像などは少しでも綺麗に見せたいため、あまり縮小しない方が良いかもしれません。

逆に、単純な画像や判別できれば良いといった画像はある程度縮小してしまった方が良いかもしれません。

また、上に掲載した2つの画像は、表示サイズを指定していないため、PCなどの大きな画面デバイスで表示した場合、表示サイズは異なりますが、スマートフォンなどの画面の小さなデバイスで見た際は表示される大きさは変わりません。

2枚を比較して、『特に見た目上変わりはない』と思われる場合は、縮小すべき画像ではないでしょうか。

画像の縮小方法

私はこのサイトで使っている画像は、画像を縮小する!というツールを使わせていただき、縮小しています。

以前は別のツールを利用していましたが、こちらのツールの方が画像の劣化が少なく感じたため、今はこちらを利用しています。

画像を縮小するサイトキャプチャ

画像をドロップし、画像サイズを選択する事で簡単に変換できるためおすすめです。

無料で利用できるにもかかわらず、一度に20枚までサイズを変更する事が可能です。

また、画像の一部を切り取って使いたい際は、画像加工編集サイトさんのツールを使わせてもらっています。

02画像の圧縮

上に書いた①の方法では、『画像の大きさ(px)』を縮小する事で、画像のファイル容量を削減させました。

他にも、画像の大きさは変えずにファイルサイズを削減する方法もあります。

基本的にファイル容量を削る場合は、画質を犠牲にしているのですが、見た目はほとんど変わらずにしっかりとファイル容量を削減できるため非常におすすめです。

例えば、上で例にした『大きさ:1920*1281px』、『1.35MB』の画像を圧縮すると、大きさは変わらず、容量は『276KB』まで削減する事ができました。

さらに縮小した『大きさ:600*400px』、『134KB』の画像を圧縮すると、容量は『30.4KB』にまで削減されます。

画像をページ内に多く使う場合は、1枚が100KBを越えると、10枚表示するだけで1MBもの通信容量をくってしまうため、できれば数十KBまで落とす事をおすすめします。

そのため、面倒ですが、大きさの縮小とファイルの圧縮の両方の対策を実施するのがベストかと思います。

画像の圧縮方法

当ブログでは、JPGイメージをオンラインで圧縮するというツールを使わせていただき、画像ファイルを圧縮しています。

『日本語』に対応しており、枚数制限等も無く非常に使い易いです。

以前は、JPEGminiというツールを使っていましたが、無料版の場合、一日に圧縮できる枚数に制限があり、インターフェースも使いにくくなってしまったため、現在は『JPGイメージをオンラインで圧縮する』というツールのみ利用しています。

JPGイメージをオンラインで圧縮するサイトキャプチャ

画像をドロップするだけで、画像を圧縮してくれます。

こちらも、無料で利用できるにもかかわらず、一度に20枚まで圧縮する事が可能です。

記事作成日:2021.05.30