navigation>年末年始休業につきまして【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。以前の記事「<決定版>レスポンシブECサイトの読込速度を上げるコーディング方法8選」にてご紹介しきれなかったレスポンシブECサイトの速度を向上させるコーディング方法をご紹介します。base64形式とはやっぱりレスポンシブECサイトは速度が大事!「1秒の遅れでCVRが7%ダウン!読込速度の改善で快適なWebサイト構築を」では、サイトの読込速度がCVR(購入率)に直結するという調査結果が紹介されています。検索結果がほんの1秒遅れただけでもユーザーの検索が減る。0.4秒遅くなっただけで検索回数が0.44%減少する。(Google)サイト表示が0.1秒遅れる度に、売上が1%減少する(Amazon)と、ECサイトの売上と読込速度の関係は切っても切れません。前回記事に引き続き、読込速度を上げるポイントをご紹介していきます。画像は適切なサイズで使うCSSスプライトを使うHTML文法エラーをなくす小さいは画像はbase64形式で埋め込む※ご紹介する方法は、弊社が独自に検証した結果ですので、実際の効果は異なる場合がございます。実装される際は必ずバックアップなどをお取りなり、自己責任の範囲でお願い致します。ソーシャルボタンをCSSで多くのサイトで採用されている公式のSNSボタン。こちらをHTML/CSSで記述するだけで読み込み速度の改善が期待できます。color:#ffffff;}ボタンの色や、クリック時の動作については各自カスタマイズしてください。公式SNSボタンとは違いいいね数やツイート数などが表示されません。それぞれの動作チェックも併せて必ず実施するようお願い致します。Loadとはファーストビューに表示されない部分の画像をスクロールしてから読み込ませるプラグインです。一般的にウェブサイトではサイト上にある画像を全てダウンロードして表示しますが、このプラグインを使うことでスクロールした時に画像を読み込むため、ファーストビューを表示させる速度改善が見込めます。ちなみにaishipRでは特に難しい設定はせずに、ボタン一つで設定することが出来るようになっています。詳細は以下の参考サイトを御覧ください。プリフェッチの制御DNSプリフェッチの制御によって外部リンクの名前解決にかかる時間を減らすことが可能です。外部ドメインへの参照リンクがたくさんあるサイトは速度改善が見込め、特に不安定なモバイル環境では多ければ多いほど無視できないものとなります。link要素に以下のように記述します。/>と記述しましょう。必要な外部リンクの分だけheadセクションに挿入しておきます。Chrome/Firefox/OperaはDNSプリフェッチをサポートしています。Explorerも10以降であればサポートしています。画像は適切なサイズで使う不必要に大きな画像は読込速度を遅らせる原因になります。サイトのサイズに合わせた適切な画像サイズを考えましょう。適切なサイズにしなければいけないのか?不必要に画像のデータサイズが大きいと、読み込みに時間がかかってしまう恐れがあります。PCだとある程度ネット回線が安定していても、モバイルは移動しながら利用できるデバイスでもあるためアクセスが不安定になります。画像が正常に表示されなかったり、表示速度が遅いと利用者にストレスを与えます。スマートフォンでのECサイトの利用が増えてきている今、スマートフォンからのアクセスも考え適切なデータサイズまで軽くするよう心掛けましょう。大きくても、その画像を表示する要素の最大幅に合わせるようにします。メイン部分に表示する大きなバナーの場合、PC表示の時のメイン部分の幅を目安にするといいでしょう。デザインによってはタブレット表示の時の方が大きい可能性もあるので、タブレット表示の幅も確認しておくと安心です。※Retina対応を考慮する場合は、表示サイズの2倍の画像を準備する必要がありますのでご注意ください。CSSスプライトを使う簡単な画像を1つにまとめることでリクエスト数を減らし、読込速度の改善につながります。Spriteとは、複数の画像を1つの画像にまとめることでHTTPリクエスト数を減らし、ページの読み込み速度を速くするCSSテクニックの1つです。矢印アイコンやカート画像などで、それぞれ個別の画像に分けるのではなく、まとめて1つの大きな画像として作成します。画像をアップロードした後、CSSの「background-image」で背景画像にする画像を設定し、「background-position」によりその画像の中で表示させる画像の位置を設定していきます。0);}HTML文法エラーをなくす文法エラーはリソースを消費させる要因にもなります。エラーのないページ作りを心がけましょう。以下のアドレスにアクセスします。ServiceエラーチェックしたいページのURLをAdress:の入力欄に入力。Errors”のように表示されます。warning(s)”のように表示され、ページ下部にエラーの内容が表示されます。構文に問題がない場合、もしくは”warning”があっても”Errors”がない場合はResult:に”Passed”と表示されます。再度チェック1〜3を繰り返しながらエラーを減らしていきます。小さいは画像はbase64形式で埋め込む画像ファイルをソースコードに変換することで、リクエスト数を減らすことができます。base64形式とは画像などのデータをテキストデータに置換する方式の1つです。電子メールでは画像や音声などのデータは送信時にbase64を利用しています。通常「src=”img/○○.jpg”」で画像を指定すると、ブラウザはサーバーにリクエストを送信し、その後画像をダウンロードします。base64形式で指定すると、サーバーへリクエストを送信することなく、画像ファイルを直接書き込むことができます。「リクエスト数が減る=表示速度が速くなる可能性がある」となります。注意点は元のファイルより3割ほどデータサイズが増える場合があるため、データサイズの大きい画像には適しません。here」にドラッグ&ドロップします。「base64形式のコードのみ」の3つの選択肢が表示されるので、好きな形式をクリックしてコピーします。終わりにいかがでしたでしょうか。ここでご紹介したコーディング方法は実際に弊社のレスポンシブECサイトを導入いただいているクライアントにご協力いただき、速度を検証した結果になります。どのようなサイトかによって最適な解決方法は異なりますが、上記の方法を用いることで実際に速度は改善された事例もあります。読み込み速度を向上させるテクニックは他にもたくさんあります。これからも試行錯誤を続けながら、より使いやすいECサイトが実現できるようにチャレンジしていきたいと思います。これからレスポンシブECサイトを構築される方や、もっと効果的なレスポンシブECサイトを構築したい方は、どんなことでもお気軽にご相談ください!相談・見積もりは無料です。aishipRサービスのお問い合わせ”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。・レスポンシブECサイトがなぜ今選ばれるのか・これまでのECサイトの課題とは何なのか・どのようにすれば解決できるのかといったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。無料パンフレットを請求するABOUTモバイルファーストマーケティングラボとは、スマートフォン/タブレット/PCに対応したレスポンシブECサイトの構築や成功事例の最新情報を発信するブログです。投稿一覧15歳の時に初めて携帯電話を手にして約15年。モバイルの面白さ、奥深さに魅了されて入社。中心に業種問わず様々なクライアントをサポートしております。合わせて情報サイト、「モバイルファーストマーケティングラボ」の編集長として、毎日モバイルマーケティングの情報を発信中。ECによってより便利で過ごしやすい世の中を作るお手伝いができればと思います。「インターネットでより豊かな人生を」がモットー。2016.03.07レスポンシブECプラットフォームとしてサービス提供しておりますaishipRですが、ECサイトに限らず、レスポンシブサイトを簡単に構築できるCMSとし[...]Yahoo!Japanの復興支援特設サイトが素晴らしい。2013.03.11yahoo!Japanのトップページ、下部にある復興支援特設サイトが朝から話題になっていましたのでご紹介します。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。自社ECサイト運営でASPをオススメする理由モバイルファーストラボ。