Home Blogs React、Angular、またはVueシングルページアプリケーションのパフォーマンスの最適化
Applications

React、Angular、またはVueシングルページアプリケーションのパフォーマンスの最適化

About The Author

Outline

この記事では、Vue、React、Angularのパフォーマンスを比較し、これらのフロントエンドフレームワークで実行されるeコマースSPAを最適化して最高のユーザーエクスペリエンスを実現するために何ができるかを見ていきます。

Angular、React、Vueのパフォーマンスの比較

サイトを高速に運営することで、SEOランキングの向上、訪問者の増加、セッションの延長、および結果として、収益の増加につながります。 収益の増加。 スピードの役割を理解している多くのeコマースリーダーは 、すでにヘッドレスコマースアーキテクチャに移行しており、プログレッシブウェブアプリやSPAなどの最新フロントエンドの採用を可能にしています。 軽量SPAフロントエンドは、現代のeコマースプラットフォームに固有のさまざまなパフォーマンス問題を解決する確実な方法であり、オペレーターが超高速のストアフロントを提供できるため、人気が高まっています。

まあ、それが理論です。 これらの高尚な主張を検証するために、社内で小規模なパフォーマンス分析を行いました。 この目的のために、主要なフロントエンドフレームワークで実行されているほぼ2,000の人気のあるeコマースWebサイトをテストし、Lighthouse 6スコアに基づいてパフォーマンスを評価しました。 調査結果は驚くべきものでした。テストされたSPAフロントエンドの平均Lighthouseスコアはわずか24で、19の中央値は(100点中)でした。 低そうに聞こえますが、これは、売上高で米国の大手500インターネット小売業者の平均スコアを26%上回ってい ます。

Vue.jsサイトは最も高速で、平均スコアは20で27でした。 Angularウェブサイトは平均23点だったが、パフォーマンススコアは分散しており、中央値はわずか18点であった。 Reactのウェブサイトは最も遅くテストされ、Lighthouseの平均スコアは22、中央値は18であった。 これは驚くべきことです。特に、フレームワークはPayPal、Grammarly、Vimeoなどのサイトを含む一部の大手プレーヤーによって使用されているためです。

テストの結論はかなり明確でした。SPAは従来のWebサイトよりも高速であると考えられていますが、まだ改善の余地があります。 さらに、Google cruxやその他の測定ツールは、シングルページアプリケーション(SPA)のページ遷移を追跡しません。 この問題については、ブログの別の投稿で詳しく説明します。

Lighthouseのスコアに対する起動時間と実行時のパフォーマンスの影響

アプリのパフォーマンスは、起動時間と実行時のパフォーマンスという2つの指標によって定義されます。 コードバンドルのサイズは主に前者に影響します。つまり、アプリコードとフレームワークコードの組み合わせです。 ランタイムのパフォーマンスは、フレームワークの特定の最適化機能と、DOMの操作と更新を処理する方法によって決まります。

バンドルサイズ

3つのフレームワークはすべて、同じサイズの最小限のコードバンドルを持っています。 フレームワークのバンドルサイズは起動時間に影響しますが、Angular、React、Vueのパフォーマンスを比較する際に、メトリックを主な焦点にするべきではありません。

より正確に言えば、AngularバンドルのサイズはVueとReactバンドルのサイズよりわずかに大きく、VueバンドルはReactバンドルよりも少し小さくなります。 また、Angular開発チームが(ソース)コードバンドルのサイズを着実に最適化していることも注目に値します。

おおよその数字は下の表を参照してください。

Angular、React、Vueはいずれも優れたランタイムパフォーマンスを提供し、トラフィックの多い複雑で収益を生み出すWebサイトのバックボーンとしても同様に適しています。

LighthouseのTTIおよびLCPメトリック

Lighthouseは、貴重なスピードインサイトを返す優れたテストツールです。 パフォーマンスの問題を特定し、サイトのさまざまな側面を最適化するのに役立ちます。 灯台のスコアは、複数のメトリックの加重平均に基づいて計算されます(詳細については、ここを参照してください)。 それでも、最大のContentful Paint(LCP)、Time to Interactive(TTI)、およびCumulative Layout Shift(CLS)は、ユーザーの観点から最も重要なものです。 TTIとLCPは、認識される負荷速度に直接接続されています。

