1万5千枚の商品画像を一括で軽くして、サイト表示を速くした話

ネットショップ（ECサイト）にとって、ページの表示速度は接客の質そのものです。開くのが遅ければ、お客様は商品を見る前に離れてしまいます。今回ご紹介するのは、海外から商品を仕入れて販売しているあるECサイトの事例です。取り扱い商品が多く、サイト内の商品画像は約1万5千枚。以前から「ページの表示が遅い」という悩みがあり、調べてみると、原因の中心はこの大量の画像の重さでした。

課題：画像が重く、ページが開くまで待たされる

商品画像はECサイトの主役です。しかし、大きな画像をそのまま載せ続けると、1ページに何枚も並んだときの読み込み量は相当なものになります。

• 商品ページも一覧ページも画像が中心で、開くたびに大量のデータを読み込んでいた。
• 画像は長年の運営で積み上がっており、手作業で1枚ずつ直すのは現実的な作業量ではなかった。
• 表示の遅さは、お客様の離脱やサイト評価（SEO）に直結すると一般に言われる要素だった。

やったこと：約1万5千枚をまとめて次世代形式に変換

サイト内のすべての画像 約1万5千枚を、軽量な次世代画像形式（WebP。見た目の品質をほぼ保ったままファイルを小さくできる形式）へ一括変換しました。変換はスクリプト（自動処理のプログラム）で機械的に行い、手作業はありません。あわせて、次の2点をセットで組み込みました。

• WebPを表示できない古いブラウザには、従来形式の画像を出し分ける安全な配信方式を採用した。
• 今後新しくアップロードされる画像も自動で軽量化されるよう、サーバー側に仕組みを常設した。作業が一度きりで終わらない設計です。

つまずいた点

• 「変換して置き換えるだけ」では済まなかった。WebPに対応していない環境が一部にあり、出し分けの仕組みを入れないと表示が崩れるリスクがあった。軽くすること以上に、誰の環境でも正しく表示され続けることを優先する必要があった。
• 枚数が多いぶん、途中で失敗する前提の設計が必要だった。処理が途中で止まっても、やり直せば壊れずに完了できる形（冪等な処理。何度実行しても結果が同じになる作り方）にした。
• ギャラリー系の機能が独自の方法で画像を出力しており、共通の仕組みだけでは軽量化が効かなかった。そこだけ個別に対応した。

結果

画像の合計容量は約86%の削減となりました。同じページを開くために必要なデータ量が大幅に減った、ということです。表示速度はサイト評価（SEO）や離脱率に直結すると一般に言われる要素なので、土台の改善として意味は小さくありません。そして、新しい画像も自動で軽くなる仕組みを常設したことで、この状態は今後も維持されます。「一度きれいにしても、運用しているうちにまた重くなる」という逆戻りを防げることが、この設計のいちばんの価値です。

この型が使える会社

• 商品画像が数千〜数万枚あるECサイトを運営している会社。特に、長年の運営で画像が積み上がっている場合に効果が出やすい型です。
• 写真やギャラリーが中心のメディア・作品紹介サイトを持つ会社。
• 「サイトが遅い」と感じているものの、原因の切り分けや対処に手を付けられていない会社。画像の重さが主因であるケースは少なくありません。

画像の軽量化は地味な施策ですが、サイトの全ページに一度に効く数少ない打ち手です。ポイントは、いま重い画像を一括で片付けることと、これから増える画像も自動で軽くなる仕組みを残すこと。この2つをセットにして初めて、「速いサイト」が続く状態になります。心当たりのある方は、まず自社サイトの画像がどれくらいの容量になっているかを確認するところから始めてみてください。