記事の内容やaishipシリーズに関するお問い合わせはこちらから

問合せフォーム

0120-173-163 お電話

[電話受付時間]平日9:30〜19:00

TOP

CATEGORY

SERVICE

＜決定版＞レスポンシブECサイトの読込速度を上げるコーディング方法8選

＜決定版＞レスポンシブECサイトの読込速度を上げるコーディング方法8選

目次

レスポンシブECサイトは速度が命！

ECサイトではサイトの読込速度がコンバージョン（購入）に大きく影響を与えると言われています。1秒の遅れでCVRが7%ダウン！読込速度の改善で快適なWebサイト構築をでも書いたように、

  • 検索結果がほんの1秒遅れただけでもユーザーの検索が減る。0.4秒遅くなっただけで検索回数が0.44%減少する。（Google）
  • サイト表示が0.1秒遅れる度に、売上が1％減少する（Amazon）

など、調査結果も出ています。特にレスポンシブECサイトではアクセスしてくるユーザーの通信環境は安定した固定回線だけとは限りません。電車や車で移動している時や、建物の中、地下で通信している可能性もあり、モバイルの小さい画面で通信が途切れたり読込に時間がかかってしまうとサイト離脱の可能性はグッと高くなります。

そこで今回はレスポンシブECサイトをコーディングする時に読込速度を上げる方法についてまとめてみました。

  • PNG/JPEGファイルを圧縮
  • ユーザーJSのminify化
  • CSS/JSをインライン化（ファーストビューの範囲のみ）
  • ファーストビュー以外のCSSを後方読み込み化
  • GoogleまたはYahooタグマネージャーの利用
  • jQuery2.xへのバージョンアップ
  • flexsliderのロードタイミング変更
  • CDNを利用

工数について
★★★　かからない
★★　　そこそこかかる
★　　　かかる

効果について
★★★　かなり早くなる
★★　　ある程度早くなる
★　　　早くなる
※あくまで弊社が独自に検証した結果ですので、実際の効果や工数は異なる場合がございます。また実装される際は必ずバックアップなどをお取りなり、自己責任の範囲でお願い致します。

 

PNG/JPEGファイルを圧縮

工数：★★
効果：★★★

スマートフォンの普及でコンテンツに大きな写真を使うことが多いと思いますが、サイト容量を大きく食ってしまいます。そこで、画質をほとんど劣化させずに画像ファイル容量を圧縮することができる「ロスレス圧縮」がオススメ。

以前の記事で無料で画像をロスレス圧縮することができるツールをご紹介していますので、是非使ってみてください。

参考：【無料ツール】レスポンシブサイトで画像サイズを悩むならロスレス圧縮を！

Exif情報を削除する

またJPEG画像であれば、Exif情報（写真が撮影された日時・撮影機種・画素数などの情報）が付与されている場合もあります。こちらも削除することで軽量化につなげることが可能です。

参考：JPEG画像のExif情報をドラッグで一括削除できるソフト「ExifEraser」

またMacを使っていればImageOptimが便利です。上記のロスレス圧縮に加え、Exif情報も同時にドラッグアンドドロップするだけで削除してくれます。ちなみに僕もこのソフト使っています。

JavaScriptのminify化

工数：★
効果：★★★

minify化とは、JavaScript（だけでなくHTMLやCSSにも）を普通に記述した場合、ソースにはコーダーが分かりやすいようにインデントや空白、コメントなどが含まれています。これらはブラウザで表示する際には全く必要のないものなので、これらを取り除きファイルサイズを削減することをminify化と言います。

以下の2つを使えばかなり楽にminify化を実現できます。
■CSSの常識が変わる！「Compass」、基礎から応用まで！
■GRUNT

その他、無料で使えるJavaScriptを圧縮できるツールをご紹介します。

■Closure Tools

Googleが提供している無料のJavaScript圧縮ツールです。
closuretools

■JS Minifier

シンプルに圧縮してくれる無料のツールです。
JSminifier

CSS/JSをインライン化（ファーストビューの範囲のみ）

工数：★★★
効果：★★

その名の通り、ファーストビュー（ページロード時にスマートフォンやパソコンの画面に表示される最初の範囲）に関するHTMLファイルのソースコードにCSSやJSをインライン化してしまいます。

<style>*html{＊}body{＊}…</style>

今まではソースコードが複雑になるため推奨されていませんでしたが、読込速度の向上につながるため、今はGoogle検索のTOPページもインライン化をして高速化を実現しています。

GoogleTOPのソース

ファーストビュー以外のCSS／JSを後方読み込み化

