訪問客を逃さないために。表示スピードの改善

訪問客を逃さないために。表示スピードの改善

ページの読み込みに1秒以上かかるとユーザーの集中は途切れてしまう、と言われています。

ちょっとした手すきの時間にスマートフォンからウェブを見ているようなユーザーは、読み込みに少し多めに時間がかかっただけでも離脱してしまうかもしれません。

画像を含めた情報量の多いECサイトでは、ページ表示速度の遅延は大きな問題です。（最重要項目ではありませんが、検索順位に影響を与える要素でもあります）

表示スピードをチェックし、できれば1秒以内の表示を目指して可能な範囲でスピードアップに取り組みましょう。

表示スピードを調べる

Google Analyticsの「行動」メニュー内「サイトの速度」では、平均読み込み時間や平均リダイレクト時間など、サイトの表示スピードを確認することができます。

また、Analyticsとも連動しているパフォーマンス計測ツール「PageSpeed Insight」を使うと、URLを指定して表示スピードや問題点・改善方法も調べることができるので、まだ使ったことがないという方は一度試してみてください。

一度のチェックで、モバイル表示・PC用表示両方の表示スピード・問題点がわかります。

Google「PageSpeed Insight」

（http://developers.google.com/speed/pagespeed/insights/）

パフォーマンス改善のために

PageSpeed Insightでチェックを実行すると、画像やHTML・CSS・JavaScriptなどの問題点と改善方法を確認できますが、コードの調整が必要な方法などは担当者によっては着手しにくかったり、時間がかかってしまうこともあると思います。

そのような場合は最低限、これ以上問題を大きくしないことを目指し、まずはこれから使う「画像の最適化」から実施していきましょう。

すでに多くの商品画像があり、これからもどんどん増えていくだろうECサイトの場合は特に、画像の最適化が大切です。

画像の最適化

画像のデータサイズを落とすために、以下のような点に注意してください。

（1）余白を画像に含めない

商品画像の周りに余白が必要な場合は、CSSによってスペースを作りましょう。

（2）形式を使い分ける

グラデーションなどの繊細な色の変化の表現がなく色数も少ない平坦なイラストは、PNG-8またはGIFを利用すればファイルサイズを抑えることができます。

JPGやPNG-24はファイルサイズが大きいので、非常にたくさんの色を使った水彩画や油絵のようなイラスト、あるいは写真の場合にだけ使いましょう。

Googleウェブマスターフォーラム

「読み込み時間が長いサイトのランク付け」

（https://productforums.google.com/forum/#!searchin/webmaster-ja/%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF%E6%99%82%E9%96%93/webmaster-ja/T6wclEuGuQE/-x1ihxT6dJUJ）

Google Developers

「Optimizing web graphics」

（https://developers.google.com/speed/articles/optimizing-images?hl=ja&csw=1）