「自社サイトの表示速度が、他のサイトに比べて遅い気がする・・」そんなお悩みはありませんか？
表示速度が遅いと、ユーザーにストレスを与えるのはもちろん、SEO対策の観点においても大きなマイナスとなります。表示速度が遅くなるのには様々な原因がありますが、きちんと突き止めて改善すれば、アクセス数やCVが向上する可能性もあります。
本記事では、表示速度を改善するメリットや確認方法と、画像の修正によって表示速度を改善する方法についてご紹介します。
メリットしかない！Webサイトの表示速度を改善する重要性
表示速度とは、サイトにアクセスした時やサイト内の遷移時の表示までにかかるスピードのことを指します。
そしてこの速度は、速ければ速いほど良いとされています。
Googleは、2018年にモバイルサイトの表示速度と直帰率について、以下のように発表しています。
上記から分かるように、表示速度が遅くなればなるほど、ユーザーの直帰率は悪化しています。
（直帰率：サイト内で1ページしか見ずにサイトから離脱してしまったユーザーの割合を表す指標）
ページの表示速度が遅いと、それだけでユーザーのストレスになり、ユーザーに嫌われてしまいます。どんなに優れたコンテンツを作っても、サイト速度が原因でサイトを閲覧してもらえなくなるのは非常にもったいないです。また、表示速度が遅いとGoogleからの評価でも不利になる可能性が極めて高いと言えます。
表示速度改善による具体的なメリットとしては、以下が挙げられます。
・ユーザーにとって快適なサイトになるため、直帰率が下がる
・Googleの評価が上がるため、検索順位が上がる。検索順位が上がることにより、アクセス数・CVが上がる可能性が高い
2021年６月（※1）よりGoogleの検索ランキング要因に取り込まれることが予定されている「コアウェブバイタル（Core Web Vitals）」(※2)というUXの３つの指標のうち、２つに表示スピードに関する指標が含まれており、今後表示スピードがよりSEOに影響することが確実視されています。そのため、今まで以上に表示速度の改善の重要性が高まってくることが予想されます。
Webサイトの表示速度を改善する重要性を踏まえて、次項からは自社サイトの状態を確認してみましょう。
※1. Googleの発表では2021年5月から導入予定の発表でしたが6月予定に変更となりました。
※2. Core Web Vitalsは、下記、３つの指標により評価されます。
LCP: 読み込みパフォーマンスの測定になります。ブラウザ表示領域においてもっとも大きな画像などのメインコンテンツが表示されるまでにかかった時間になります。ページの読み込みが最初に開始されてから2.5秒以内にすることが求めらます。
FID:クリックしてからの挙動スピードを測定するもので、ユーザーが第一印象として感じる、反応速度になります。100ミリ秒以下でことが求められます
CLS: 視覚要素の安定性を示す指標になり、本記事の表示速度とは関係ない指標になります。
無料かんたんチェック！Webサイトの表示速度の確認方法
Page Speed Insightsを使う方法
まず、Googleが無料で提供している Google PageSpeed Insights（https://developers.google.com/speed/pagespeed/insights/）というツールからご紹介します。
URLを入力するだけでGoogleの評価に沿ってモバイル・PCの表示速度を100点満点で計測し、具体的な改善点の提案をしてくれるので、慣れない方でも簡単に利用することが可能です。
GTmetrixを使う方法
次に、GTmetrix（https://gtmetrix.com/）での確認方法についてご説明します。
GTmetrixは、PageSpeed Insightsと同様に表示速度計測ができる無料ツールです。
日本語表示には対応しておりませんが、ページごとの表示時間をタイムラインを見たり、結果をPDFで出力することができます。結果をより細かく分析したいという方におすすめです。
さっそく実践！Webサイトの表示速度改善方法（画像編）
表示速度が遅くなる原因はサイトによってさまざまですが、今回の記事では、画像のサイズや形式が原因の場合の表示速度改善方法に絞ってご紹介させていただきます。
特に、容量の大きい画像を使用しているサイトや、画像をたくさん使用しているサイトでは大きな効果が見込まれます。「画像が原因かどうか分からない」「画像はおそらく大丈夫」と思っている方も、自社サイトで使用されている画像に以下の対応がきちんと実施できているかを確認してみてください。
サイト内で使用している画像の容量を削減する
近年はRetinaディスプレイ対応のため、実際に表示されるサイズよりも画像を大きく書き出してサイトに掲載しているサイトが多くあります。画像はサイズ・解像度が大きいほどきれいに見えますが、必要以上に大きい容量のまま使用してしまうと画像の読み込みに時間がかかってしまい、結果的にユーザー体験を損ねてしまいます。
画質を落とせば画像容量が下がって読み込み速度が改善されますが、それでは視認性が落ちてしまいますので画質を保ったまま容量を圧縮する必要があります。
画像一つ一つをPhotoshopなどの画像編集ツールで手作業で調整する方法もありますが、時間がかかってしまいます。そのため弊社では下記のような画像圧縮ツールで容量を圧縮するようにしています。少ない手間で、かつ画像の劣化を最小限に抑えながら容量を落とすことができます。
・Compressor.io （https://compressor.io/）
・Optimizilla（https://imagecompressor.com/ja/）
Retinaディスプレイ対応の場合もそうでない場合も、実際のサイトでの表示サイズで見た時に画質が粗いと感じない範囲内で、容量削減の対応を実践してみてください。
画像情報に応じた適切な書き出し方に変更する
次に、画像を適切な書き出し形式に変更する対応をご紹介します。画像には以下のようにそれぞれ最適な書き出し形式があり、内容に合わせて設定をすることで画質を保ったまま容量を落とすことができます。
・JPEG：色数の多い写真など
・SVG：文字やアイコンなど、色数が少ない単純な画像
・PNG：キャプチャ画像、図など
PNGは扱える色数も多く、透過が可能、「可逆圧縮」の画像形式なので低画質で保存しても元の画質に戻すことができるなど、非常に便利な拡張子です。そのため、つい「とりあえずPNGにしておくか」となってしまいがちですが、反面、他の拡張子に比べて書き出しの際に容量が大きくなってしまうことが多いという難点があります。
その点、JPEGやSVGはPNGに比べて容量が比較的削減できる場合が多いため、色数が多い場合はJPEG、少ない場合はSVGなど、画像の情報によっては書き出し形式をJPEGかSVGにすることをおすすめします。
※それぞれの拡張子には強みと弱みがあるので、画像によってはJPEG・SVGにすることでかえってPNGの時よりも容量が大きくなってしまう場合があります。必ず画像の情報によって使い分けの判断をするようにしましょう
以下の表を参考に、現在サイト上で使用している画像に最適な書き出し形式を検討してみてください。
【事例】画像を改善して平均ページ滞在時間が約5倍に！
次は、本サイト「Digitoo」で、画像の容量・書き出し形式の修正によって表示速度が改善された事例をご紹介します。
実施内容
・画像圧縮ツールを使用し、画像の容量をできる限り圧縮
・画像情報に応じた適切な書き出し形式に変更
・容量の大きい写真素材はPNG →JPEGに修正
実施結果
実施後の計測結果は下記の通りでした。
①PageSpeed Insightsの計測結果、改善前と改善後で38ポイントアップ！
まだ改善の余地はありますが、画像の対応だけでも表示速度が大幅に改善され、以前の3倍近くまでポイントをあげることができました。
※実際は、技術的にもまだまだ対策が必要なポイントになります。
②Googleアナリティクスでの計測結果、直帰率の低下と平均ページ滞在時間が約5倍にアップ
blogの平均ページ滞在時間は実施前の1月と比べて1分10秒から5分24秒にアップ、変化率は366%！
直帰率・離脱率に関しても30%以上の低下を実現しました。
表示速度改善（画像編)のまとめ
本記事では、表示速度を改善するメリットや確認方法と、画像の修正によって表示速度を改善する方法についてご紹介しました。
前述の通り、表示速度が遅くなる原因はサイトによって様々ですが、画像の改善をするだけでも、表示速度とユーザビリティを大幅に向上させることができます。
現在、表示速度の遅さに悩まれている方は、一度自社サイトの画像が適切な状態になっているか、チェックしてみてはいかがでしょうか。
「Webサイトの表示速度改善方法を徹底解説-ソースコード編」ではソースコードを修正して改善できる方法をご紹介します。