Home 技術記事 驚くほど高速なShopify Plusストアの背後にある秘密
Applications

驚くほど高速なShopify Plusストアの背後にある秘密

About The Author

Outline

Shopify Plusは、Tesla、Victoria Beckham Beauty、Staples、Oreo / Mondelez、Red Bullなどの世界最大のブランドを魅了している人気のSaaS eコマースプラットフォームです。 リストはどんどん続き、広く採用されているのは当然です–Shopify Plusは使いやすく、簡単にカスタマイズできます。 膨大な数のプラグインとAPIを提供し、信じられないほど応答性の高いサポートチームによってバックアップされています。 eコマースプラットフォームに他に何を期待できますか? Shopifyストアであろうとなかろうと、答えは同じです。1秒未満のページ読み込みと競合他社を上回るSEO。

最も洗練された最も美しいでさえShopify Plusウェブサイトは、より大きな小売業者との激しい競争に対抗するチャンスはありません。オペレーターが1秒未満の速度でサイトを最適化するために余分なマイルを踏み出さない限り。

Shopify Plusストアをできるだけ早くすることは、優れたシームレスなショッピング体験のおかげで、ストアをSERPで上位にランク付けし、コンバージョン率を上げる最も簡単な方法の1つです。

Shopifyでは、エクスペリエンスではなく商品を配信できる

Shopify Plus、Magento、Salesforce Commerce Cloudなどの多くのeコマースプラットフォームは、バックエンドとデータファーストのアプローチで構築されており、実際の顧客体験にほとんど焦点を当てていません。 彼らの焦点は人ではなくSKUにあります。 これは、プラットフォームの顧客、システムインテグレータ、設計者、および開発者のウェブサイトの速度最適化に負担をかけます。

ストアがShopify Plusまたはその他の人気のあるeコマースプラットフォームまたはバックエンドシステムで実行されているかどうかにかかわらず、最速のエクスペリエンスを提供したい場合は、速度に焦点を当てた高度なWebテクノロジーを実装する必要があります。 そのためには、まず頭を下げなければなりません。

ヘッドレスeコマースのメリット

ヘッドレスeコマースアーキテクチャとは、サイトのフロントエンドデザイン(つまり、プレゼンテーションレイヤー)がバックエンドインフラストラクチャから切り離されているアーキテクチャです。 モバイルアプリのコンテンツを管理するためにWordPressを使用するのと少し似ています(価値があるのは、WordPressのREST APIで可能です)。

従来のモノリシックeコマースアーキテクチャ

ヘッドレス化は、2020年以降の多くの小売業者にとって、最も重要な取り組みの1つとして認識されています。 これにより、小売業者はバックエンドとは無関係にフロントエンドに最適なソリューションを選択できるため、店舗の運営を迅速化し、コンバージョン率を高め、ランキングを向上させることができます。 マイクロサービスアーキテクチャとも呼ばれるヘッドレスeコマースは、競合他社より優位に立つためのフェールセーフな方法です。

APIレイヤーを使用すると、サイトのフロントエンドとバックエンドを分離できます。

具体的には、ヘッドレスeコマースには次のような利点があります。

1.高速化

ヘッドレス化は、スピード重視のテクノロジーを多数実装するための前提条件です。 これは、ディスプレイロジックをクライアント側にシフトし、バックエンドを合理化して最高のパフォーマンスを実現することで可能になります。 コンテンツの迅速な配信のみに焦点を当てることで、フロントエンドはブラウザに労力を委ねるものよりも速く、応答性が高くなります。

2.選択の自由

多くのeコマースプラットフォームは、ユーザーに独自のフロントエンドを提供しています。 Shopify Plusも例外ではなく、ShopifyのLiquidテンプレート言語に基づいたレスポンシブテーマの選択があります。 ヘッドレスにすることで、ベンダーロックインの束縛を完全に取り除き、プラットフォームのフロントエンドツールを超えてリーチできます。 これにより、俊敏性が向上し、eコマースプラットフォームのロードマップとは無関係にフロントエンドを開発できます。

