2021年に予定されているGoogleのページエクスペリエンスアップデートは、SEOルールブックを再び書き換える必要があり、ウェブサイトの可視性のための速度の重要性が高まっている。 新たに加重されたGoogleアルゴリズムは、全体的なユーザーエクスペリエンスでページをランク付けするため、遅いeコマースストアは以前よりもランクが低くなる。
この変更は、Salesforce Commerce Cloud上でストアを運営している多くの大手小売業者や、他のeコマースプラットフォームを使用している小売業者のSERPポジションに深刻な影響を与える可能性がある。 しかし、この変更は、画像の最適化、遅延読み込み、CDN、タグマネージャ、AMPの実装など、標準的な最適化戦術を超えて、オペレータがさらに一歩進んで、見直すために非常に必要な製品である、変装における潜在的な恩恵とも見なされる可能性がある。
この記事では、Salesforce Commerce Cloud(SFCC)を高速化し、Googleの検索結果で上位にランクされる高速で高性能なウェブサイトを実行するための可能な方法を見ていく。 または、貴重なドルを使用するかわりに負荷時間から1秒を剃ることを試みる、半分の努力の即刻の負荷のウェブサイトをいかに提供できるか。
Googleのランキング更新は、eコマースの世界を揺るがすための巨大な気まぐれではない。 それはeコマースの現在の傾向と完全に一致しており、非常に高性能でスピーディなウェブサイトに多くの信用を与える。 店舗は、価格とサービスの質だけでなく、全体的な体験についてもますます競争している。
Salesforce Commerce Cloudは、他の多くのeコマースプラットフォームと同様に、主にコアビジネス機能に焦点を当てて設計されていることは周知の事実である。つまり、製品情報を価格とともに表示し、オペレーターに在庫を管理する機能的なバックエンドを提供する。 ウェブサイトの速度の最適化はプラットフォームの顧客、システムインテグレータ、設計者、開発者に任されている。
とんでもない。 スピードの問題は、Magento、Shopify Plus、Oracle Commerce Cloud、BigCommerce、SAP Commerce Cloud (Hybris )を含む、すべての人気のあるSaaS eコマースプラットフォームに浸透している。 私達は私達のblogの他のポストで速度のためにこれらのプラットフォームを最適化することについて書いた。
2020年4月には、米国の大手500インターネット小売業者(IR500)のGoogle Lighthouseスコアを調べて、どのeコマースプラットフォームが一貫して最速のサイトを提供しているかを確認した。 残念ながら、結論は、ほとんどのIR500ウェブサイトは、eコマースプラットフォームに関係なく、驚くほど遅い実行されているということだった。 実際、当社のデータによると、社内システムは主要なeコマースプラットフォームを61%上回っている。
主要なeコマースプラットフォームであるSalesforce Commerce Cloud、Magento、Shopify、SAP Commerce Cloud (Hybris )、Oracle Commerce Cloudのウェブサイトの平均スコアは、わずか18.7 (中央値15)
Salesforce Commerce Cloudの平均スコアは18.5で、Magentoに匹敵する。 スコアの中央値はSFCCとMagentoでそれぞれ17と13.5であった。 対照的に、社内/自社開発のeコマースシステムを使用しているウェブサイトの平均パフォーマンススコアは、IR500より15%高く、平均30.1であった。 IR500のウェブサイトの5分の1近くが社内のeコマースソリューションを使用している理由の1つかもしれない。
Salesforce Commerce Cloudは、スケーラビリティに優れたクラウドベースのSaaS型eコマースプラットフォームである。 Salesforceは定期的に新機能を追加しており、その一部はページ読み込みの貴重な時間を短縮するために提供されている。 実際、Commerce Cloud APIの新しいベータ版は有望なようだが、判断するには時期尚早である。
Salesforce Commerce Cloudを高速化するためのオプションを見てみよう。
画像の最適化は多くのeコマースウェブサイトの標準的な戦術である。 今日の企業向けEコマースサイトがいかに画像を大量に消費しているかを考えると、たとえ大規模なWebサイトに実装された場合でも、画像のコスト削減が累積的にサイト全体で大幅に増加する可能性がある。
このような最適化戦術には、次のものが含まれる。
- CDNを実装して、Closer Point of Presence(PoP)からアセットにサービスを提供する
- アップロード時の画像の可逆圧縮
- 折り目のはるか下に表示される遅延読み込み画像(特に長い製品カテゴリのリストページ)
Dynamic Imaging Service(DIS)は、Salesforceストアフロントへの画像の提供を合理化する。 これにより、小売業者が各画像のサイズの異なるバージョンをアップロードする必要がなくなる。
DISは単一の高解像度画像を動的に変換して店頭に提供する。 DIS変換パラメータを使用すると、画像のサイズ、トリミング、オーバーレイ、フォーマット、背景色、品質設定を制御できる。
DISは、マーチャンダイジングやクリエイティブな画像を事前にバッチ処理してウェブフレンドリーにする必要性を排除する。 DISは、単一の画像を使用して、製品ページ、カテゴリページ、推奨製品セクション、検索結果など、各画像アプリケーションに適したサイズを提供する。
簡単な答え:いいえ。 少なくとも単独では
多くのオペレータはDISがサイトをより速くすることができると想定しているが、DISに関するドキュメントでは速度が利点として直接言及されていない。 DISの利点はインストールに依存するが、画像がリアルタイムで処理されるため、必ずしも速度が向上するとは限らない。
Salesforce Commerce Cloudには、すぐに使えるいくつかのフレームワークテンプレートが付属している。
- Storefrontリファレンスアーキテクチャ(SFRA)
- モバイルファーストリファレンスアーキテクチャ(MFRA)
- SiteGenesis(Salesforceのレガシーリファレンスアーキテクチャ)
Storefront Reference Architectureは、最新のSalesforceフレームワークテンプレート。 最先端のモバイルファーストデザインのために設計されており、SFCCで店舗を構築する際のアーキテクチャリファレンスを小売業者に提供することを目的としている。 Commerce Cloud LINK Technology Partner Programを介して、Salesforce Commerce Cloud API、データオブジェクト、サードパーティテクノロジーと事前に統合されている。 データオブジェクト、API、サードパーティの要素と事前に構築されたウィジェット/統合を使用する。 これは古いDemandware Site Genesis (1.0と2.0)プログラムを発展させたものである。
Storefront Reference Architectureは、フロントエンドの変更(つまり、主要なビジネスケース)に対するサイト開発ニーズを軽減するツールとしてターゲットされており、ページの読み込み速度を向上させるツールとしてはターゲットされていない。 これは、インテグレーションがまだサードパーティの技術とスクリプトをページに導入しているため、ページの速度が低下するためである。
簡単な答え:そうでもない。 それは設計されていない。
Salesforceリファレンスアーキテクチャは、適応型設計アプローチにより、モバイル負荷の認識とサーバ側の負荷時間の改善に役立つ。 SFRAにはSFCCバックエンドとの統合もいくつか含まれており、理論的にはカスタム組み込みの統合よりも優れた性能を発揮する。
しかし、SFRAだけではストアをはるかに速くすることはできない! サイト開発が容易になり、総所有コストが削減される。 しかし、場合によってはロード時間が悪化することがある(ビルダーによって導入されたサードパーティのスクリプトやテクノロジーの数によって異なる)。
全体的に、SFRAは最小限の速度の利点しか提供しない。 主にページ読み込み時間の75%が様々なサードパーティのJavaScript、画像、HTMLから来るため。 そしてほとんどの場合、それを回避する方法は単にない。 追加の時間損失は、デザイン、画像サイズ、画像の位置に起因するが、SFRAではそれらのどれも加速されていない。
Salesforce Commerce Cloudストアを最適化する際には、さまざまな戦術を実装してスピードを上げることができる。 軽量テーマを使用したり、画像を最適化したり、タグの数を減らしたり(またはタグマネージャーを使用したり)、レンダリングをブロックするJavaScriptコードを削除したりすることができる。 これらの速度最適化技術のすべてに共通しているのは、タップされ、要求されたコンテンツの配信を最適化することに焦点を当てていることである。 タップ後に起こる事を最適化しようとする人気のある戦術のいくつかの例はここにある:
- 遅延読み込み
- 不要なSalesforce Commerce Cloudアプリをアンインストールする
- 分断したリンクの除去
- 「デッドウェイト」ページを削除する
- AMPでモバイル・パフォーマンスを強化
しかしこれは戦いの半分に過ぎない。 速度最適化の無限のサイクルを脱出するためには、瞬時に行く必要がある。 あなたのウェブサイトを即時(またはサブ秒)にすることは顧客が何かをかちりと鳴らす前に働く技術の組合せを要求する。 これは、ユーザーのタップに反応するのではなく、ユーザーのタップを予測することを意味する。
Salesforce Commerce Cloudやその他のeコマースプラットフォームやバックエンドシステムのいずれで実行している場合でも、最速のエクスペリエンスを提供するには、スピード重視の高度なWebテクノロジーを実装する必要がある。 そのためには、まずヘッドレスでポータブルフロントエンドを構築しなければならない。
スピード指向のウェブ技術の多くは、バックエンドをフロントエンドから分離する必要がある。つまり、ストアのフロントエンドをポータブルにしたり、ヘッドレスeコマースアーキテクチャに加入したりする。 そうすることで、フロントエンドとバックエンドに独立してスピード指向の改善を実装することが容易になる。 そしてそれはまたあなたがあなたの選択のバックエンドで最速のウェブサイトを提供することができることを意味する。
Salesforce Commerce Cloudストアをヘッドレスにすることは、高速でプログレッシブWeb App (PWA)フロントエンドを構築するために必要である。 これを行うには、SFCCバックエンドに接続できるようにするしっかりしたAPIカバレッジが必要である。 次に、次のようなあなたのウェブサイトを燃えるように速くする最先端技術の範囲を実装し始めることができる:
- 1ポータブルフロントエンドにより、ブラウジングを高速化
- サーバーサイドレンダリング(SSR)とAMPのサポートにより、超高速の初回ロードを実現。
- 予測プリフェッチ
- エッジコンピューティングを備えた最先端のCDNにより、エッジでの動的コンテンツのキャッシュヒット率を最適化し、買い物客の5秒先を行く
Salesforce Commerce Cloudが、これらのテクノロジーの実装と、1秒未満のeコマースWebサイトのサポートにどの程度適しているかを調査してみよう。
Open Commerce API(OCAPI)は、Salesforce Commerce Cloudで使用されるRESTful APIで、
- Shop API—Commerce Cloudデジタルストアフロント機能へのアクセスを提供
- Data API:デジタルアプリケーションの構成と統合機能へのオブジェクト単位でのアクセスを提供
- Meta API—Open Commerce APIで利用可能なリソースとドキュメントの正式な説明へのアクセスを提供する。
Open Commerce APIの使用に関する一般的な情報についてはAPIの使用法を参照。
SFCCには、OCAPI APIに加えて、ベータ版で新しいCCAPIレイヤがあることに注意することが重要である。
ベータ版の提供は有望に見えるが、迅速なヘッドレス店舗をサポートする範囲を判断するには時期尚早である。
Salesforce Commerce Cloudは、AMPまたはSSRをすぐにサポートしていない。 また、パイプライン実装はヘッドレスアーキテクチャではサポートが困難になる。
Salesforce Commerce Cloudは、すぐに使用できるPWAツールを提供していない。
しかし、SFCCでプログレッシブウェブアプリを構築するには2つの選択肢がある
- SiteGenesisまたはStorefront Reference Architecture(SFRA)でのPWAの最初からの直接構築
- Commerce Cloudと統合されたFront-end as a Service上でのITの構築
現代のPWAポータブルフロントエンドはアプリケーションのような速度を提供する。 ウェブサイトを探索する方が速い—これはオンラインストアで特に顕著である。 ネイティブのような感覚は、SFCC上のPWAを競合他社よりも速く感じさせる。
標準速度最適化では、合計速度の利点に制限がある。 そのような努力はしばしばリターンの減少によって支配され、ある時点で最適化によって得られる利益や利益は投資されたお金やエネルギーの量よりも小さいことを示唆している。
Edgioは速度の最適化の概念を戻し、買物客がタップする前にあなたのためのすべての重い持ち上げをする。 高度な予測プリフェッチとエッジキャッシュを備えた最新のCDNを使用することで、タップ後のページレンダリングを最適化するためにスクランブルするのではなく、キャッシュされたJSONデータをエッジからブラウザにストリーミングすることができる。 このようにして、Edgioはあなたの場所を常に買物客より5秒先に保つ。
Layer0(Edgio)は、数百万ページのeコマースや旅行サイトなどの大規模なデータベース駆動型Webサイトの場合、1秒未満の負荷を保証する唯一のプラットフォームである。 私たちの言葉を信じる必要はありません。私たちは、数十のタグ、リアルタイムの在庫、動的な価格設定を備えた数十の複雑な店舗を支援し、すべての店舗が1秒未満になるよう支援してきた。 2つの驚くほど高速なSFCCサイト、Shoe CarnivalまたはKate Spadeを携帯電話で閲覧して、Layer0で達成できる速度を体験してみよう。 我々も同じことができる
Layer0の目標は、Webを瞬時にシンプルにすること。 Layer0上のWebサイトでは、ページロードの中央値が320ミリ秒(FCP)で、オーガニックトラフィックとコンバージョン率が2桁上昇している。
Layer0(現在のEdgio)は、ヘッドレスフロントエンドの開発、展開、プレビュー、実験、監視、実行を行うオールインワンソリューションである。 フルスタックプレビュー環境を備えたアプリケーション認識型のCDN-as-JavaScript、組み込みのサーバーサイドレンダリング、高度なプリフェッチ、キャッシュとトラフィックルーティングの完全な制御が含まれている。 Edgioはあらゆる最適化の努力からあらゆるミリ秒を絞る。 実際、Layer0上で実行されている大規模で動的なWebサイトのページロードの中央値は500ミリ秒以下であることを保証している。
Shoe CarnivalのSalesforce Commerce Cloudストアは、Layer0(Edgio)での閲覧時間が6秒から500ミリ秒に移行
Layer0は、開発と展開から簡単なロールバックまで、迅速でヘッドレスなSFCCストアを非常にシンプルにする。 あなたは現代のヘッドレスフロントエンドでそれを行うことができる: Next、Nuxt、React、Angular SAP/Spartacus、React Storefront、Vue Storefront—私たちはそれらすべてをサポートしている。
要約すると、Layer0でSalesforce Commerce Cloudストアを実行するメリットの一部:
スピード
より速い店を動かすことによって、あなたの顧客に可能な最もよい経験を提供し、SERPでより高くなることのあなたのチャンスを高めている。 KateSpade.comとShoeCarnival.comは、Layer0上で1秒未満の速度でロードされるSalesforce Commerce Cloudサイトのほんの一例である。 実際、靴のカーニバルは、1ページ目の読み込みが3.4秒から6秒であったが、1秒未満で読み込まれるサイトに移行した。 Layer0では、最初のロードは70.5%速くなり、ロード時間の中央値は1秒になった。 その後のページロードは驚くべき92%削減され、わずか500msに減少した。
シンプルさ
Layer0では、Webを瞬時にシンプルにすることを目指している。ただし、単純な作業ではないヘッドレストレンドをサポートしている。 Layer0上のウェブサイトでは、サーバーレスJavaScriptプラットフォームを使用してコードをワークフローの中心に配置するだけで、開発者の速度とエンタープライズの俊敏性が20%向上する。 Layer0では、フロントエンドを書くのと同じようにルーティングルールを書く-それはフルスタックJavaScript Everywhereプラットフォームである。
コラボレーション
新しいコードを書くたびに、プリプロダクション環境が自動的に生成される。 QA担当者やビジネス関係者は、コードがマージされる前にテストしてフィードバックを提供できる。
Googleのページエクスペリエンスアップデートが2021年初頭に公開されると、遅いウェブサイトはランキングを失い、より速い競合他社に有利になる。 スピードはユーザーと検索エンジンにとって重要性を増し続け、トラフィックとコンバージョンリフトを提供する。
執筆は壁にかかっている:オンライン小売業者には、標準以下のウェブサイトパフォーマンスを提供するための言い訳がない。 行動を起こす時が来た。 これは、eコマースの弱者が、より大きな競合他社に追いつくか、または勝つ機会である。 そしてそうする最も簡単な方法はあなたのウェブサイトをsub-secondにすることである。
Salesforce Commerce Cloudストアの最適化には多くの時間と労力がかかり、結果が保証されない場合がある。 しかし、我々はあなたをカバーしている! Layer0を使用すると、競争を跳躍し、瞬時に進むことができる。