【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

【表示速度改善】画像を圧縮してECサイトの読込を速くする

【表示速度改善】画像を圧縮してECサイトの読込を速くする

画像圧縮で読込速度改善

昨今のWebサイトではUX(ユーザーエクスペリエンス)や離脱率低減やのためにページ表示速度が重要視されています。サイト表示速度が遅いと顧客満足度は大幅に低下し、離脱してコンバージョンの機会が失われてしまいます。

よってサイトの表示速度のいかに速くするか対策することは、デザインやコンテンツの充実化に優先して取り組まなければならないと言っても過言ではありません。

まずは画像圧縮からはじめよう

サイト表示速度を速くするための方法はいくつかありますが効果がでやすく方法も簡単な画像容量を小さくする「画像の圧縮」から始めるのがオススメです。

1ページあたりの画像数が多かったり、1つ1つの画像サイズ(KB)が大きいとサーバーからの転送量が大きくなりブラウザでの読込時間が長くなります。画像圧縮により、ファイル容量を小さくするによって表示速度を速くすることができます。

現在のパフォーマンスを把握する①【デベロッパーツールを活用】

まずは自社のサイト表示速度がどの程度なのか知ることが重要です。画像の圧縮前・圧縮後のパフォーマンスをそれぞれ計測することでどれほど改善したかがわかります。

サイト表示速度(読込時間)を把握するには、ブラウザのデベロッパー(開発者)ツールを利用するとよいでしょう。Google ChromeのデベロッパーツールではNetworkタブでコンテンツ(サーバー応答速度[TTFB]やHTML/CSS/Javascriptソース、画像)の読込時間を計測することができます。

デベロッパーツールの開き方(ショートカットキー)はこちら

  • Mac:「Command + Option + I」
  • Windows「F12」

デベロッパーツールを開いたら、Networkタブを開きスーパーリロード(ブラウザキャッシュを無視して、Web最新のデータを読み込む)して計測を開始します。
スーパーリロードは次のショートカットキーで行います。

  • Mac:「command + shift + r」
  • Windows:「Ctrl+F5」

デベロッパーツール画面
読込が終わったら、各コンテンツの読込時間・容量を把握しましょう
デベロッパーツール画面2
読込を完了したら各ファイル毎のSize(容量(KB))、Time(読込時間(s))を把握しましょう。これで容量が大きく、読込に時間がかかってる画像が分かります。

現在のパフォーマンスを把握する②【PageSpeedInsightsを活用】

Googleが提供するPageSpeedDinsightsでサイトを分析することで利用することでページ読込時間を短くするための方法を知ることができます。

モバイル・PCそれぞれのデバイスでのパフォーマンスを100点満点のスコアで診断します。
PageSpeedInsights
分析によってデバイスごとにスコアとスコア改善のための方法がわかります。「画像を最適化する」の提案では圧縮可能な画像ファイルをリストアップし、ファイル毎の圧縮可能容量が分かります。
PageSpeedInsights2

画像圧縮ツールを使って画像を圧縮する

いよいよ本題です。現状のサイトパフォーマンスを把握して圧縮すべき画像が分かったら、ツールを使って画像圧縮を行います。
画像の圧縮ツールには主にインストール型(ネットからダウンロードしてPC上で使用)とWebサービス型(オンライン上で使用)があります。

BatchGOO!NEXT
PCにインストールして利用します。フォルダ単位で一括で画像圧縮・リサイズすることができます。※動作OS(動作OS: Windows 10/8/7)

BatchGOO!NEXTをダウンロード
batchgoo

縮小専用AIR
Windows、MacOSに対応。複数の画像ファイルをドラッグ&ドロップして一括圧縮・リサイズ可能(フォルダ単位での圧縮は不可)。

縮小専用AIRのダウンロード
縮小専用AIR

compressor.io
画像の圧縮率と画像品質のバランスのよいオンラインの画像圧縮ツールです。一度に圧縮できる画像数は1枚のみです。Lossy(ロス圧縮)とLossless(ロスレス圧縮)から圧縮形式を選べますが、容量削減の効果の大きいLossy圧縮がおすすめです。

compressor.ioを使ってみる
compressor.io

終わりに

PageSpeedInsightsは、画像の最適化(画像の圧縮)以外にも、下記のようなパフォーマンス改善のためにサイト制作側で実施できる様々な方法を提案してくれます。

  • 圧縮を有効にする
  • CSS を縮小する
  • JavaScript を縮小する
  • HTML を縮小する

今回は、画像圧縮の方法のみご紹介しましたが、他の改善方法も是非試していきましょう。PageSpeedInsightsサイト内でも各方法を詳しく解説しているのでそちらもご覧ください。

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+