コード

工数：★★
効果：★★

上記ファーストビュー以外のCSSについては、</body>の直前に読み込みましょう。特にJSの後方読み込みに関しては、速度向上の幅は大きかったです。

参考：Webページを速く見せるための5つのちょっとした工夫

GoogleまたはYahooタグマネージャーの利用

タグマネージャ

工数：★★★
効果：★★★

タグマネージャとは、Google Analyticsなどの解析ツールや、各種Web広告などの効果測定ツールなど複数ある測定用のタグを1つにまとめて管理出来るツールです。

Googleタグマネージャー
Yahoo!タグマネージャー

利用するメリットとして、記載するタグが1つになるので、タグの差し替えや編集する必要があった際に、都度htmlの更新が必要なくなり、管理も楽になることが挙げられます。

また読み込むソースコードも1つになるため、予想以上のページの読込速度の向上につながりました。

参考：Google タグマネージャでWebページに読み込むJavaScriptを管理してみる

jQuery2.xへのバージョンアップ

jQuery

工数：★★★
効果：★★★

jQueryは最新版にアップデートすることで簡単に読込速度の高速化を実現できます。これまでのIE6〜8のサポートを廃止し、モダンブラウザにフォーカスすることでより早く安定した動作を実現しました。

IE8以前は標準ではレスポンシブWebデザインには対応していないので、これらのブラウザに対応する必要がなければ積極的にバージョンアップを行いましょう。

jQuery | ダウンロード

flexsliderのロードタイミング変更

工数：★★★
効果：★★★（FV表示速度のみ）

レスポンシブなスライダーが使えるプラグインとして有名な「FlexSlider2」ですが、大規模サイトですと少し遅れて表示されることがたまにキズでした。
しかしコードを以下のように書き換えることで、ページ全体が読み込まれる前にスライダーを表示させることが可能となります。

// $(window).load(function()→$(function()に書き換え
$(function(){
  $('.flexslider').flexslider({
    animation: &amp;quot;slide&amp;quot;
  });
});

配布元で紹介されているコードでは「load」を使用していますが、「load」ですとページが完全に読み込まれてからの動作となります。

このため「$(function()」や「$(document).ready(function()」などの方が早いタイミングで動作させることができます。

※公式では「Can also be used with $(document).ready()」とコメントされていますので、「$(document).ready()」の方が安全そうです。

CDNを利用

工数：★★★
効果：★★★

CDNとはコンテンツデリバリーネットワークの略で、Webコンテンツをユーザーに配信する際に、最適なキャッシュサーバからコンテンツを配信することで、サーバの負荷を下げるとともに、読込速度の向上にもつながります。

マンガで見るCDN | CDNetworks

弊社クライアントにCDNを導入した事例では、平均約2割ほど読込速度が向上しました。

ただ独自にCDNを導入するには多額の費用が発生するのがデメリットです。余程大きな資本力がないと導入は難しいですが、弊社が提供しているレスポンシブECサイトが構築できるaishipRのようなASPであれば、コストを押さえてCDNを利用することができます。（データ転送量月間100GBあたり3,000円/月でご利用可能）

ご興味のある方は無料相談を受け付けておりますので、是非一度ご相談ください。

aishipRサービスのお問い合わせ

終わりに

いかがでしたでしょうか。

ここでご紹介したコーディング方法は実際に弊社のレスポンシブECサイトを導入いただいているクライアントにご協力いただき、速度を検証した結果になります。もちろんどのようなサイトかによって最適な解決方法は異なりますが、上記の方法を用いることで実際に速度は改善されました。

読み込み速度を向上させるテクニックは他にもたくさんあります。これからも試行錯誤を続けながら、より使いやすいECサイトが実現できるようにチャレンジしていきたいと思います。

上林

 レスポンシブECサイトの問合せはこちら

投稿 by モバイルファースト・マーケティングラボ.
                   
クラウドECのサイト構築はaishipR-カスタマイズ可能なASP実績No.1

累計2000社以上の導入の総合通販型カートシステムで、カスタマイズ性が高く、デザインの自由度はもちろん、各種システムとの連携や機能追加等も独自のカスタマイズができるため、こだわりのある本格的な通販を月額9,800円から実現できます。 またモバイルファースト設計や月2回の無償バージョンアップなどの特徴があり、使いやすさと最新性を追求した通販サイトを構築できます。 さらに信頼性の高いサーバーを採用しており大規模アクセスにも対応できるため、これからさらに通販での売上を伸ばされたい事業者様におすすめです。
資料請求
         

おすすめカテゴリの最新記事