こんにちは、トイアンナです。
ECサイトを設計するとき、デザインに凝りたい気持ち、よ～くわかります。私が10代のころ「サンクチュアリ」という恥ずかしいタイトルのウェブサイトを作り自作小説を掲載していました。
あの頃、一番こだわっていたのはウェブサイトの背景画像やBGM。私の作ったサイトはアクセスするたびにBGMが流れるゴミ仕様で、職場や学校では決して開けませんでした。今の私から見れば「こいつ、自らアクセス数を減らしにいっている」としか思えない愚行です。
しかし、自社サイトへ愛があるゆえにこだわりたい気持ちは、持っていて当然です。
ロード時間が７秒を超えると直帰率は２倍以上になる
以前、Googleがサイトを閲覧する方の調査をしました。そこで明らかになったのは、表示までにかかる時間が7秒を超えると、直帰率が113％増加するというおぞましい事実です。
イラスト：ゆぴ
さらに、90万ものモバイルサイトを調べたところ70％のページが表示までに7秒以上かかっているとのこと。つまり、7割のサイトはそもそも表示時間が長すぎるせいで購入されないのです。
まずは自社サイトの表示速度を計測してみよう
と、焦ったところでまずは現状分析をしてみましょう。
PageSpeed Insightsは空欄へ自社のURLを入れるだけで、表示速度を計測してくれます。英語サイトですが、URLを放り込んで「Analyze」をクリック・タップするだけだから簡単です。
そこで0-49点は「遅い」、50-89点は「平均的」、90-100点が「早い」と測定されます。
なお、いまこの記事を書いている私が過去に担当したECサイトを計測したところ、まさかの54点。ギリギリ平均となるスコアをたたき出しました。原稿を書く資格がないほど遅いサイトを作っていたなんて、恥ずかしい……。
その他いくつかのECサイトを入力してみましたが、売れているECサイトはやはり70点台以上の優秀なスコアを出しています。画像の多いメルカリなども高いスコアを出しておりましたので「うちは動画が多いから」「画像があるとやっぱりね」といった言い訳はやめましょう。表示速度が速いサイトは、画像が多くても速いのです。
表示速度を早くするコツ
表示速度を速めるのにもっとも手っ取り早い方法は画像のファイルサイズを軽くすることです。
イラスト：ゆぴ
特に商品画像が多いECサイトの場合、画像はプロの撮影にお任せしているところも多いのではないでしょうか。その際、高画質で納品された画像をそのまま使用してはいませんか？
たとえば拡張子がPNGのファイルは、それだけで画像サイズが重くなります。（拡張子とは、ファイルの種類を識別する記号のようなものです。Windowsユーザーなら右クリック→プロパティで、ファイルの種類を確認できます）
PNGは最大280兆色もの豊かな色彩を表現できるファイル形式ですが、その分ファイルサイズが重くなるからです。PNGをJPGへ変換するだけで、ファイルサイズはぐっと下がります。JPGでも約1670万色を表示できますから、普通の人間の目ではそこまで差を意識せず済むはずです。
印刷物になると細かな差が重要となるため、ファイルサイズが重くとも画質のよいファイル形式を選ぶこととなります。しかしWebであれば、軽さを優先したほうがよいでしょう。
ファイル形式を変換するのは簡単。Convertio（https://convertio.co/ja/）をはじめとするオンラインファイル変換ページへ、ファイルを放り込んで「PNG」を「JPG」へ変えるよう選んでみましょう。
筆者はよくファイル形式を変換するため、大量に変換できる有料プランを使っています。しかし有料プランも月11ドル（約1,100円）と大変お得です。（※複数プランあり）
ただし一度圧縮したファイルサイズをもとの高品質な画質へ戻すことはできません。必ずファイルを変換する前に、元ファイルのコピーを保存しておきましょう。
プログラミングコードを簡略化する
より技術的な対応として、プログラミングコードの簡略化があります。ECサイトで多用されるHTML, CSS, Javascriptなどのプログラミング言語は、圧縮することができます。プログラミングの文字列が多すぎれば、それだけで表示速度は遅くなります。見ている側からすると「全然画像も動画もないのに表示が遅いサイト」ができてしまうのです。
おそらく社内外のエンジニアがよりご存知だとは思いますが、念のため圧縮ツールとしてGoogle推奨のRefresh-SFをご紹介します。
Refresh-SFのサイトで空欄へコードを貼り付けると、圧縮されたコードが同じ画面に表示されます。コピーしてそのまま使えるため、大変便利です。
ただし、こちらも必ずソースコードのバックアップを取るようにご注意ください。Refresh-SFでは後で他の方が読みやすくするために設置した改行なども削除されてしまうため、人間には読みづらいソースコードとなります。そのため変更箇所がわかりづらくならないよう、元コードのバックアップも持っておいたほうがよいでしょう。
ここまでの２点を改善して、それでもうまくいかないときはプロへご相談すべきタイミング。常に最新の技術を導入し、とっておきのデザインを迅速に表示できるよう頑張ってみましょう。
