Top Trends in Cybersecurity for 2024 | 
Shopify Plusは、テスラ、ビクトリアベッカムビューティー、ステープルズ、オレオ/モンデリーズ、レッドブルなどの世界最大のブランドのいくつかを魅了している人気のSaaS eコマースプラットフォーム。 リストはどんどん続き、幅広い採用は驚くことではない–Shopify Plus使いやすく、簡単にカスタマイズ可能。 プラグインやAPIが豊富で、サポートチームがサポートしている。 eコマースプラットフォームに他に期待できることは? Shopifyストアであろうとなかろうと、答えは同じままである:サブ秒のページロードと競合他社を凌駕する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.将来のユースケースとエンドポイントのサポート
Progressive Web Apps (PWA)やSingle-Page Applications (SPA)のようなヘッドレスフロントエンドにより、運営者はストアの将来性を保証し、新しいエンドポイントを自由に追加し、追加機能を開発できる。 APIに接続するだけでよい。 事実上、あらゆるデバイスやプラットフォームをエンドポイントとして追加し、ヘッドレスでストアのチェックアウトを行うことができる。
最速の背後にある秘密Shopify Plusストア
ヘッドレス化は、より速く、より応答性の高い店頭を開発するのに役立ついくつかの高度なウェブ技術と最適化技術を実装するための基盤である。 組み合わせて、それらは最適化を助けることができますShopify Plus最高の速度、SEO、収益のためのウェブサイト。
ポータブルPWAフロントエンド
ヘッドレスになり、Shopify PlusとPWAポータブルフロントエンドを組み合わせることで、モバイルデバイス上のウェブサイトで超高速のブラウジング速度を得ることができる。 PWAを使用すると、顧客はインスタントページ遷移の強化されたエクスペリエンスを楽しむことができる。 PWAのブラウジング遷移が速いほど、最初の読み込みは従来の複数ページのウェブサイトよりも時間がかかる傾向がある。 これに対抗して、ランディングからチェックアウトまで超高速のエクスペリエンスを提供するには、PWAにサーバーサイドレンダリングとAMPサポートを追加することを検討する。
サーバーサイドレンダリング（SSR）
サーバーサイドレンダリングは、高速なPWAに付随する重要なウェブ技術である。 サーバーサイドレンダリングがない場合、ブラウザは画面上に何かをレンダリングする前に全てのJavaScriptコードをダウンロードし、解析し、実行しなければならない。 SSRを使用しないPWAは、シミュレーションされた3G上で2.5秒未満のTime to First Meaningful Paint (TTFMP)を達成するのに苦労する。 エッジコンピューティング機能を備えた最新の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サポートをすぐに提供していないため、モバイルで最初のページのロードを最適化する機能が大幅に妨げられる。 あなた専有物のあなたのウェブサイトにこれらの機能を加える必要がある。 AMPとSSRの両方で、フロントエンド用のバックエンドが必要になる。 それについての詳細は以下である。
フロントエンドのバックエンド（BFF）
BFFsは、ヘッドレスeコマースとマイクロサービスベースのアーキテクチャAPIを使用する際に中心的な役割を果たす。 PWAやネイティブのAndroidやiOSモバイルアプリなどの単一のクライアントが、各クライアントに最適化せずに共有APIをより効率的に使用できるようにするアプリケーションスタックの個別のレイヤーである。 API呼び出しを透過的に「傍受」し、渡された引数を変換して、特定のエンドポイントで認識されるようにする。
BFFは、フロントエンドのサーバサイドレンダリングやAMP変換を行うのに最適な場所である。 BFFは、Shopifyストアに他の多くの利点ももたらす。
BFFと速度
フロントエンドは、複数のサービスへの呼び出しをオーケストレーションしたり、ページデザインに最適な応答データを再フォーマットしたりする必要があり、このコードはどこかで実行する必要がある。 BFFは、このコードをフロントエンドバンドルから遠ざけ、小さく高速に保つことができる。 ほとんどの場合、レスポンスはキャッシュ可能であるため、リクエストごとにすべてのユーザーのデバイスでこのSHIMコードを実行するのではなく、クラウド上で実行されるため、キャッシュミスが発生した場合にのみ、需要に応じて拡張できる。
モバイルクライアントの場合、HTTP要求が多すぎると時間がかかり、呼び出しごとに不要なミリ秒が追加される。 リクエストの数を最小限に抑えるため、フロントエンドは一般に単一のAPIを介して関連データを取得する傾向がある。 これは、各クライアントのニーズを満たすために、バックエンドがUI関連のロジック処理を担当することがあることを意味する。 これは非効率的なアプローチである。
フロントエンド用のバックエンドが実装されている場合、フロントエンド（モバイル、ウェブ）はBFFを通じてバックエンドのマイクロサービスにのみアクセスし、各クライアントは別々のBFFサービスを受ける。 BFFでは、マイクロサービス間の相互呼び出しが少なくなる。 これは、UIロジックの一部がBFFレベルで処理されるためである。
BFFと開発速度
BFFは、異なる開発チームが独立して作業できるようにすることで、開発者の速度を向上させる。 開発者はコアAPIを変更することなく、新しい機能を追加できる。 これは、APIがShopify Plusによって提供され、変更できない場合に特に便利である。
ベンダーロックインを最小限に抑える
切り替える必要がある場合Shopify別のeコマースプラットフォームのために、フロントエンドのバックエンドは労力とコストを削減する。 これはヘッドレスアーキテクチャの柔軟性という形で大きな利点を提供する。
BFFベースのフロントエンドとバックエンドのデカップリング
エッジコンピューティングを使用した予測プリフェッチとCDN
Predictive Prefetchingは、訪問者がクリックする前に訪問する可能性が最も高いページをプレキャッシュしてレンダリングするために使用される高度な機能である。 エッジコンピューティング機能を備えた最新のCDNにより、動的データをエッジにストリーミングし、ユーザーが要求する前にユーザーのブラウザにストリーミングできる。 これらのテクノロジーを組み合わせることで、Shopify Plusストアは、買い物客がどこをタップしても、買い物客より5秒早く滞在できる。
動的データをエッジにプリフェッチしてストリーミングすることで、Shopifyストアを閲覧している消費者が待っているものをキャッシュして即座に提供できる–在庫のあるさまざまな商品、価格、情報に変換するJSONデータ。 しかし、これを行うには、アプリを理解する洗練されたCDNが必要である。
Layer0 CDN-as-JavaScriptは、キャッシュヒット率を前例のないレベルに最適化し、インテリジェンスをエッジにもたらす。 これは、企業経営者がURLの無限のリストを表示するのではなく、類似したページ（例えば、PDP、PLP、Cart）をそのように分類することによって、最適化のための傾向と機会を解読するのに役立つ。 これは行動を取り、ウェブサイトの読み込み時間の違いを見ることを可能にする。
Layer0 CDN-as-JavaScriptはエッジでの動的コンテンツのキャッシュヒット率が95%以上であるのに対し、平均的なeコマースWebサイトのキャッシュヒット率は15%である。 この違いは、予測的プリフェッチとともに、大規模なeコマースウェブサイトは、どこをタップしても、買い物客より5秒先を行くことができる。
ヘッドレスになるのはどれほど難しいかShopify Plus ?
ストアを運営するeコマースプラットフォームを選択するには、ヘッドレスWebサイトに対するプラットフォームのサポートと、1秒未満のサイトを可能にするテクノロジーを考慮する必要がある。 多くのeコマースプラットフォームは、最初からモノリシックである(つまり、フロントエンドとバックエンドを組み合わせる)。
ヘッドレスアーキテクチャを明示的にサポートしていないが、Shopify Plusは小売業者がヘッドレスストアを実行し、異なるフロントエンドフレームワーク(React Storefrontなど)または多くのヘッドレスShopifyビルドで使用されているヘッドレスCMSのようなContentfulを使用できるようにする。
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を実行している。 これを可能にするために、ストアはストアフロントAPIとPWAフロントエンドの間でマイクロサービスを実行できるバックエンド・フォー・フロントエンド(BFF)を必要とするかもしれない。 これはAPIを最適化し、クライアントごとに別々のAPIを作成することを避ける（そしてクライアント側のロジックの量を最小限に抑える）ための方法である。
- AMPなしShopify Plusは、独自のAccelerated Mobile Pages(AMP)ソリューションを提供していない(AMPの実装はShopifyアプリマーケットプレイスの有料アプリで可能)。
- 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ミリ秒に移行
プラネット・ブルーは、オーガニックアパレルの単店御用達から、国際的なデザイナーおよびオムニチャネルアパレル小売業者へと成長した。 彼らのインスタントShopify ç 上のストアは、彼らが優れたショッピング体験を提供することを可能にする。
tayer0で起動する前、プラネット・ブルーのモバイルページの読み込みには10秒かかっていた。 小売業者のモバイルトラフィックの70%以上がコンバージョン率に深刻な影響を与えた。 Planet Blueは、顧客の要求を満たし、競争力を維持するためには、モバイル体験の見直しが必要であることを理解していた。 Layer0上で起動すると、ナビゲーション時間が95%短縮され(デスクトップでは16秒→0.5秒、モバイルでは10秒→0.5秒)、ユーザーがウェブサイトを閲覧する際に摩擦のないオンラインカタログのような印象を与えた。
Planet BlueのLayer0による結果：
- Layer0上のインスタントサイトで、コンバージョン率が前年比31%上昇
- 16秒→0.5秒のトランジションにより、デスクトップで97%の速度を削減
- 10秒→0.5秒の遷移により、モバイルで95%の速度を削減
- デバイス間で平均して最初のページのロードを60%以上削減
- 瞬く間にページが読み込まれることで、顧客満足度の評価が20%以上向上
- React Storefrontで構築された超高速のeコマースPWA
- サーバーサイドレンダリングとAMPのサポート
- 予測プリフェッチ
- エッジでの動的コンテンツのキャッシュヒット率を最適化するCDN-as-JavaScriptにより、店舗は買い物客のクリック数を5秒先に予測できる。
概要
Macy’s、Walmart、Target、Nike、Airbnbなど、多くの小売業者にとって、ヘッドレスコマースアーキテクチャへの移行は最優先の取り組みである。 この傾向が注目されている理由は、eコマースプラットフォームのフロントエンドツールの制限から解放されること、ウェブサイトの速度とSEOを向上させる最善のウェブ技術の実装を可能にすること、そして将来のユースケースの簡単な実装を可能にすることである。
上で説明したいくつかの注意事項で、Shopify Plusヘッドレスストアを構築し、主要な速度中心のテクノロジーを実装するのに適している。 取り残される余裕はあるのか?
