以前の記事「＜決定版＞レスポンシブECサイトの読込速度を上げるコーディング方法8選」にてご紹介しきれなかったレスポンシブ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="share">
<ul>
<!-- Twitter -->
<li class="share-twitter">
<a href="http://twitter.com/home?status=<#サイトURL>" target="_blank"> Twitter</a>
</li>
<!-- Facebook -->
<li class="share-facebook">
<a href="https://www.facebook.com/sharer/sharer.php?u=<?phpthe_permalink(); ?>" target="_blank"> Facebook</a>
</li>
<!-- Google+ -->
<li class="share-google">
<a href="https://plus.google.com/share?url=<#サイトURL>" target="_blank"> 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以降であればサポートしています。
画像は適切なサイズで使う
不必要に大きな画像は読込速度を遅らせる原因になります。サイトのサイズに合わせた適切な画像サイズを考えましょう。
なぜ適切なサイズにしなければいけないのか？
不必要に画像のデータサイズが大きいと、読み込みに時間がかかってしまう恐れがあります。PCだとある程度ネット回線が安定していても、モバイルは移動しながら利用できるデバイスでもあるためアクセスが不安定になります。
画像が正常に表示されなかったり、表示速度が遅いと利用者にストレスを与えます。スマートフォンでのECサイトの利用が増えてきている今、スマートフォンからのアクセスも考え適切なデータサイズまで軽くするよう心掛けましょう。
大きくても、その画像を表示する要素の最大幅に合わせるようにします。
例えばメイン部分に表示する大きなバナーの場合、PC表示の時のメイン部分の幅を目安にするといいでしょう。デザインによってはタブレット表示の時の方が大きい可能性もあるので、タブレット表示の幅も確認しておくと安心です。
※Retina対応を考慮する場合は、表示サイズの2倍の画像を準備する必要がありますのでご注意ください。
CSSスプライトを使う
簡単な画像を１つにまとめることでリクエスト数を減らし、読込速度の改善につながります。
CSSスプライトとは
CSS Spriteとは、複数の画像を1つの画像にまとめることでHTTPリクエスト数を減らし、ページの読み込み速度を速くするCSSテクニックの1つです。例えば矢印アイコンやカート画像などで、それぞれ個別の画像に分けるのではなく、まとめて1つの大きな画像として作成します。
画像をアップロードした後、CSSの「background-image」で背景画像にする画像を設定し、「background-position」によりその画像の中で表示させる画像の位置を設定していきます。
CSS
input[value="カートに入れる"] {
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);
}
HTML文法エラーをなくす
文法エラーはリソースを消費させる要因にもなります。なるべくエラーのないページ作りを心がけましょう。
エラーのチェック方法
以下のアドレスにアクセスします。
Markup Validation Service
エラーチェックしたいページのURLをAdress:の入力欄に入力。
Result:にエラー数が”84 Errors”のように表示されます。
Result:に警告数が”12 warning(s)”のように表示され、ページ下部にエラーの内容が表示されます。
構文に問題がない場合、もしくは”warning”があっても”Errors”がない場合はResult:に”Passed”と表示されます。
【チェック後の基本的な流れ】
- 表示されたエラーを確認
- サイトを修正
- 再度チェック
- 1?3を繰り返しながらエラーを減らしていきます。
小さいは画像はbase64形式で埋め込む
画像ファイルをソースコードに変換することで、リクエスト数を減らすことができます。
base64形式とは
画像などのデータをテキストデータに置換する方式の1つです。電子メールでは画像や音声などのデータは送信時にbase64を利用しています。通常「src=”img/○○.jpg”」で画像を指定すると、ブラウザはサーバーにリクエストを送信し、その後画像をダウンロードします。
一方base64形式で指定すると、サーバーへリクエストを送信することなく、画像ファイルを直接書き込むことができます。つまり、「リクエスト数が減る＝表示速度が速くなる可能性がある」となります。注意点は元のファイルより3割ほどデータサイズが増える場合があるため、データサイズの大きい画像には適しません。
【base64形式に画像を変換するツール】
duri.me
変換したい画像を用意し、白い枠内の「drag & dropyour image here」にドラッグ＆ドロップします。
その下の青いボタンを押してアップロードすると、左から「のsrc属性にデータが挿入された状態」「backgroundimageプロパティにデータが挿入された状態」 「base64形式のコードのみ」の3つの選択肢が表示されるので、好きな形式をクリックしてコピーします。
いかがでしたでしょうか。
ここでご紹介したコーディング方法は実際に弊社のレスポンシブECサイトを導入いただいているクライアントにご協力いただき、速度を検証した結果になります。もちろんどのようなサイトかによって最適な解決方法は異なりますが、上記の方法を用いることで実際に速度は改善された事例もあります。
読み込み速度を向上させるテクニックは他にもたくさんあります。これからも試行錯誤を続けながら、より使いやすいECサイトが実現できるようにチャレンジしていきたいと思います。
これからレスポンシブECサイトを構築される方や、もっと効果的なレスポンシブECサイトを構築したい方は、どんなことでもお気軽にご相談ください！相談・見積もりは無料です。