3.バックエンドの独立性

ヘッドレスWebサイトへの投資は、ストアの将来を保証します。 フロントエンドコードを所有しており、自信を持って開発し、投資することができます。 これにより、必要に応じていつでも別の、より安価な、またはより優れたeコマースプラットフォームに移行できます。 このような場合、ストアにサードパーティツールとの統合が多数ある場合でも、新しいeコマースプラットフォーム用に書き換える必要はありません。古いプラットフォームのAPIを新しいプラットフォームのAPIと交換するだけです。

4. SEOの向上

ヘッドレスサイトは高速であるだけでなく、SEOも向上します。 ヘッドレスWebサイトでは、URL、メタデータ、robots.txtファイル、およびテクニカルSEOのその他の側面を処理する方法を選択できます。 Shopify Plusでは、この機能はそのまま使用できません。

5.将来のユースケースとエンドポイントのサポート

プログレッシブウェブアプリ(PWA)やシングルページアプリケーション(SPA)のようなヘッドレスフロントエンドを使用すると、オペレータは店舗の将来性を保証し、新しいエンドポイントを自由に追加し、追加機能を開発できます。 必要なのはAPIに接続するだけです。 事実上すべてのデバイスまたはプラットフォームをエンドポイントとして追加し、ヘッドレスでストアのチェックアウトを行うことができます。

最速の背後にある秘密Shopify Plusストア

ヘッドレス化は、より迅速で応答性の高いストアフロントを開発するのに役立ついくつかの高度なWebテクノロジーと最適化技術を実装するための基盤です。 これらを組み合わせることで、Shopify Plusウェブサイトを最適化して、最高の速度、SEO、収益を得ることができます。

ポータブルPWAフロントエンド

ヘッドレスで結合することでShopify Plus PWAポータブルフロントエンドと組み合わせることで、モバイルデバイスのWebサイトで超高速のブラウジング速度を得ることができます。 PWAを使用すると、顧客はインスタントページ遷移のエクスペリエンスを向上させることができます。 PWAのブラウジングの移行が速いのと同じくらい、最初の読み込みには従来の複数ページのWebサイトよりも時間がかかる傾向があります。 これに対処し、ランディングからチェックアウトまでの驚くほど高速なエクスペリエンスを提供するには、サーバーサイドレンダリングとAMPサポートをPWAに追加することを検討してください。

サーバーサイドレンダリング(SSR)

サーバーサイドレンダリングは、高速なPWAを伴う重要なWebテクノロジーです。 サーバーサイドレンダリングを使用しない場合、ブラウザは、画面上に何かをレンダリングする前に、すべてのJavaScriptコードをダウンロードして解析し、実行する必要があります。 SSRを使用しないPWAは、シミュレーション3Gで2.5秒未満のTTFMP(Time to First Meaningful Paint)を達成するのに苦労しています。 エッジコンピューティング機能を備えた最新のCDNと組み合わせることで、SSRを使用するサイトは、ほぼ瞬時にTTFMP時間を達成できます。

SSRは、メール、ソーシャルメディア、紹介からの訪問者が迅速に最初のロードを体験できるようにします。 SSRサポートにより、PWAは、最初のページだけでなく、超高速の最初のページロードと瞬時のページ遷移のエクスペリエンスを強化します。

サーバーサイドレンダリングは、SEOの向上にもつながります。 eコマースビジネスはSEOに依存しており、サイトが検索やソーシャルボットやクローラーによって理解されることを100%確実にする唯一の方法は、それをHTMLに翻訳することです。

これは、JavaScriptを多用するeコマースPWAフロントエンドを構築する場合に特に重要ですShopify Plus。 クローラーやボットはJavaScriptコンテンツのインデックスを確実に作成しないため、サーバー上でページをレンダリングする必要があります。

Shopify PlusにはSSRサポートが組み込まれていません。

高速化されたモバイルページ(AMP)

