今回は、画像のファイルサイズがページの表示速度に与える影響と、その解決策についてお話したいと思います。
皆さまは、画像のないECサイトを見たことがあるでしょうか？
商品の詳細や魅力を伝えるにあたって、画像を使用しないという選択肢は恐らくないのではないでしょうか。
商品の全体、詳細、生産者や着用画像、使用イメージ──画像なくしてはその魅力を伝えることは難しく、必要不可欠なものとなっています。
ECサイトに欠かせないその画像が、ページの表示速度に与える影響、ひいてはSEOに与える影響について、今回は学んでいきたいと思います。
目次
ページの表示速度がSEOに与える重要な影響とは？
SEO（検索エンジン最適化）対策といえば、一般的に検索キーワードの設定・titleタグの設定・検索ニーズに合ったコンテンツの作成など、挙げていけばきりがありません。
SEO対策は何からやればいい？手順や実際の方法を紹介！
今回は、以前別の記事でもご紹介したことのある、ページ表示改善速度に関する対策のひとつ、画像の最適化についてのお話いたします。
SEOにも影響する？ ページ表示速度改善のメリットとその方法
まずは簡単に、ページの表示速度がSEOに与える影響についてご説明します。
検索エンジンのランキングへの影響
Googleが公開しているツールにPageSpeed Insightsというものがあります。
PageSpeed Insights これは、入力したURLのページ速度スコアと、WEBページの表示速度について改善のためのアドバイスをしてくれる、Google公式の無料ツールです。Googleをはじめとする検索エンジンはユーザーエクスペリエンス（ユーザー体験）を重視しているので、ページの表示速度が速いほど、検索エンジン結果ページでの可視性が向上し、アクセス数が増える可能性があると言えます。
ユーザーエクスペリエンスの向上
ユーザーエクスペリエンスとは、サービス・製品・システムに対してユーザーがそれに利用した経験、使用した際の印象や体験という意味です。
例えば、検索からリンクを開いたら、読み込みがとても遅いページに遭遇してしまった、というのもユーザーエクスペリエンスのひとつです。
この場合、ユーザーがサイトに抱く印象はどのようなものになるでしょうか？ストレスやイライラを引き起こし、ページ滞在時間の短縮とページ離脱率が増加する傾向が見られます。
裏を返せば、ページの表示速度が上がることによりユーザーの満足度が上がり、滞在時間を長くしたり離脱率を下げることにも繋がります。
モバイルフレンドリーなサイト
スマートフォンの普及率が増加している現在、2021年段階でパソコンの世帯保有数が69.8%なのに対し、スマートフォンでは88.6%と上回っています。
スマートフォンでは回線や契約内容の制限で、パソコンよりも時間のかかるインターネットの接続や処理速度を経験することもあります。
ページの表示速度を向上させることで、モバイルユーザーにも快適なサイトを提供し、ユーザーエクスペリエンスの向上にもつながります。
また、Googleはモバイルフレンドリーは検索結果にも影響を及ぼすと2015年の段階で発表をしており、モバイルフレンドリーなページは検索順位が引き上げられるとしています。
2015年4月21日火曜日
コンバージョン率への影響
ページの表示速度が速く、モバイルでも見やすいサイトが滞在時間の延長に繋がるという話を先に述べましたが、これはコンバージョン率をアップさせることにも繋がります。
早々に離脱されてしまうページより、すぐに表示され最後まで見られるページの方がコンバージョン率が上がるのは間違いないでしょう。
WEB用に画像を最適化しよう
それでは、実際に画像をWEB用に最適化していきましょう。
適切なファイル形式を選択する
まず、WEB用に適切なフォーマットを選びましょう。
WEBページで使用されるフォーマットの中でも、一般的なJPGとPNGについて解説します。
JPG画像は写真や、カラフルな色使いの画像に使用されるフォーマットです。JPGは非可逆圧縮という画像形式になります。
PNG画像はテキストやロゴに適したフォーマットです。PNGは、可逆圧縮という画像形式です。
JPGもPNGもどちらも画像を圧縮し、WEBに掲載するのに適したサイズに変換しているのですが、大きな違いはこの非可逆圧縮と可逆圧縮にあります。
簡単に言うとJPG（非可逆圧縮）は保存の際に「目に見えない画像の不要な部分を削除してデータを計量する」ため、一度保存してしまうと圧縮前の状態には戻せません。
一度JPGで保存した画像は、サイズの拡大すると画質が荒くなってしまうのはこれが原因です。
PNG（可逆圧縮）は逆に、一度保存をしても品質を落とさずに元の状態にするこができるのですが、その分画像の容量は大きくなります。
このように、商品写真やイメージ画像はJPG、文字だけの画像はPNGなど、使い分けて作成しましょう。
また、この他にJPG・PNG双方の良さを兼ね備えた可逆圧縮・非可逆圧縮どちらにも対応したWebPというフォーマットもあります。
WebPは写真を綺麗に表示するJPGの良さ、背景画像透過やテキスト表示に適したPNGの良さの他、アニメーション表現ができるGIFの良さの揃ったフォーマットで、2010年頃から登場しました。
楽天市場の商品ページの一部箇所で実装されているので、目にした運営担当者様もいらっしゃるかもしれません。
WebPについては説明が長くなってしまうので、またの機会にご紹介させていただきたいと思います。
圧縮品質を調整する
画像の圧縮は、ファイルの容量の削減に効果的な手法です。
画像編集ソフトウェアを使用して、画像を圧縮することができます。圧縮の際には、適切な圧縮率を選択し、画像の品質を保ちつつファイルサイズを減らすようにしましょう。
上記は左が100%、右が60%で保存された画像です。
見た目にはあまり変化がないように見えますが、画質が100%で保存された画像のファイルサイズは20KBなのに対し、60%で保存された画像のファイルサイズは7.5KBとかなりファイルサイズを減らすことができます。
解像度を最適化する
高解像度の画像は綺麗で見栄えがいのですが、その分ファイルサイズが大きくなります。
WEB上で使用する画像は、適切な解像度に最適化することが重要です。必要な解像度のみを使用することで、ファイルサイズを減らすことができます。
WEB上で最適な解像度は、一般的に72～96dpi（解像度を示す値）と言われています。紙媒体ではフルカラーの場合350dpi、モノクロでは600dpiが一般的と言われているので、このサイズの違いを分かって頂けるのではないでしょうか。
キャッシュと圧縮フォーマットを活用する
画像のキャッシュ設定を有効にすることで、ユーザーがサイトに再訪した際に画像を再ダウンロードする必要がなくなります。
キャッシュされた画像はローカルに保存されるため、ページ読み込み速度が向上します。
画像を同じファイル名で差し替えた時など、再訪の際に古い画像がいつまでも表示されてしまう問題があるので、その点は注意しましょう。
解決策は違うファイル名の画像をアップロードして使用する、ユーザーにキャッシュクリアをお願いするなどになります。
オンライン画像圧縮ツールの活用
オンライン画像圧縮ツールは、高画質な画像の圧縮に役立ちますこれらのツールを活用すると、高品質な画像を維持しながらファイルサイズを削減できます。
これらのツールは、専門的な知識を必要とせず、自動的に最適な圧縮設定を適用してくれるため、使いやすく便利です。
オンラインでできる！画像圧縮ツール5選
それでは、オンラインで利用できる画像圧縮ツールを5つご紹介いたします。
TinyJPG・TinyPNG
JPG・PNGの両方に対応したサービスです。
一度に20枚まで、最大5MBまでのファイルを圧縮することができます。
TinyJPG・TinyPNGどちらを選んでも、JPG・PNG両方の圧縮が可能で、画像のドラッグ&ドロップで簡単に画像を圧縮することができます。
画像圧縮AC
JPG・PNGの両方に対応。
25点／40MBまでの画像を一度に圧縮することができます。また、圧縮レベルを3段階まで選択することもでき、画像データは約10分でサイト上から削除されるため、セキュリティも安心です。
iLoveIMG
JPG、PNG、SGV、GIFに対応。
画像圧縮のほかに、違うフォーマットの画像をJPGに変換するサービスや画像の切り抜き、サイズ変更サービスも提供しています。
ラッコツールズ
JPG・PNG・JPEGに対応。
画像の圧縮率を細かく調整することができます。
COMPRESS JPEG
JPG・JPEGに対応。
最大20枚までの画像を一度に圧縮することができます。
画像圧縮はすぐできるSEO対策！
画像を最適化し、ページの表示速度を向上させる方法、いかがでしたか。
自社ECサイトや楽天市場・Yahoo!ショッピングなどECモールのサイトで、ページの表示が重いな……と感じたら、そのECサイトを見ているユーザーも同じように感じている可能性があります。
そんな時は一度、ご自身のECサイトの画像の表示速度を見直してみてはいかがでしょうか。
また、画像圧縮以外にもページの表示速度を改善する方法は何通りかあります。
ご自身のECサイトの表示毒度が遅い、ページが重いと感じている運営担当者様、ぜひ一度オタツーにご相談ください。
EC支援
