レスポンシブECサイトの読込速度を上げる方法7選　後編

以前の記事「＜決定版＞レスポンシブECサイトの読込速度を上げるコーディング方法8選」にてご紹介しきれなかったレスポンシブECサイトの速度を向上させるコーディング方法をご紹介します。

1. やっぱりレスポンシブECサイトは速度が大事！

やっぱりレスポンシブECサイトは速度が大事！

「1秒の遅れでCVRが7%ダウン！読込速度の改善で快適なWebサイト構築を」では、サイトの読込速度がCVR（購入率）に直結するという調査結果が紹介されています。他にも、

検索結果がほんの1秒遅れただけでもユーザーの検索が減る。0.4秒遅くなっただけで検索回数が0.44%減少する。（Google）

サイト表示が0.1秒遅れる度に、売上が1％減少する（Amazon）

と、ECサイトの売上と読込速度の関係は切っても切れません。前回記事に引き続き、読込速度を上げるポイントをご紹介していきます。

ソーシャルボタンをCSSで
画像遅延読み込み（Lazy Load）を利用する
DNS プリフェッチの制御
画像は適切なサイズで使う
CSSスプライトを使う
HTML文法エラーをなくす
小さいは画像はbase64形式で埋め込む

※ご紹介する方法は、弊社が独自に検証した結果ですので、実際の効果は異なる場合がございます。また実装される際は必ずバックアップなどをお取りなり、自己責任の範囲でお願い致します。

ソーシャルボタンをCSSで

多くのサイトで採用されている公式のSNSボタン。こちらをHTML／CSSで記述するだけで読み込み速度の改善が期待できます。

HTML

<div id=&quot;share&quot;>
  <ul>
    <!-- Twitter -->
    <li class=&quot;share-twitter&quot;>
      <a href=&quot;http://twitter.com/home?status=<#サイトURL>&quot; target=&quot;_blank&quot;> Twitter</a>
    </li>
    <!-- Facebook -->
    <li class=&quot;share-facebook&quot;>
      <a href=&quot;https://www.facebook.com/sharer/sharer.php?u=<?phpthe_permalink(); ?>&quot; target=&quot;_blank&quot;> Facebook</a>
    </li>
    <!-- Google+ -->
    <li class=&quot;share-google&quot;>
      <a href=&quot;https://plus.google.com/share?url=<#サイトURL>&quot; target=&quot;_blank&quot;> Google+</a>
    </li>
  </ul>
</div>

CSS

#share ul {
    height:auto;
}
 
#share li {
    font-size:14px;
    float:left;
    text-align:center;
    width:84px;
    margin-right:1%;
    margin-bottom:8px;
    border-radius:3px;
    list-style:none;
}
 
#share li.share-twitter {
    background:#55acee;
    box-shadow:0 2px #2795e9;
}
 
#share li.share-twitter:hover {
    background:#83c3f3;
}
 
#share li.share-facebook {
    background:#3b5998;
    box-shadow:0 2px #2d4373;
}
 
#share li.share-facebook:hover {
    background:#4c70ba;
}
 
#share li.share-google {
    background:#dd4b39;
    box-shadow:0 2px #c23321;
}
 
#share li.share-google:hover {
    background:#e47365;
}
 
#share li.share-hatena {
    background:#2c6ebd;
    box-shadow:0 2px #225694;
}
 
#share li.share-hatena:hover {
    background:#4888d4;
}
 
#share li.share-pocket {
    background:#f13d53;
    box-shadow:0 2px #e6152f;
}
 
#share li.share-pocket:hover {
    background:#f26f7f;
}
 
#share a {
    display:block;
    height:27px;
    padding-top:6px;
    color:#ffffff;
    text-decoration:none;
}
 
#share a:hover {
    text-decoration:none;
    color:#ffffff;
}

ボタンの色や、クリック時の動作については各自カスタマイズしてください。また公式SNSボタンとは違いいいね数やツイート数などが表示されません。ご注意ください。それぞれの動作チェックも併せて必ず実施するようお願い致します。

画像遅延読み込み（Lazy Load）を利用する

Lazy Loadとは

ファーストビューに表示されない部分の画像をスクロールしてから読み込ませるプラグインです。

一般的にウェブサイトではサイト上にある画像を全てダウンロードして表示しますが、このプラグインを使うことでスクロールした時に画像を読み込むため、ファーストビューを表示させる速度改善が見込めます。ちなみにaishipRでは特に難しい設定はせずに、ボタン一つで設定することが出来るようになっています。

詳細は以下の参考サイトを御覧ください。

参考：スクロールに応じて画像を遅延読込させるLazy Loadプラグイン

DNS プリフェッチの制御

DNSプリフェッチの制御によって外部リンクの名前解決にかかる時間を減らすことが可能です。外部ドメインへの参照リンクがたくさんあるサイトは速度改善が見込め、特に不安定なモバイル環境では多ければ多いほど無視できないものとなります。

DNSプリフェッチを有効にするには、 link要素に以下のように記述します。

例えば、「www.rockwave.com」という外部リンクをプリフェッチさせたい場合は、

<link rel=”dns-prefetch” href=”http://www.rockwave.com” />

と記述しましょう。必要な外部リンクの分だけheadセクションに挿入しておきます。

Chrome/Firefox/OperaはDNSプリフェッチをサポートしています。Internet Explorerも10以降であればサポートしています。

参考：DNS プリフェッチの制御

画像は適切なサイズで使う

不必要に大きな画像は読込速度を遅らせる原因になります。サイトのサイズに合わせた適切な画像サイズを考えましょう。

なぜ適切なサイズにしなければいけないのか？

不必要に画像のデータサイズが大きいと、読み込みに時間がかかってしまう恐れがあります。PCだとある程度ネット回線が安定していても、モバイルは移動しながら利用できるデバイスでもあるためアクセスが不安定になります。

画像が正常に表示されなかったり、表示速度が遅いと利用者にストレスを与えます。スマートフォンでのECサイトの利用が増えてきている今、スマートフォンからのアクセスも考え適切なデータサイズまで軽くするよう心掛けましょう。

大きくても、その画像を表示する要素の最大幅に合わせるようにします。

例えばメイン部分に表示する大きなバナーの場合、PC表示の時のメイン部分の幅を目安にするといいでしょう。デザインによってはタブレット表示の時の方が大きい可能性もあるので、タブレット表示の幅も確認しておくと安心です。

※Retina対応を考慮する場合は、表示サイズの2倍の画像を準備する必要がありますのでご注意ください。

CSSスプライトを使う

簡単な画像を１つにまとめることでリクエスト数を減らし、読込速度の改善につながります。

CSSスプライトとは

CSS Spriteとは、複数の画像を1つの画像にまとめることでHTTPリクエスト数を減らし、ページの読み込み速度を速くするCSSテクニックの1つです。例えば矢印アイコンやカート画像などで、それぞれ個別の画像に分けるのではなく、まとめて1つの大きな画像として作成します。

CSSスプライト画像

画像をアップロードした後、CSSの「background-image」で背景画像にする画像を設定し、「background-position」によりその画像の中で表示させる画像の位置を設定していきます。

CSS

input[value=&quot;カートに入れる&quot;] {
    background-image: url(img/icon/icon.png);
    background-position: 0 -58px;
    width: 165px;
    height: 43px;
    border: 0;
    border-radius: 0;
    color: rgba(0, 0, 0, 0);
}

CSSスプライト画像