TTIは、フレームワークのバンドルサイズがSPAの速度に与える影響をよく表しています。これは、ユーザーがアプリを操作する前にバンドルを完全に評価する必要があるためです。 TTIが長いサイトでは、ロード中にサイトのさまざまな部分が表示されますが、ユーザーがサイトを操作することはできず、最終的にフラストレーションを引き起こす可能性があります。

一方、LCPメトリクスは、ページのコンテンツの最大要素が画面に表示されるまでの時間を測定します。

Lighthouse vs. Cruxの実際のブラウジングデータ

合成速度測定ツール(Lighthouseなど)では、完全なストーリーが伝わらないことは注目に値します。 サイトの速度は、ユーザーがサイトを閲覧したときのサイトの「感じ」の方が重要です。 Lighthouseのパフォーマンススコアは良い基準点ですが、現実世界の経験と相関させるのはやや恣意的で難しいです。 たとえば、60のパフォーマンススコアが50点と比較して、ユーザーエクスペリエンスの点でどれだけ優れているかを翻訳するのは難しいです。

合成テストでは、古いデバイスや接続をシミュレートする傾向があります(たとえば、Lighthouseは3G接続をシミュレートします)が、実際には、ほとんどのモバイルユーザーは高速LTEまたは5Gネットワークを使用しています。

特定のフレームワーク上で実行されているサイトは、より速く感じるかもしれませんが、その生のパフォーマンススコアに関して他のサイトに負け、その逆も同様です。 これは主に、各フレームワークがユーザーにサイトを「感じる」速さを向上させるために採用する特定のトリック(遅延読み込みなど)によるものです。

次のセクションでは、これらのフレームワークのそれぞれがWebサイトのパフォーマンスを向上させるために提供する機会について説明します。

角度

AngularはHTMLコードを新しいタグと属性で拡張し、属性を解釈してデータバインディングを実行します。

その豊富な機能により、動作するアプリケーションはVueやReactと比較してはるかに大きく(約500KB)、パフォーマンスにわずかに影響を与える可能性があります。

