トラフィックの急増やトランザクションの集中は、あなたのECサイトのパフォーマンスおよび速度、そして言うまでもなくブランドイメージに、致命的な影響をもたらします。しかし、こうした事態にあらかじめ備えることも可能です。
サイトの速度を上げる対策を先延ばしにすればするほど、ユーザーはもっと早い競合サイトに流れていきます。Googleのモバイルページスピード調査結果が示すように、ページの読み込み速度が1秒遅くなるごとにユーザーの直帰率はどんどん高くなります。
Eコマースサイトにとっては、サイトパフォーマンスによって今まで以上に利害が大きく左右されることになるのです。わたしたちがこのガイドをまとめた理由はそこにあります。
ページの速度がEコマースに及ぼす影響とは？
ページ速度は、ひとつのURL上のコンテンツが読み込まれる時間を示し、一方でサイト速度は、ウェブサイト全体でのパフォーマンスを表します。GoogleのPageSpeed Insightsなどのサービスによって、これらの速度をスコア化でき、あなたのサイトのさまざまな読み込みタイムが総計されます。
例えばSkilledは、12の事例によって、ユーザーのサイトパフォーマンスに対する期待値を明らかにしました：
ページ読み込みの遅延は売上にも影響を与えます。クライアントとの実験を通じて、ウェブパフォーマンスのエキスパートであるTammy Evertsはページ読み込みが2秒早くなるとコンバージョンが66%引き上がるということを発見しました。
「ネットショップのユーザーが、遅いサイトでも我慢するということはあり得ません」とEvertsは説明します。
また、有料でもオーガニックでも、サーチエンジンは読み込みの遅いサイトにペナルティを課すでしょう。
有料広告の場合、ランディングページが遅いとGoogle AdWordsのクオリティスコアが下がり、クリック単価が高くなります。
SEOのエキスパートによると、遅いページはオーガニックのランキングにも悪影響を及ぼします。Googleは直近のSpeed Updateで公式にそれを認めています。2018年の7月時点では、ページ速度はモバイル検索のランキングファクターにもなっています。
それではこれから、読み込み速度とパフォーマンスの改善によって、検索的にも総合的にも顧客を獲得していく方法を見ていきましょう！
ECサイトのパフォーマンスとページ速度を改善する12の方法
- スピードと安定性を兼ね備えたホスティングサービスを使う
- CDN（Content Delivery Network）を使う
- Googleタグマネージャーでトラッキングを管理する
- モバイルパフォーマンスを優先してテスト＆最適化する
- ポップアップウィンドウを控えめに使う
- 過度のLiquidループに注意
- サムネイルの画像サイズを小さくする
- ヒーロースライドを少なくする
- 追加アプリをインストールするメリットを再考する
- 画像を圧縮＆サイズを縮小する
- 全体的なコードの量を減らす
- リダイレクトを減らして機能していないリンクを削除する
1 スピードと安定性を兼ね備えたホスティングサービスを使う
ユーザーのネットワーク環境によって、ページの読み込み速度は変わってきます。それでも、ホスティングサービスやインフラの能力がECサイトのパフォーマンスに与える影響も否定できません（とくにトラフィックやトランザクションが高く集中している時期は）。
ブラックフライデーの時期にサイトがクラッシュした有名ブランドはいくらでも列挙できます。Lululemon、J.Crew、Lowe’s…等々。ITICの調査によると、「回答者の81%が、60分のダウンタイムが30万ドル以上のコストを会社にもたらす、と回答しています」。
ホスティングプラットフォームの条件を調べるときは、次の点を必ずチェックするようにしましょう。
- セール時や季節的なプロモーション時のスケーリングに際してのメモリー領域または帯域幅の制限
- 急激なビジター増に備えてクラッシュを避けるための予測トラフィックとピーク時のユーザー負荷
クラウドベースのインフラのおかげで、Shopify Plusは99.98%の稼働率となっています。また、わたしたちのストアの読み込み速度は、他のSaaSプラットフォームより2.97倍早くなっています！
例えば2018年のブラックフライデー・サイバーマンデーのピーク時には、Shopifyは1時間で3,700万ドルの売上処理をおこないました。
Shopify販売事業者から集計されたデータ。このデータの背景にある戦略については、ホリデー・eコマース戦略2018をご覧ください。
巨大なセールイベントの前に、ネットショップのプラットフォームプロバイダーにお願いして、予測外のトラフィックや注文の急増に備えられるようにしておきましょう。
例えば2016年のブラックフライデー時の機能停止のせいで、SweetLegsは６桁の売上を損失しました。このような悪夢を繰り返さないために、同社は2017年のホリデーシーズンに間に合うようにプラットフォームを変更することを決断しました。
「ほぼ30日のうちに、すべてをやりきって、ローンチして、稼働して、そして注文が入ってきました」と、SweetLegsの創設者であるChris Pafiolisは言います。「わたしたちが気づいたのは、新しく乗り換えたShopifyのサイトは、どんなに負荷がかかってもまったくダウンしないということでしたね」
2017年のブラックフライデー・サイバーマンデーでは、SweetLegsのサイトは11,000件の注文を処理しました。もっと印象的なのは、2018年の最初の2度の四半期において、SweetLegsの売上は前年比で40％増を記録したことです。
2 CDN（Content Delivery Network）を使う
コンテンツ・デリバリー・ネットワーク（またはコンテンツ・ディストリビューション・ネットワーク）と呼ばれるCDNは、世界中に分散されたサーバーグループのことです。コンテンツ配信の負荷を、サイトビジターのロケーションにもっとも近いサーバーに分散させることで、ユーザーは迅速なサイト体験を得られます。
ECサイトがますますグローバルになっている昨今、CDN（Shopifyの場合はデュアルCDN）はプラットフォームのパフォーマンスにおいて不可欠なものといえます。
Shopifyでは、追加料金なしでFastlyによるワールドクラスのCDNを利用できます。ユーザーが世界のどこにいても、Shopifyストアはすぐに表示されます。ロケーションは、米国、英国、南アフリカ、オーストラリアとニュージーランドのAPACエリア、アジアを含みます。
世界中の戦略地域には、よりパワフルなFastly Points of Presence (PoPs)があります。高密度のPoPsにより、静的コンテンツやイベント駆動型コンテンツなどを含むキャッシュからより多くの情報を引き出せ、キャッシュヒット率が向上するので、より良いユーザーエクスペリエンスにつながります。
Fastly Network Mapの画像（2019年5月28日）
全般的に、CDNはコストを削減しながらスピードを向上させるといえます。「Shopify PlusのCDNでホスティングを始めてから、年間で約10万ドルを削減できました」とRed Dress BoutiqueのオーナーであるDiana Harbourは言っています。
ShopifyのCDNはどう機能するか？
ビジュアルコンテンツは、パフォーマンスを遅くする原因となりがちです。Shopifyは、あなたのアセット（画像、JavaScript (JS)、CSSなど）が変更された場合に、CDNにその情報を伝えます。
Shopifyでは、asset_urlフィルターを使って自動的に生成されたURLに番号を付与しています。たとえば、URLの終わりに付与された番号は?v=1384022871のような形式になります。このフィルターによって自動付与されたバージョンIDは、正しいバージョンをCDNに通知するのに利用されます。このバージョンIDがないと、変更を加えたコンテンツをアセットとして確認できなくなります。
つまり、正しい画像がオンラインストアに自動で表示されるためには、asset_urlフィルターを使って画像にリンクする必要があるのです。
さらに、コンテンツが直接CSSを参照する場合、URLは静的になります。そして、Shopifyによって自動でアップデートされたアセットのバージョンも持ちません。
そこで自動アップデートを有効にするには、CSSの構文を変更してasset_urlフィルターを含むようにします。アセットの取得に役立つURLフィルターの詳細は、Shopifyヘルプセンターを参照してください。
コンテンツデリバリーを最適化しつつ、次はJavaScriptトラッキングタグを賢く管理するツールを検討しましょう。
3 Googleタグマネージャーでトラッキングを管理する
顧客データは、あなたのEコマースサイトとマーケティング戦略を活性化させるものです。しかしながら、データの収集はサイトパフォーマンスを低下させるかもしれません。関連するJavaScriptタグ（一般的な分析、コンバージョン、リターゲティングの行動収集などに用いられる）がその原因です。
また、顧客データの収集はデベロッパーやマーケティングチームにとって時間とリソースを取られる一因となります。ここでGoogleタグマネージャーなどのタグマネジメントシステム（TMS）を使うと、すべてのタグを1つのJavaScriptリクエストにまとめられます。タグエラーがサイトダウンを引き起こした場合でも、TMSはすぐにタグを削除することに役立ちます。
Tag Inspectorによると、これは「要求されるアウトサイドコールの数を減らし、同時にリクエストを非同期にします（バックグラウンドでサイトの残りの部分をレスポンスの結果とは別に読み込みます）」。
下記のConversionXLによるダイアグラムは、TMSがあなたのページの読み込み速度を上げる仕組みを示しています。
同期型JSローディングのダイアグラム。JSファイルは準備できた順に読み込まれ、他の要素を待ちません。
Shopify Plusストアをオープンすると、1つのコードスニペットだけで、ストアのタグを一箇所でGoogleタグマネージャーと一緒に管理できます。もっと詳しく知りたい場合は、Shopify Plusヘルプセンターのガイドラインをご参照ください。
それでは、次にサイトスピードを向上させるためのテストツールと戦略を見ていきましょう。もちろん、始めに手がけるべきは、モバイル対策です。
4 モバイルのパフォーマンスを優先してテスト＆最適化する
モバイル戦略はかつてないほど重要になっています。2018年のブラックフライデー・サイバーマンデーを通じて、Shopifyストアのセールスのうち66%がモバイルによるものでした。米国全体のeコマース市場では、たった39%です。この違いは、おもにShopifyストアがモバイルに最適化されているため、より良いショッピング体験を生み出していたことによるものだと考えられます。
そして、モバイルショッピングの流れは大きくなる一方です。2020年には、年間で3,190億ドルの規模になると予測されています。
モバイル率の高さにもかかわらず、Mobile 1stによると、モバイルユーザーの一番の不満はページの速度が遅いことのようです。サイトクラッシュよりも高いランクに位置しています。
ここでひとつの例をご紹介しましょう。多数のモバイルユーザーがコンバージョンに至っていないという事実を発見したあと、企業向けアパレルとギフトのブランドMerchologyは、モバイルサイトをモバイル体験に最適化するべくリデザインすることを決めました。モバイルサイトのローンチ後2ヶ月して、Merchologyはモバイルのコンバージョン率が40%に上昇しました。
以下に、モバイルファーストの外観とサイト全体のパフォーマンスや速度を、競合と並ぶか凌駕できるようにする方法を概説しましょう。
(A) モバイルサイトの速度をテスト＆最適化
PageSpeed Insightsは、モバイルサイトのパフォーマンスを向上させるパーソナライズされた提案（デスクトップデータとは別に）をしてくれるGoogle Labsツールです。また,あなたのサイトの速度を下げているCSSやJavaScriptなどの要素を指摘してくれます。
競合サイトのパフォーマンスをチェックすることもできます。彼らのサイトの良くないところがわかれば、同じミスを避けるのに役立つはずです。
また、GoogleのTest My Siteツールを使うと,サイトのスピードがどれくらいコンバージョン率を引き上げるか試算するのに役立ちます。
モバイルに最適化したウェブサイトを作り直したMerchologyが、新しいモバイルサイトを2016年の9月にローンチしてから2ヶ月後に、以下のような結果が得られました。
- モバイルデバイスからの収益が前年比で340%上昇
- モバイルユーザーのコンバージョン率が40%上昇
「ユーザーの環境がデスクトップ、タブレット、モバイルのいずれであっても、注文とチェックアウトのプロセスがシンプルになるようにしました」とMerchologyの共同創設者Nolan Goodmanは言っています。
(B) その後、デスクトップページをスピードをテスト
PageSpeed Insightsはデスクトップの情報も、同様の提案とともにレポートします。ここでも、あなたのサイトのパフォーマンスと競合のトップのサイトを比較しましょう。
(C) 累積グレードを獲得
GTMetrixは、あなたのウェブサイトのスピードに対してA〜Fのグレードを付与します。使われるデータは、YslowとPageSpeed Insightsからマージされたものです。また、最適化が必要な部分を分析するのに役立つパフォーマンスレポートも提供されます。
(D) 最終調整でサイトパフォーマンスをスコア化
Pingdom.comが最終テストとなるでしょう。あなたのサイトのパフォーマンスが0〜100%でスコア化されます。
大きな問題をもっているエリアを特定する「Waterfall analysis」の機能も便利です。一行ごとにスコアを参照できます。
覚えておくべきこと
GTMetrixやPageSpeedのようなサードパーティ製のツールはそれぞれ構成が異なります。「ページ読み込み」のタイミングを提供するツールの場合、1つのタイムマーカーを結果内で選択する必要があります（例：TTFB=最初のバイトが到着するまでの時間)。
それぞれのテストツールが異なるスコアリングメソッドに基づいていることにも注意が必要です。チームごとにサイト速度の指標（KPIとは）が食い違わないようにしましょう。
こうしたスピードテストは、方針の決定などに役立ちます。ただし、サイト速度とカスタマージャーニーに基づくUI構築との間にバランスをとる必要があることも忘れないでください。
これらのツールは、Shopifyサイトをクロールしたり分析したりするために作られてはいません。次は特定の目的に合う方法を見ていきたいと思います。
Shopifyの速度最適化
Shopifyのページ速度に関するもっとも一般的な問題の解決方法を調べてみましょう。Shopify PlusのMerchant Success Program ManagerであるJonathan Sinclairが、あなたの役に立つスキルを紹介します。
5ポップアップウィンドウを控えめに使う
ポップアップウィンドウは常識となっています。ポップアップによって、商品詳細ページにいかなくても、商品リストページから直接商品の詳細を確認できます。
理論的には,商品が気にいるかどうか判断するユーザーの時間を節約していることになります。
しかし実際には、ユーザーのネットショップ体験を邪魔することにもなるのです。
- カスタマージャーニーに余計なステップを持ち込んでいる
- 意図せずクリックされてしまうこともあり、ユーザーをイラつかせる
- 商品ページと誤解される
さらに重要なことに、ポップアップによってページ読み込み時間が著しく遅くなります。
クイックビューのポップアップ（テーマに埋め込まれているものやアプリによるもの）を実装すると、商品ページ全体から情報をプリロードすることもありますが、これはビジターがクイックビューボタンを押したときだけのために備えてのことです。
しかし、ここで大量のデータがロードされることになり、20個や30個の商品サムネイルを持ったコレクションページの場合などはとくに大変です。クリックマッピングはJSベースのツールで、ユーザーのスクロールやカーソルの移動を追跡し、クイックビューが使われているかどうかを知るのに役立ちます。
以下のようなアプリも参考になるでしょう。
次のような場合にはクイックビューの削除をおすすめします。
- ユーザーが実際には使っていない
- それを用いる本質的な理由がない
検出
ストアフロントの商品サムネイルにクイックビューボタンがあるかどうか確認するのは簡単です。この機能のオンオフができるオプションについては、テーマのカスタマイズ設定をチェックしてください。
テーマのカスタマイズ設定にこのオプションがない場合は、アプリによるものかどうか確認しましょう。もしそうであれば、削除の方法があるはずです。
上記のやり方が通用しないときは、テーマに埋め込まれていると思われるので、場所の特定と削除ができるデベロッパーが必要になります。
ソリューション
ビジターがクイックビューボタンを押したときに商品情報を得るにあたって、AJAXを使います。または、限定的な商品情報をデータ属性として商品グリッドアイテムに保存します。そして、HTMLとJavaScriptでポップアップをダイナミックに構築します。
どちらのオプションよりも、クイックビューの削除のほうが理想的です。商品情報は、個々の商品からロードされる必要があります。それでも、商品画像やリンク全体をダウンロードするよりはいいでしょう。
6過度のLiquidループに注意
Liquidは、Shopifyの強力なコーディング言語です。しかし場合によっては、得られるメリットとトレードオフのバランスを取る必要も出てきます。
Forloopの反復がその例です。Forloopとは、システムがコレクションの全商品をループ（クロールや検索）して、特定の条件（価格やタグ）を探している場合に発生するものです。
大量の商品カタログを保持している場合、ループにかかる時間は長くなります。問題は次のようなシーンで起こります。
- アドバンスコレクションフィルタリングと膨大なナビゲーションの実装：ここではネスト化されたforloopが全商品の中から一致するものを抽出するために使われます。
- スワッチ：コレクションページの各商品に対して、変数、そして全画像をコードがループ処理し、最後に画像が関連づけられている色を割り出します。
- 数千点レベルの商品コレクションのページネーション：各ページに合理的な点数の商品を載せる代わりに、一度にすべての商品がサイトに表示され、JavaScriptによって段階的にページがロードされます。
こうした機能は、画像や商品バリエーションの出力などの特定のケースにおいてはメリットがあります。あなたがコレクションページに少量の商品を載せているだけの場合にも役立つでしょう。ですが、読み込みにかかる時間への影響という点においては慎重になるべきです。
ソリューション
テーマのコードをチェックして、同じ情報を得るために複数のループが走っていないか確かめましょう。デベロッパーが共同でテーマに関わっていると、同じタスクが繰り返されていたり、コードが互いに衝突していることがあります。こうした重複や矛盾の原因となるコードとタスクを削除することで、ページの読み込みが早くなることが考えられます。
Findifyは読み込み時間を犠牲にすることなく、アドバンスコレクションフィルタリングを実装する方法を開発しました。同社は、3万点の商品コレクションの読み込み時間を15秒から2.5秒に低減しています。その結果、Shopify Plusのクライアントのコンバージョン率を20％上昇させました。
Findifyの仕組みはこうです。
- デベロッパーはShopifyのバックエンドのすべてのフィルターを事前に計算します。
- コレクションが読み込まれると、最初は商品のサブセットのみを返します。
- ユーザーがブラウズやフィルタリングをおこなうと、パーソナライズされた商品が表示されます。
- すべてのフィルターはダイナミックなため、商品に関連したフィルタリングオプションのみがコレクションに現れます。
デベロッパーは、問題を引き起こすことがあるカラースウォッチを出力するにあたって、このドキュメントを利用できます。
スクリーンショットでは、システムがすべての商品オプションをループしています。そして、もし存在する場合はカラーオプションのインデックスを見つけます。それから、すべてのカラーオプションをループしたうえで、特定のカラーオプションを出力しています（すでに出力されていない場合のみ）。
このようなときは、product.options_with_valuesループを使うほうが簡単に済む場合が多いです。Shopifyのテンプレート言語とLiquidループの仕組みについて理解するにはドキュメントをご参照ください。
7サムネイルの画像サイズを小さくする
トップページで「売れている商品」のカルーセル機能を使用することが、問題になるかもしれません。情報は商品ページから呼び出されてサムネイル画像に表示されています。
問題は、商品画像が必要以上に大きなサイズで読み込まれるときに生じます。ユーザーのブラウザがサムネイルに合わせて画像を縮小する工程があるため、ページの読み込み時間に影響が出るのです。
ソリューション
Shopifyが提供する画像サイズパラメーターを使用してください。これは、品質を維持しながら最小限のサイズの画像をダウンロードすることを可能にします。まず、Shopifyに対して表示するべき画像をサイズを確認し、CDNからダウンロードされるファイルサイズを低減して、ブラウザ側で要求されるスケーリングを縮小します。
Shopifyが構築したテーマはすべて、デバイスのサイズに応じて適切な画像サイズが適用されるようにセッティングされています。
上級オプション
下記のものを使用するようにテーマを設定することができます。
- スクリーン解像度に応じた適切な画像サイズを読み込むためのsrcset
- まず低解像度の画像を読み込み、ページのコンテンツがロードされてから高解像度のバージョンを読み込むLazy Load（遅延読み込み）
8ヒーロースライドを少なくする
複数の大きなヒーローイメージをスライドショー形式で表示することは、あなたの商品を主張するのに良い方法です。ただ残念なことに、そのデメリットも存在します。見た目のきれいなヒーロースライダーを表示するのに必要な画像サイズや画質は、読み込み時間を上昇させます。4〜5枚の画像があるときなどは、とくにそうです。
ソリューション
スライドの数を減らしましょう。完全に削除してしまってもいいです。1枚の厳選されたクオリティの高いヒーローイメージと明確なCTA（call to action）があれば、ユーザーの注意を引くのに十分です。脳はビジュアルイメージをテキストの6万倍早く処理します。
どうしてもスライダーが必要な場合は、UXベストプラクティスに従いましょう。2〜3枚のスライドにとどめ、srcsetとLazy Loadを包括的に使用します。
9追加アプリをインストールするメリットを再考する
もしあなたのサイトで20個以上のShopifyアプリ（無料または有料のeコマース向けプラグイン）をインストールしていても、おそらく全部は使っていないでしょう。トライアルとしてインストールした後、そのままになっているものもあるかもしれません。使っていなくても、アプリはバックグラウンドで動いているため、サイトパフォーマンスを損ないます。
Shopify Plus管理画面でダウンロードされたアプリのスクリプトやCSSの大部分は、theme.liquidファイル、タグの中に埋め込まれ、{{ content_for_header }}の内にあります。
アプリが正確に作動するためには、ほかのコードがロードされる前にレンダリングされる必要があります。
Shopify PlusのソリューションエンジニアチームリーダーであるJason Bowmanはこう言っています。「アプリが素早くロードできることと、そのアプリの実験性やセールスポイントの部分は互いに相容れない要素があり、その緊張関係をうまく調節するためにわたしたちは非同期ローディングのスクリプトをAPIに追加しました。これでページの読み込みが中断するのを防げます。ただし、