Google AMPは、HTMLを簡素化し、CSSとJavaScriptに厳しい制限を課すことで、超高速のモバイルウェブページを作成するためのオープンソースフレームワークです。 検索から500ミリ秒で読み込まれる平均AMPページ。 これらのページはキャッシュされ、Googleサーバー上で事前レンダリングされます。これにより、迅速に配信されます。

Shopify Plusは、AMPまたは真のSSRサポートをすぐに提供していないため、モバイルでの最初のページのロードを最適化する機能が大幅に妨げられます。 これらの機能は、独自にWebサイトに追加する必要があります。 AMPとSSRの両方で、フロントエンドのバックエンドが必要になります。 詳細は以下を参照してください。

フロントエンド(BFF)のバックエンド

BFFsは、ヘッドレスeコマースおよびマイクロサービスベースのアーキテクチャAPIを使用する際に中心的な役割を果たします。 PWA、ネイティブAndroidまたはiOSモバイルアプリなどの単一のクライアントが、各クライアントに合わせて最適化することなく、共有APIをより効率的に使用できるようにする、アプリケーションスタック内の個別のレイヤーです。 API呼び出しを透過的に「傍受」し、渡された引数を変換して、特定のエンドポイントで理解できるようにします。

BFFは、フロントエンドのサーバーサイドレンダリングとAMP変換を行うのに最適な場所です。 BFFはまた、Shopifyストアに他の多くの利点をもたらします。

BFFと速度
フロントエンドでは、複数のサービスへの呼び出しをオーケストレーションしたり、ページデザインに最適な応答データを再フォーマットしたりする必要があります。このコードはどこかで実行する必要があります。 BFFを使用すると、このコードをフロントエンドバンドルから除外して、小さくて高速に保つことができます。 ほとんどの場合、レスポンスはキャッシュ可能であるため、すべてのリクエストですべてのユーザーのデバイスでこのシムコードを実行するのではなく、クラウド上で実行されます。クラウドは、需要に合わせて拡張でき、キャッシュミスが発生した場合にのみ拡張できます。

モバイルクライアントの場合、HTTP要求が多すぎると時間の面でコストがかかり、呼び出しごとに不要なミリ秒が追加されます。 リクエストの数を最小限に抑えるために、フロントエンドは一般的に単一のAPIを介して関連データを取得する傾向があります。 これは、バックエンドが各クライアントのニーズを満たすためにUI関連のロジック処理を担当することがあることを意味します。 これは非効率的なアプローチです。

フロントエンド用のバックエンドが実装されている場合、フロントエンド(モバイル、Web)はBFFを介してバックエンドマイクロサービスにのみアクセスし、各クライアントは個別のBFFサービスを取得します。 BFFを使用すると、マイクロサービス間の相互コールが少なくなります。 これは、一部のUIロジックがBFFレベルで処理されるためです。

BFFと開発速度
BFFは、異なる開発チームが独立して作業できるようにすることで、開発者の速度を向上させます。 これにより、開発者はコアAPIを変更することなく新しい機能を追加できます。 これは、APIがShopify Plusによって提供され、変更できない場合に特に便利です。

ベンダーロックインの最小化
切り替える必要がある場合Shopify別のeコマースプラットフォームの場合、フロントエンドのバックエンドは労力とコストを削減します。 これは、ヘッドレスアーキテクチャの柔軟性という形で大きな利点を提供します。

BFFベースのフロントエンドとバックエンドのデカップリング

エッジコンピューティングによる予測プリフェッチとCDN

予測プリフェッチは、訪問者がクリックする前に訪問する可能性が最も高いページを事前キャッシュしてレンダリングするために使用される高度な機能です。 エッジコンピューティング機能を備えた最新のCDNを使用すると、動的データをエッジにストリーミングし、ユーザーが要求する前にユーザーのブラウザーにストリーミングできます。 これらのテクノロジーを組み合わせることで、Shopify Plusストアは、どこでタップしても、買い物客の前に5秒を維持できます。

動的データをエッジにプリフェッチしてストリーミングすることで、Shopifyストアを閲覧している消費者が待っているものをキャッシュして即座に提供できます。これは、在庫のあるさまざまな商品、価格、情報に変換するJSONデータです。 しかし、これを行うには、アプリを理解する高度なCDNが必要です。