AngularのMVC抽象化(ソース

Angularの主な利点を簡単にまとめました。

  • コード生成。 AngularはJavaScript仮想マシン用に高度に最適化されたコードを生成し、手書きのコードの利点を提供する。 HTMLテンプレートとJavaScriptを組み合わせることで、Reactなどの他のフレームワークでは不可能な最適化の扉を開くことができます。
  • コード分割。 Component Routerのおかげで、Angularアプリは迅速にロードされ、自動コード分割を提供します。 このようにして、ユーザーは要求したビューをレンダリングするために必要なコードをロードします。
  • 本物のドム Angularは実際のDOMを使用しているため、ほとんどのeコマースサイトのように頻繁に変更されるものではなく、コンテンツが時々更新されるだけのシングルページアプリケーションに最適です。 仮想DOMの操作は、画面上に何も描画されないため、はるかに高速です。

反応

ReactはFacebookによって開発され、最も人気のあるオープンソースのモバイルアプリケーションフレームワークの1つです。 幅広いライブラリを提供していないため、そのサイズはAngularのサイズよりも大幅に小さくなります。

単一方向のデータを使用すると、Reactはプロジェクトをより適切に制御できます。アプリケーションを設計するとき、React開発者は子コンポーネントを上位の親コンポーネント内にネストできます。

Reactには、次のような興味深い機能があります。

  • 仮想DOM: ノードは必要に応じて再描画されます。 Reactは新しいデータを元のDOMと比較し、ビューを自動的に更新します。 これにより、定期的なコンテンツ更新が必要なあらゆるサイズのアプリケーションのパフォーマンスが向上します。
  • 一方向のデータバインディング: Reactは、Fluxコントロールアプリケーションアーキテクチャを使用した一方向のデータバインディングを使用します。 ReactJSはユーザーのViewを更新するのに役立ち、Fluxはアプリケーションのワークフローを制御します。 Virtual DOMは、新しいデータを元のDOMと比較し、ビューを自動的に更新するという利点を追加します。
  • バンドルとツリーシェイクのサポート:エンドユーザーのリソース負荷を最小限に抑えます。
  • サーバーサイドレンダリング(SSR)のサポート: 特定の実装で高速化を実現します。

AngularやVueよりも大きな範囲で、Reactはエンドユーザーにページを「感じ」させる特定のテクニックを利用しています。 たとえば、フレームワークは、ページ上のコンテンツのレンダリングよりもユーザー入力を優先します。

VUE

VUEは高速で非常に小さく、わずか30 KB(gzip圧縮)であるため、最初のロードが高速になります。 これにより、3つのフレームワークの中で最小になり、Vueで実行されているWebサイトのパフォーマンスが大幅に向上します。

VUEには次の機能があります。

  • サーバーサイドレンダリング(SSR)
  • 木の揺れ
  • バンドル
  • 仮想DOM: プロジェクト内の変更はDOMに適切に影響しません。 実際のDOMの変更はリソースを大量に消費するタスクであるため、更新は最初に仮想DOMに適用されます。

この詳細なベンチマークレポートをチェックして 、主要なJavaScriptフレームワークとライブラリの起動時間、メモリ割り当て、特定の操作の時間を比較してください。 Reactと比較して、Vueはメモリ割り当てと起動時間の点でわずかに優れていますが、Reactは実行時に少し速いです。

AngularとVueは、JavaScriptと組み合わせたHTMLテンプレートを使用します。 これにより、Reactが提供していない最適化のための追加の余地が得られます。 たとえば、Vueは依存関係を追跡し、子コンポーネントの不要なレンダリングを防止します。

VUE vs. React vs. Angular SPAの最適化

ベンチマークやパフォーマンススコアでは、全体像が明らかになるわけではありません。 Webサイトの速度は、アプリケーションのサイズと最適化の取り組みによって異なる場合があります。 Vue、React、およびAngular SPAの速度を最適化するためのアイデアをいくつか紹介します。

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

全体として、SPAサイトでSSRを使用することには、次の4つの主な利点があります。

  • SSRを使用すると、SPAテンプレートをすばやくロードして、ユーザにコンテンツを表示できます(ただし、ユーザはすぐにはSPAテンプレートと対話できない場合があります)。 SSRがなければ、ユーザーは空の画面を見つめ、コンテンツがブラウザにロードされてレンダリングされるのを待っていました。
  • SSRにより、エンドユーザーのマシンの負荷が軽減されます。
  • GoogleはSPAコンテンツを適切にクロールできるようになったため、サーバーサイドレンダリングはSEOにとって以前ほど重要ではない可能性があります。 しかし、SSRを使用する利点は、他の多くの検索エンジンがまだJavaScriptを理解しておらず、JavaScriptの重いサイトを適切にクロールできないことです。
  • 多くの場合、ソーシャルネットワークでは、クライアントがレンダリングしたSPAサイトから共有されたコンテンツを適切に表示できません。 たとえば、Facebookスクレーパはサーバーによって設定されたメタタグのみに依存し、クライアント側でレンダリングされたメタタグでは動作しません。 Open Graphを使用して共有する場合のSPAサイトの外観をより適切に制御するには、SSRが必要です。
  • AMPはモバイルデバイスでの最初のロードを高速化しますが、JavaScriptを使用することはできません。 クライアント上でReactからAMPをレンダリングすることは不可能であり、サーバー上で実行する必要があります。 しかし、SSRが設定されていても、Reactアプリを有効なAMPアプリに変換するためにジャンプスルーするフープがたくさんあります。 幸いなことに、React Storefrontのような一部のフロントエンドフレームワーク は、すべてを処理できます。

SSRは静的サイトに最適ですが、eコマースSPAのWebサイトは適切なインフラストラクチャを使用してキャッシュ可能です。 Layer0では、コンテンツはフライサーバー側でレンダリングされ、CDN-as-JavaScriptでエッジでキャッシュされます。 このようにして、数百万ページではないにしても数千ページのeコマースSPA、パーソナライゼーション、リアルタイムインベントリなどの大規模なデータベース駆動型Webサイトは、ランディングからチェックアウトまでの1秒未満のページロードでユーザーを喜ばせることができます。

CDN-as-JavaScript サービスワーカー(レイヤー0ワーカーと呼ばれます)は、訪問者がリンクをタップする前にエッジから動的データをインテリジェントに取得し、訪問者がタップする可能性が最も高いものに基づいてブラウザにストリーミングします。

Layer0ネットワークおよび監視ツールは、動的データが少なくとも95%の時間キャッシュされることを保証し、プリフェッチによって作成される余分な要求からデータベースを保護します。 このようにして、1秒未満のページ読み込みを提供し、訪問者にランディングからチェックアウトまでのシームレスな体験を提供できます。

Layer0ネットワークおよび監視ツール

全体として、SSR機能と詳細なドキュメントに関しては、VueはReactよりも優れています。Reactは、サーバーサイドでページをレンダリングするためにサードパーティのライブラリ(例えばNext.js)を必要とします。

二A M P

AMPは、HTMLを簡素化し、CSSとJavaScriptに厳しい制限を適用することで、モバイルウェブ上でより良い、より高速な体験を提供します。 これらのページはキャッシュされ、Googleサーバー上でプリレンダリングされます。これにより、アプリへの移行がほぼ瞬時に行われます。

欠点は、PWA/SPAの作成方法とは異なり、React StorefrontなどのAMPサポートが組み込まれた専用のフレームワークを使用しない限り、アプリを完全に書き換えることを意味します

AMPページは、GoogleのSERPからのトラフィックのページロードの中央値が500msです。 これらの速度は、GoogleサーバーがAMPページリンクをクリックする前にユーザーのブラウザにAMPコンテンツをプリフェッチしてプレレンダリングするため可能です。 平均的なeコマースサイトは、Google検索(オーガニック検索と有料検索の両方)からトラフィックの大部分を取得しているため、これらの利益は大きな影響を与える可能性があります。

AMPを使用しているサイトでは、通常ページの読み込みを待っている間にバウンスする可能性のあるユーザーが超高速のエクスペリエンスを享受できるようになるため、直帰率も低下します。

3.コード分割

機能を追加し続けると、1ページのアプリケーションは時間の経過とともに拡大します。 しかし、すべてのアプリケーションには、ほとんど使用されず、不必要に遅くなる機能がいくつかあることがわかっています。 コード分割を実装して、アプリをできるだけ速く保つ必要があります。

コード分割では、アプリケーションのトップレベルコンポーネントごとに個別のバンドルを作成します。 eコマースSPAの場合、ホームページ、製品リスト、および製品説明ページ用の個別のバンドルがあります。 これにより、ユーザーが特定の製品へのリンクを介してアプリに到着した場合、ブラウザーは前のページのすべてのコードをダウンロードして実行する必要がなくなり、TTIとFIDの時間が短縮されます。

コード分割を使用すると、アプリはバックグラウンドで他のページコンポーネントを「遅延読み込み」し、ユーザーがそれらをナビゲートすることを決定した場合にそれらを使用できます。 これにより、帯域幅が節約され、最初の入力遅延またはFIDが減少します(FIDは多くの場合、インタラクティブまたはTTIメトリックまでの時間で近似されます)。これにより、ウェブサイトの速度と検索エンジンのランキングが向上します。

4.遅延ローディング

VUE、React、Angularはすべて遅延ロードをサポートしており、SSRと組み合わせることで大幅な速度向上を実現できます。

遅延ロードは、SSRを実装する際に課題となります。 サーバーは、どのコンポーネントが送信HTMLをレンダリングするために使用されたかを認識し、それらのコンポーネントのコードをHTMLとともに送信する必要があります。 そうしないと、アプリはブラウザーにマウントして2回のレンダリングサイクルを実行してからインタラクティブにする必要があります。これにより、FID (およびTTI)が増加し、コンテンツがフラッシュまたはジャンクになる可能性があります。

遅延ローディングとSSRが接続されています。 遅延読み込み用に選択したライブラリ(React Loadableなど )は、レスポンスに送り返される最終HTMLの生成方法に影響します。 サーバー上でレンダリングされたHTMLをハイドレートするためにロードする必要があるバンドルをキャプチャするには、loadable.captureを追加する必要があります <。></SSRコードにloadable.capture> を適用し、React LoadableのgetBundles関数を使用してどのスクリプトを使用するかを確認します。 <></script> タグをドキュメント本文に追加する必要があります。

遅延読み込みクライアントヒントは、まだすべてのブラウザーでグローバルにサポートされているわけではないため、遅延読み込みをシームレスに実装するための回避策がいくつかあります。

ソリューション1

画像をサーバーサイドでレンダリングする代わりに、アプリがマウントされるときにクライアントサイドで画像を読み込むことができます。

ソリューション#2

遅延読み込みは、「折り目の下」の画像にのみ使用してください。つまり、読み込み後すぐには表示されないことがわかっている画像のみに使用してください。 折り線は、ユーザーのデバイスとディスプレイサイズによって上下に移動する可能性があるため、これは困難です。 しかし、いくつかのヒューリスティックの助けを借りています。 たとえば、eコマースカテゴリページで、最初の商品画像セットの遅延読み込みをオフにすることができます(「折り目の上」にある可能性があります)。 また、常にフォールドの上にあることがわかっているアイテム(ヘッダー、会社のロゴ、カートのアイコンなど)については、遅延読み込みを有効にしないでください。

ソリューション#3

ユーザーエージェントを検出すると、SSRでレンダリングされたページの適切なバージョンを提供するのに役立ちます。 プログレッシブエンハンスメントの実装には一般的にユーザーエージェント検出は推奨されませんが、ブラウザーが追いついてクライアントヒントを実装する間の一時的な回避策としてこのトリックを実行します。

このソリューションでは、キャッシュキーを適切に正規化する必要があります。正規化しないと、キャッシュが大幅にフラグメント化される可能性があります。

5.最新のCDN

SPAの速度を最適化し、その上に優れたCDNを使用すると、サイトが向上しますが、1秒未満の速度を達成するには不十分です。 これは、ほとんどの従来のCDNが静的ファイルのキャッシュにのみ優れているためですが、全体的にはJSON/HTML/SSRデータにそれほどうまく対応していないためです。これはまさにeコマースSPAサイトが構成されているものです。 これらのサイトを高速化するには、複数のWebテクノロジーが同時に効率的に機能する必要があります。 他のCDNとは異なり、Layer0アプリケーション対応CDNはeCommerce SPAとうまく連携します。 キャッシュヒット率を前例のないレベルに最適化し、インテリジェンスをエッジにもたらします。 これにより、ビジネスオーナーはURLの無限のリストを表示するだけでなく、類似したページ(PDP、PLP、Cartなど)をカテゴリ化することで、傾向と最適化の機会を解読できます。 これにより、アクションを実行し、Webサイトの読み込み時間の違いを確認できます。

しかし、最も重要なのは、 CDN-as-JavaScriptが 高度な予測プリフェッチ技術を使用して、キャッシュされたデータをエッジからユーザーのブラウザーにストリーミングしてから、何かをタップすることです。 これにより、ウェブサイトの5は買い物客のタップ数を数秒先に抑え、即時のブラウジング体験でユーザーを喜ばせることができます。

6.可動工具

Angularはモバイルアプリの構築に最適です。 このフレームワークを使用して、任意のデバイスで動作するWebアプリケーションを構築したり、AngularとNativeScripを組み合わせることで、iOSおよびAndroidのネイティブアプリを開発したりできます。 これにより、データバインディング、依存性注入、サービス、ルーティングなどのAngularの概念を再利用できます。

React Nativeはクロスプラットフォーム開発の王道と考えられています。 これにより開発者はReactライクなコンポーネントを使用して、AndroidとiOSの間でJavaScriptコードの最大99%を再利用できるようになる。 これは、開発者が独自のスタイルを制御する100%ネイティブウィジェットを作成できることを意味します。 フレームワークはViewレイヤーを純粋な状態出力として処理するため、ネイティブの外観とパフォーマンスを備えたiOS / Android用のコンパニオンアプリを簡単に作成できます。

VueはReactに遅れをとっていますが、モバイル開発のためのいくつかの価値あるソリューションを提供しています。 例えば、NativeScriptを使用すると、Vueアプリケーションを記述し、ネイティブのiOS/Androidアプリケーションにコンパイルすることができます。

その後、Vue Nativeが登場する。 このフレームワークは、VueおよびRNエコシステム、宣言レンダリング、双方向バインディング、クロスプラットフォームネイティブアプリを作成するための基本コンポーネントのセットの利点を組み合わせています。

SPAは高速ですが、速度に問題があります。

シングルページアプリケーションの本来の魅力は、ナビゲーション中に後続のページが再読み込みされないことで、より高速でスムーズなブラウジング体験を実現できることです。 しかし、最新のSPAフロントエンドはサイト速度ソリューションの一部に過ぎず、いくつかの問題に対処する必要があります。

  • 合成速度のベンチマークやテストでは、必ずしも全体像を把握することはできません。 これらのフレームワークの速度は、アプリケーションのサイズと最適化の取り組みによって異なる場合があります。
  • プログレッシブWebアプリ、SPA、AMPなどのさまざまな最先端のフロントエンドテクノロジーは、顧客体験を劇的に向上させることができますが、Webサイトの速度はフルスタックの問題です。 ブラウザー、エッジ、サーバーにまたがっています。 このため、Webサイト、SPA、および複数ページのアプリケーションを高速化するには、フルスタックソリューションが必要です。
  • これらのテクノロジーはすべて速度を向上させることができますが、同時に適用すると最適に機能します。 これらすべてのテクノロジーを連携させることは、社内チームでは処理できない複雑な作業です(たとえば、Node.jsレイヤーを作成する必要があります)。

Layer0:Webをインスタントでシンプルに

Layer0は、eコマースWebサイトを迅速かつ簡単に開発するための完全なソリューションです。 高度な最適化技術を組み合わせて、eコマースSPAなどの大規模なデータベース駆動型Webサイトを高速化し、コードをワークフローの中心に置くことで開発者に週に1日の時間を与える強力なツールを提供します。 Layer0は基本的にJamstackを大規模なeコマースWebサイトにもたらします。

インスタント: 最新のフロントエンドと、エッジでの動的コンテンツのキャッシュヒット率95%のCDN-as-JavaScriptと、フロントエンドのNode.jsバックエンドを組み合わせることで、Layer0は複雑なWebサイトをスタック全体の速度に最適化するのに役立ちます。 これは、大規模なeコマースWebサイトのコンテンツペイント(LCP)時間の中央値を保証する唯一のプラットフォームです。

シンプル:Layer0(現Edgio) は、開発、導入、プレビュー、実験、監視、 フロントエンドを実行すると、次のことが可能になります。

  • 事前レンダリングとジャストインタイムレンダリングの両方を使用して、eコマースにJamstackを活用
  • 製品カタログAPIからデータをプリフェッチすることで、ゼロレイテンシネットワーキングを実現
  • アプリケーションでEdgeをネイティブに構成する(cDN-as-JavaScript)
  • エッジルールをローカルおよび本番前の環境で実行
  • 新しいブランチとプッシュごとに、GitHub、GitLab、またはBitbucketからプレビューURLを作成します。
  • パフォーマンスの高いA/Bテスト、カナリア展開、パーソナライゼーションのためにエッジでスプリットを実行
  • AWS Lambdaよりもはるかに簡単で信頼性の高いサーバーレスJavaScript

結論

より速い場所を動かすことはちょうど派手な仕掛けでない。 一日の終わりに、あなたはあなたのユーザーを驚かせようとしているだけでなく、世界最大の検索エンジンを喜ばせようとしています。 Googleのランキングは、ページの速度によって部分的に決定されるため、軽視することはできません。 高速サイトとは、SEOランキングとコンバージョンを向上させ、収益を増やすことを意味します。

各フレームワークのパフォーマンスについては多くのことが言えますが、次の3つの点を覚えておく必要があります。

  1. フレームワークのパフォーマンスにおける実際の違いは、ごくわずかである可能性があります。 SPAサイトのパフォーマンスは非常に多くの変数に依存しているため、これらのフレームワークを意味のある方法で並べて比較することは不可能です。
  2. Angular、Vue、Reactのいずれを使用していても、改善の余地はまだたくさんあります。

SPAを高速化するには、高度なWebテクノロジーを組み合わせて連携させる必要があります。また、社内チームでは、SPAを効率的に実装できない場合があります。 ありがたいことに、Layer0を含むいくつかの先進的なベンダーがあなたのために重い仕事をしてくれました。

Layer0は、サーバーサイドレンダリングと、エッジでの高度な予測プリフェッチおよびプリキャッシングを組み合わせます。 動的データは95%以上の時間でキャッシュされるため、プリフェッチによって作成される余分な要求からデータベースが保護されます。 Layer0 CDN-as-JavaScriptサービスワーカーは、訪問者がリンクをタップする前に動的ページをインテリジェントに取得します。 このようにして、1ページのアプリケーションで1秒未満のページロードを提供し、訪問者にランディングからチェックアウトまでのシームレスな体験を提供できます。