目次
1.ページ表示速度が重要なワケ
ページの表示速度を上げる方法をご紹介する前に、まずは表示速度を上げる目的について確認しておきましょう。
直帰率が上がる
直帰率が高くなる原因の1つに、ページの表示速度が遅いということが考えられます。
Googleが実施した調査によると、読み込み時間が3秒以上かかると53%、5秒かかると90%もの訪問者がそのページを離れてしまうという結果になっています。
昨今、スマホが普及したことで、手軽にサイトを閲覧できるようになりました。ここでいう「表示速度」とは、主にスマホでの表示速度を指しています。
PCでどんなに表示速度が速いサイトでも、訪問者の多くを占めるスマホユーザーを考慮しなければ、直帰率の改善は見込めません。
検索エンジンからの評価が下がる
Googleは2018年1月に「ページの読み込み速度をモバイル検索のランキング要素に使用します」と発表しています。
もちろん、検索順位を決定するための要素は他にも多くあり、表示速度が全てではありませんが、少なからずページの表示速度が検索順位に影響しているということは念頭に置いておきたいところです。
さらに、2020年9月には「モバイルファーストインデックス（MFI）に移行する」ことが発表されています。これにより、検索順位の決定を行う際、PCサイトではなくスマホサイトの評価を基準とすることとなりました。
直帰率の問題と同様に、スマホでの表示速度を改善することが検索エンジンからの評価を上げるポイントになると言えます。
表示速度の確認方法
WEBサイトの表示速度を測定するツールの1つとして、Googleが提供する「Page Speed Insights（ページスピードインサイト）」という無料ツールがあります。
このツールはPCとスマホ、それぞれの表示速度の評価を確認することが可能で、URLを入力するだけで表示速度や改善ポイントを分析してくれます。
2.画像自体を最適化する
まずは使用する画像自体が適切かどうかを確認しましょう。
適切なファイル形式、適切な大きさの画像を使用することは、ページの表示速度において、思っている以上に大きな影響を及ぼします。
画像の形式
使用する画像は、その画像タイプに適したファイル形式であることが望ましいです。
画像のファイルサイズが小さいからJPEG形式、高画質だからPNG形式にするといったファイル形式の選び方は好ましくありません。
JPEG（ .jpg / .jpeg）
色数の多い「写真」に適しています。PNG（ .png）
背景を透過したい画像や、写真以外で綺麗に見せたい画像に適しています。SVG（ .svg）
アイコンなど色数の少ない画像に適しています。WebP（ .webp）
WebP（ウェッピー）は、2010年に発表されたGoogleが開発している画像形式で、高い圧縮率を誇りますが、画質はほとんど落ちません。
WebPは発表以降、対応ブラウザの問題があり、なかなか浸透しませんでした。2020年秋、ようやく非対応だったiOS、Safariの対応が発表され、2022年2月現在では、すべての主要ブラウザがWebPに対応しています。
画像の書き出しサイズ
最近は、レスポンシブデザインが主流のため、デザイン段階で、PCとスマホで共通の画像を使用できるように考慮されている場合も多いです。
その場合、画像は1枚だけ用意すれば、PC、スマホともに問題なく表示することができます。ですが、これはPCで表示させる用の大きな画像をスマホに読み込ませていることになり、スマホの表示速度に大きな影響を及ぼします。スマホでは、スマホで最低限綺麗に見える大きさの画像を表示すれば良いのです。
少し手間と感じてしまうかもしれませんが、デバイスサイズを考慮したサイズの画像を用意し、適切に出し分けることが、表示速度の改善につながります。
マークアップの方法については、次章「3.デバイスごとに画像を出し分ける」で、ご紹介します。
画像の圧縮
画像が用意できたら、圧縮して画像のファイルサイズを落とします。
画像を圧縮する手段は数多くありますが、中でもおすすめなのが、「TinyPNG」というオンラインツールです。画質をほとんど落とさずに、ファイルサイズだけを小さくすることができます。
3.デバイスごとに画像を出し分ける
画像自体を最適化できたら、次はその画像を適切に表示させます。
前章で説明した、PCとスマホで同一の見た目の画像（サイズのみ異なる）の場合と、そもそもPCとスマホで画像の見た目が異なる場合でマークアップの方法が異なるので、順番にそれぞれ説明します。
PCとスマホで同じ見た目の画像の場合 [img要素]
デバイスに応じて、適切なサイズの画像を表示させたい場合、srcset属性を使用します。デバイスの解像度や画面幅に応じて、表示させる画像の振り分けが可能です。そのデバイスに該当する画像だけが読み込まれるので、無駄なリソース読み込みが発生することがありません。
解像度に応じて適切な画像を読み込む
<img srcset="sample.png 1x, sample@2x.png 2x, sample@3x.png 3x" src="sample@2x.png" alt="サンプル画像">
srcset属性に画像ファイルを指定し、その後ろにデバイスピクセル（解像度）を指定します。解像度別にカンマ区切りで記述しましょう。
解像度はそのデバイスによって異なりますが、Retinaディスプレイの登場など、スマホの画面解像度は年々上がってきているのでチェックしておきましょう。
Viewport（画面幅）に応じて画像を切り替える
<img srcset="sample-large.jpg 1440w, sample-medium.jpg 720w" src="sample.jpg" alt="サンプル画像">
解像度による切り替えの場合は、画像ファイルの後ろにデバイスピクセルを指定しましたが、こちらでは画面幅（width）を指定します。単位はpxだと思っていただいて差し支えありません。
PCとスマホで見た目の異なる画像の場合 [picture要素]
スマホとPCで、見た目の異なる画像を使用する場合はpictureタグを使用します。以下のようにsourceタグ、imgタグを囲います。
<picture>
<source srcset="○○px以上で表示させる画像パス" media="(min-width: ○○px)">
<source srcset="△△px以上で表示させる画像パス" media="(min-width: △△px)">
<img src="上記以外の場合に表示する画像" alt="サンプル画像">
</picture>
img要素と異なるのは、完全にブラウザ幅を基準にして画像が切り替わる点です。つまり、解像度によって画像を切り替えることはできません。
上記、どちらを使用するか、どこまで細かく指定するかという問題は、しっかり制作チームで認識を合わせておくと良いでしょう。
ちなみに、pictureタグとsrcset属性を組み合わせることも可能です。
4.画像の遅延読み込み
遅延読み込みとは、画面の表示領域内に存在する画像だけを読み込むことです。表示領域外の画像は最初に読み込まず、スクロールして、表示領域に達したタイミングで画像を読み込みます。そうすることで初回の表示に必要な読み込み要素が減り、結果としてページの表示速度が上がるという、ページ高速化手法の一つです。
loading属性
img要素にloading属性（属性値：lazy）を指定することで、画像の遅延読み込みを実現することができます。
<img src="sample.jpg" alt="altテキスト" loading="lazy">
ただし、2022年2月現在では、主要ブラウザであるSafari/iOS Safariで非対応となっており、現状では、以下jsライブラリを使用した遅延読み込みが適切だと言えます。
jsライブラリ「Lazysizes」
Safari/iOS Safariにも対応するため、「Lazysizes」というjsライブラリを使用します。使い方は以下の通りで、手軽に導入することが可能です。
ライブラリのダウンロード
Github公式ページからファイル一式をダウンロードします。ファイルの読み込み
ファイルを解凍し、HTMLで「lazysizes.min.js」を読み込みます。<script src="lazysizes.min.js" async></script>img要素の書き方
<img src="sample-small.jpg" data-src="sample.jpg" class = "lazyload" alt="altテキスト">
img要素に「lazyload」という名前のclassを追加し、data-src属性に表示したい画像を指定します。src属性に指定する画像は、data-src属性に指定している画像の遅延読み込みが終わるまでに表示される「仮の画像」です。つまり、ここにサイズの大きな画像を指定してしまうと、このマークアップの意味がなくなってしまうので注意してください。
5.まとめ
ここまで、表示速度を上げる目的やツール、方法をご紹介してきました。
最も大切なのは「ユーザー体験」、つまり閲覧者がどれだけストレスを感じることなくページを閲覧できるかです。
Page Speed Insightsでの評価がどれだけ高くても、閲覧者がストレスを感じてしまっているようでは意味がありません。
さらに、ECサイトにおいて、画像（特に商品画像）を適切に表示することは非常に重要です。本記事を参考にしていただき、現在のサイトの表示速度や、画像の表示方法を見直してみてはいかがでしょうか？
当社では、独自のモール型/店舗直送型ECシステム「REGOLITH」や、日本で一番利用されているECパッケージシステム「EC-CUBE」の構築も承っております。
ECサイトのリニューアルなどでお悩みの際は、ぜひお気軽にご相談くださいませ。