Layer0 CDN-as-JavaScriptキャッシュヒット率を前代未聞のレベルに最適化し、インテリジェンスをエッジにもたらします。 これにより、ビジネスオーナーはURLの無限のリストを表示するだけでなく、類似したページ(PDP、PLP、Cartなど)をカテゴリ化することで、傾向と最適化の機会を解読できます。 これにより、アクションを実行し、Webサイトの読み込み時間の違いを確認できます。

Layer0 CDN-as-JavaScriptは、エッジでの動的コンテンツのキャッシュヒット率が95%以上であり、平均的なeコマースWebサイトのキャッシュヒット率は15%です。 この違いは、予測プリフェッチ機能と合わせて、大規模なeコマースWebサイトの5を、どこでタップしても、買い物客の数秒前に保つことができます。

ヘッドレスで行くのはどのくらい難しいですかShopifyプラス?

ストアを実行するeコマースプラットフォームを選択するには、ヘッドレスWebサイトのプラットフォームのサポートとサブセカンドサイトを可能にするテクノロジーを考慮する必要があります。 多くのeコマースプラットフォームは、すぐに使えるモノリシックです(つまり、フロントエンドとバックエンドを組み合わせています)。

明示的にヘッドレスアーキテクチャをサポートしていませんが、Shopify Plusでは、小売業者はヘッドレスストアを実行し、別のフロントエンドフレームワーク(React Storefrontなど)や、多くのヘッドレスで使用されているContentfulのようなヘッドレスCMSを使用できますShopifyビルド。

Shopify Plusは、ストアフロントAPIの強固な独自のコレクションを提供し、プラットフォームのコンテンツとコンポーネントへのアクセスを有効にすることでヘッドレス化を可能にします。

Shopify PlusはヘッドレスWebサイトを正式にサポートしておらず、スピード重視の機能やテクノロジーをすぐに利用できるものは多くありません。 これは驚くことではありません。プラットフォームは在庫、価格、データを管理するためのものであり、これらのテクノロジーの実装には多くの労力が必要になります。 ただし、いくつかの注意点がありますが、Shopify Plusは、小売業者がヘッドレスになり、スピード中心の重要な戦術を実装するのが比較的簡単になるため、依然として素晴らしい選択肢です。

Shopify Plusの長所

  • 商品情報のための優れたAPI Storefront APIを使用すると、Shopify Plusは商品と注文処理のための適切な参照を提供し、APIは十分に文書化されています。
  • GraphQL API形式 Storefront APIは、将来性のある最新の形式GraphQLで利用できます。

Shopify Plusの短所

  • すぐに使用できるPWAフレームワークはありません Shopify PlusはPWAをネイティブでサポートしていません。 ただし、一部のマーチャントはプラットフォーム上でPWAを実行しています。 これを可能にするには、ストアにBackend for Frontend (BFF)が必要な場合があります。これにより、ストアフロントAPIとPWAフロントエンドの間でマイクロサービスを実行できます。 これは、APIを最適化し、クライアントごとに個別のAPIを作成することを回避する方法です(クライアント側のロジックの量を最小限に抑える方法です)。
  • AMPなしすぐに使用できる Shopify Plusは、独自のAccelerated Mobile Pages(AMP)ソリューションを提供していません(ただし、Shopifyアプリマーケットプレイスの有料アプリではAMPの実装が可能です)。
  • APIカバレッジ Shopify製品にはまともなAPIがあり、他の多くのものについては完全なAPIカバレッジはありません。 たとえば、Shopify Plusコントロールパネルでは、マーチャントがサイトナビゲーションメニューの項目を設定できますが、それらのメニュー項目を取得するAPIはありません。 ヘッドレスShopify Plusの実装は、少しの腕相撲や回避策なしにそれらにアクセスするためのクリーンな方法を提供しません。
  • スロットル Shopify Plusは、1人のユーザーとして実行できるリクエストの数を制限します。 Shopify PlusにはAPI呼び出し用の特別なヘッダーがあるため、BFFレイヤーは単一ユーザーとしてカウントされません。 ただし、上記のAPIカバレッジの問題のため、リクエストは必ずしも実際のAPIコールではなく、BFFレイヤーでは単一ユーザーからのリクエストとしてカウントされます。 これは、レイヤーが多くのユーザーのトラフィックをプロキシしている場合でも発生します。

Edgio(Layer0)によるプロセスの簡素化

PWA、SSR、AMP、BFFの3文字の技術頭字語を読むと、頭が回転し、これらの技術を自分で実装するのは少し面倒なことは言うまでもありません。 Edgio(Layer0)は、DevOpsやメンテナンスをほとんどまたはまったく必要としない、パフォーマンスと拡張性に優れた方法でこれらすべてを処理します。

Edgio(Layer0)では、データベース駆動型のeコマースWebサイトの1秒未満のページロードを保証する唯一のプラットフォームで、可視性、リーチ、収益、顧客満足度を獲得することに専念しています。

複雑で動的なeコマースWebサイトが1秒未満の速度を達成しながら、開発速度と収益の成長を高め、DevOpsコストを削減できるよう支援します。

お客様がそうしない限り、私たちは勝ちません。 私たちはインスタントを持っていますShopify私たちのポートフォリオには、非常に競争の激しいeコマース環境での地位を確保するための信頼の飛躍をしたストアがあります。

Planet BlueがMoovweb XDNでインスタントShopify Plusストアを立ち上げた経緯

Planet Blueがレイヤ0(Edgio)で16秒のブラウジング遷移から500ミリ秒に移行

Planet Blueは、オーガニックアパレルの単一ストアの供給者から、国際的なデザイナーおよびオムニチャネルアパレル小売業者に成長しました。 彼らのインスタントShopifyのストアは、彼らが優れたショッピング体験を提供することを可能にします。

tayer0で起動する前に、Planet Blueのモバイルページの読み込みに10秒かかりました。 小売業者のモバイルトラフィックの70%以上がコンバージョン率に深刻な影響を与えました。 Planet Blueは、顧客の要求を満たし、競争力を維持するためには、モバイル体験の見直しが必要であることを理解していました。 Layer0での起動により、ナビゲーション時間が95%短縮(デスクトップで16秒→0.5秒、モバイルで10秒→0.5秒)。ユーザーがWebサイトを閲覧する際に、オンラインカタログのような印象を与えました。

Layer0を使用したPlanet Blueの結果:

  • Layer0のインスタントサイトでコンバージョン率が前年比31%向上
  • 16秒→0.5秒の遷移 により、デスクトップでの処理速度が97%低下
  • 10秒→0.5秒のトランジションで 、モバイルでの速度が95%低下
  • デバイス全体で1ページ目のロードを平均60%以上削減
  • 瞬く間にページが読み込まれることで顧客満足度が20%以上向上

  • React Storefrontで構築された超高速eコマースPWA
  • サーバーサイドレンダリングとAMPのサポート
  • 予測プリフェッチ
  • CDN-as-JavaScriptエッジで動的コンテンツのキャッシュヒット率を最適化することで、ストアは買い物客のクリック数5を数秒先に予測できます。

概要

ヘッドレスコマースアーキテクチャへの移行は、多くの小売業者にとって重要な取り組みです。Macy’s、Walmart、Target、Nike、Airbnb、 そして、より多くはすでに切り替えを行っています。 この傾向は、3つの主な理由で牽引力を得ています。それは、eコマースプラットフォームのフロントエンドツールの制限からの自由を提供し、ウェブサイトの速度とSEOを向上させる最善のウェブ技術の実装を可能にし、将来のユースケースの簡単な実装を可能にします。

上記で説明したいくつかの注意点がありますが、Shopify Plusは、ヘッドレスストアを構築し、スピード重視の主要なテクノロジーを実装するのに役立ちます。 取り残される余裕はありますか。