Home Blogs 販売スピード:eCommerce、AMP、SSR、PWA、エッジコンピューティングを使用して5速ギアに移行
Applications

販売スピード:eCommerce、AMP、SSR、PWA、エッジコンピューティングを使用して5速ギアに移行

About The Author

Outline

eコマースの競争が激化する中、小売業者は目立つための新しい方法を探しており、競争の激しいフロンティアは着実にテクノロジーに向かっています。 マルチチャネルの登場により、カスタマージャーニーは非常に複雑になりましたが、確かなことは、スピードがこれまで以上に重要になるということです。 Googleが最近発表した Page Experienceのアップデートは、ユーザーがどのように操作したかに基づいてウェブページを判断するための新しいランキングアルゴリズムで、検索大手が認識速度を強調していることを示しています。 ページが読み込まれたとユーザーが認識する速度。

eコマースの新しいカスタマージャーニーは瞬時に実現します。 モバイルウェブサイトの読み込みに3秒以上かかると、訪問者の53%がモバイルウェブサイトを離脱します。 同時に、ロード時間の1秒ごとの遅延は、変換の7%の低下にリンクされています。 新しいテクノロジーにより、これまで不可能だったWebサイトの速度が向上しています。 最新のポータブルフロントエンド、サーバーサイドレンダリング(SSR )、アクセラレーテッドモバイルページ(AMP)、最新のCDNテクノロジーを組み合わせることで、1秒未満のページロードが可能になるだけでなく、eコマースにおける新たな競争の戦場となりつつあります。

目次

  • eコマースにおけるWebサイト速度の重要性
  • スピード=お金
  • AMPとは何か、その仕組み
  • 小売業の新興企業は数十億ドル規模の競合他社を上回る
  • SSRとは何ですか?また、どのように機能しますか?
  • 最新のCDNとエッジコンピューティングとは何ですか?
  • 概要

eコマースにおけるWebサイト速度の重要性

ウェブサイトの速度は、可視性(SEOとSEM)、トラフィック、ユーザーエクスペリエンス、最終的にはコンバージョンと収益に至るまで、デジタル戦略全体に影響を与えます。 これは、Googleがモバイルとスピードに重点を置くようになったことによるものです。

この検索大手は、ウェブサイトの速度が重要であることを明確にするために10年間にわたって取り組んできました。 同社は、検索結果とSEMで上位にランクインするために、モバイルウェブサイトの速度の重要性を確固たるものにするために、モバイルに焦点を当てた複数のアップデートを展開しています。

これらの取り組みには、2016年のモバイルファーストインデックス作成、2017年のモバイル広告付きAMP、2019年のスピードアップデート、2021年初頭に公開予定のページエクスペリエンスランキングアップデートが含まれ ます。 最後になりましたが、Google Badge of Shameはまもなく、悪名高いほど遅いWebサイトを公開し、フラグを立て、検索エンジン結果ページ(SERP)からサイトに移動するユーザーに警告します。

公平に言えば、アルゴリズムの変更を導入し、サイトの速度の役割を強調するためにウェブサイトを侮辱するだけでなく、Googleはより高速なウェブを実現するためのさまざまなツールも作成しています。 これには、PageSpeed Insights、AMP、Impact Calculator、Mobile Speed Scorecardなど、Webサイトの速度を促進および測定するためのさまざまなツールが含まれています。

ソース: 個人用サイトのテスト

GoogleのTest My Siteは、サイトの迅速な監査を行い、サイト速度の推奨事項を実施した場合に年間収益に与える潜在的な影響を見積もることができるツールです。

これらのツールを作成する努力は、検索の58%と同社の広告収入の65%がモバイルからのものであるため、Googleの関心を集めています。

1対1のデモをスケジュールする

Edgio(Layer0)XDNが1秒未満のページロードを実現する方法を学習するために、コンサルティング型の会話をスケジュールします。 ここをクリックしてください。

スピード=お金

ウェブサイトの速度が顧客体験と収益に影響を与えることはよく知られています。特にモバイルデバイスでは、消費者の70%がサイトの速度が購入意欲に影響を与えると述べています。 Amazonは、ページの読み込みが1秒遅れると、年間16億ドルの収益損失が発生すると計算して います。 より多くを販売するには、商品リストや商品説明ページなど、訪問者が到着した場所にコンテンツがすばやく簡単にロードされるようにする必要があります。 同様に、支払いプロセスは迅速かつ簡単でなければなりません。 これにより、リエンゲージメントの基盤が構築され、購入者は戻ってきてあなたからもっと購入する傾向があります。

しかし、現状では、スピーディなモバイル体験を提供することが難しくなっています。 サイズの大きな画像と乱雑なコードを含む最適化された肥大化したウェブサイトに加えて、 モバイルページは平均して214サーバーにリクエストを出し、そのうち100件は広告関連です。 その結果、モバイルデバイス(4G)での平均ページの読み込みには15.3秒かかります。 競争力の高い小売業者の中には、モバイルページの読み込み時間をわずか3 ~ 5秒に短縮できるものもありますが、まだ改善の余地があります。 そしてこれは5Gが解決できる問題ではありません。

広告、パーソナライゼーション、分析、トラッキングと、優れたユーザー体験の間には相容れない妥協点があります。

スピードの基盤

超高速のファーストページ読み込みを実現する最初の構成要素は、検索トラフィックにAMPを使用し、他のチャネルにSSRを使用することです。 2つ目のステップは、後続のページ読み込みが非常に高速になるようにすることです。 これは、プログレッシブウェブアプリ(PWA)などの速度のために構築されたポータブルフロントエンドで行われます。 最後の柱は、エッジコンピューティング機能を備えた最新のCDNで、ページロードから可能な限りミリ秒単位で圧縮します。

実際、Googleは理想的なカスタマージャーニーを推奨しています。これは、ウェブサイトが最初にユーザーを検索するためのAMPページを配信し、その後のページでサイトの完全なPWAバージョンに移行するというものです。 また、小売業者のウェブサイトのトラフィックのほぼ半分はオーガニック検索によるものであるため、AMPとPWAの両方をサポートすることは理にかなっています。

このトピックはGoogle I/O 2017で広く議論された

PWAを使用することで、開発者はネイティブアプリに匹敵する非常に魅力的で超高速な体験を提供できます。 ただし、検索で生成されるトラフィックについては、AMPは可能な限り最速のオプションで、ロード時間の中央値は 0.5秒です。

つまり、SERPをより高いレベルに上げるには、最初のロードを高速化するためのAMPとSSRと、超高速のブラウジングトランジションを実現するためのPWAの組み合わせが必要です。 問題は、企業のeコマースWebサイトがSSRサポートを追加する必要があるため、言うのは簡単ではなく実行するのが簡単であることです。これは単独では複雑なタスクです。また、PWA用の2つの別々のWebサイトを維持する必要があります(通常、React、Angular、Vue、Next またはNuxt)とAMP HTMLの他のもの。

AMPページは、CDN(Content Delivery Network)によってプリフェッチされ、レンダリングされ、キャッシュされるため、非常に高速です。 GoogleのAMPキャッシュはほとんどのAMPページを提供している。

したがって、Webサイトの速度の基礎は、次の3つの重要な要素で構成されています。

SSR+AMPで高速な初回ロードを実現

SERPから、ユーザーはAMPバージョンのページに誘導され 、最初のページを驚くほど高速にロードできます。 SSRは、電子メール、ソーシャル、紹介など、他のすべてのチャネルからの訪問者に対して同じことを行います。

超高速ブラウジングを実現するPWAポータブルフロントエンド

PWAは 、訪問者が後続のWebサイトページをナビゲートするときに即座に閲覧速度を提供するために引き継ぎます。 このようにして、消費者は、最初のページだけでなく、超高速の最初のページ読み込みと瞬時のページ遷移のエクスペリエンスを向上させることができます。

予測プリフェッチ+最新のCDN

予測プリフェッチ機能とエッジコンピューティング機能を備えた最新のCDNを使用すると、動的データをエッジにストリーミングし、そこからユーザーが要求する前にユーザーのブラウザーにストリーミングできます。 これにより、消費者が待っているもの、つまり在庫のあるさまざまな製品、価格、情報に変換するJSONデータをキャッシュして提供できます。 これは、eコマースWebサイトやその他のデータベース駆動型Webサイトが、消費者のタップよりも数秒先に5を維持できる方法です(たとえば、ユーザーがリンクをクリックする前にクリックする可能性が最も高い製品説明ページをプリフェッチします)。

Webサイトの速度の基盤を形成する3つの柱を理解したので、それぞれを深く掘り下げていきましょう。

AMPとは何か、その仕組み

Google AMPは、モバイルWebページを作成するためのオープンソースフレームワークで、読み込み時間の中央値は500msです。 AMPは、HTMLを簡素化し、CSSとJavaScriptに厳しい制限を適用することで、モバイルウェブ上でより良い、より高速な体験を提供します。 その後、これらのページはキャッシュされ、Googleサーバー上でプリレンダリングされます。これにより、これらのページは非常に迅速に配信されます。

AMPのメリット

AMPページは、GoogleのSERPからのトラフィックに対して500ミリ秒のページロードを可能にします。 これらの速度は、GoogleサーバーがAMPページリンクをクリックする前にユーザーのブラウザにAMPコンテンツをプリフェッチし、事前レンダリングしているため可能です。 平均的なeコマースサイトでは、Google検索(オーガニック検索と有料検索の両方)がトラフィックの約50%を占めているため、これらの利益はトラフィックの大部分に適用される可能性があります。

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

AMP+PWAがゲームを変える仕組み

AMPとProgressive Web Apps(PWA)の組み合わせは、検索からカスタマージャーニー全体をカバーし、エンドツーエンドの高速化を実現します。 買い物客はGoogle SERPからAMPページを読み込み、AMPページを閲覧している間に、PWAバージョンのサイトに必要なリソースをバックグラウンドで読み込みます。 このようにして、ユーザーがアクション(サイト上の任意の場所をクリックするなど)を実行すると、PWAはすでに後続のページのコンテンツをプリロードしています。そこから、残りのすべてのトランジションはクライアント側でレンダリングされたブラウジングトランジションであり、新しいナビゲーションではありません。

誰もがAMPを使用しないのはなぜですか?

AMPとPWAの組み合わせはスピードのために天国で作られたマッチですが、それは開発上悪夢です。 この技術を効果的にサポートするには、フロントエンドが書かれている言語(JavaScriptまたはCSSのどちらかが多い傾向があります)と、AMPプロジェクトの標準に準拠した2つのバージョンのサイトを作成する必要があります。 バグ修正、レイアウト変更、新機能などはすべて、AMPコードベースとPWAコードベースの両方に伝播する必要があるかもしれません。

React StorefrontフレームワークとLayer0は、開発者がReactアプリでAMPをサポートすることをはるかに簡単にします。

小売業の新興企業は数十億ドル規模の競合他社を上回る

Layer0 AMPテクノロジーを利用することで、ファッション小売業者のAkiraは検索からの瞬間的な最初のロードを提供するだけでなく、Amazon、Nordstrom、Zappos、その他の大手ブランドよりも上位に位置しています。

Layer0テクノロジーを使用する前は、Akiraの最初のページの読み込みは平均4.8秒で、その後のページの読み込みは2.5秒でした。

Akiraは、Edgio(Layer0)に組み込まれている高度なテクノロジーを活用することで、これらの結果を改善し、1秒未満のページ読み込みを実現しました。 サーバーサイドレンダリングとAMP変換を備えたeコマースPWA、エッジでの動的コンテンツに対する95%以上のキャッシュヒット率を提供するLayer0 CDN-as-JavaScript、5およびサーバーとAPIを最適化するフロントエンド用のLayer0のサーバーレスJavaScriptバックエンド。

Edgio(Layer0)を使用すると、ディーラーは次のような多くの分野で即座に向上しました。

  • 最初のロード時間が70.8%減少し、1秒近くになりました。
  • ブラウジングトランジションが驚異的な500ミリ秒に低下
  • Webサイトの半分のページが500ミリ秒未満でロードされるようになりました
  • モバイルコンバージョン率が37.25%増加

Lighthouseもこれらの改善を大きく反映しています。Akiraのパフォーマンススコアは36ポイント上昇し、Web上のサイトの75%を上回り、顧客のブラウジング体験が向上しました。

Akiraのケーススタディの全文を読む

アニー・セルケ は、ウェブサイトの速度に投資することで、小売業者が検索エンジンの結果ページを上昇させるのにどのように役立つかを示すもう1つの素晴らしい例です。

Edgio(Layer0)にアクセスする前は、家庭用品店のアニー・セルケはGoogleの検索結果よりも上位に表示されていませんでした。 現在では、オーガニックトラフィックが32%増加し、モバイルオーガニックトラフィックが40.41%増加しており、数十億ドル規模の競合他社を上回っています。

興味がある方は、アニー・セルクのケーススタディもあります

AkiraやAnnie Selkeのようなオンライン小売業者にとって、優れたパフォーマンスを発揮するモバイルWebサイトは、目立たない成果です。 Amazon、Nordstrom、Zapposなどのeコマース大手との絶え間ない競争に立ち向かうために必要なものになる可能性があります。

サイトが高速であるほど、瞬時にSEOが保証されているように、ランクが高くなります。 Edgio(Layer0)ポートフォリオには、それを証明する多くの例があります。 Akira、Annie Selke、 Shoe Carnivalは 、Amazonを含む多くのビッグネームを凌駕しているほんの一部です。

Layer0は、eコマースをスピードアップするための高度なテクノロジーの組み合わせを提供します。

  • サーバーサイドレンダリングのサポートとAMP変換を備えたeCommerce PWA
  • 予測プリフェッチ
  • CDN-as-JavaScriptエッジで動的コンテンツの95%以上のキャッシュヒット率を提供し、ウェブサイトの5を買い物客よりも数秒先に維持します。
  • Layer0 Serverless -フロントエンドのJavaScriptバックエンドは、サーバーとAPIを最適化します。

1対1のデモをスケジュールする

Edgio(Layer0)が1秒未満のページロードを実現する方法を学ぶために、コンサルティング型の会話をスケジュールします。 ここをクリックしてください。

サーバーサイドレンダリングとは何ですか?また、どのように機能しますか?

サーバーサイドレンダリング(SSR) は、通常はクライアント側のみのPWAページをサーバー上にレンダリングし、完全にレンダリングされたページをブラウザに送信するための一般的な手法です。 その後、クライアントのJavaScriptバンドルが引き継ぎ、PWAは通常どおり動作するようになります。 SSRは基本的にJavaScriptページをHTMLに変換します。HTMLは、検索クローラとブラウザの両方がサーバ上で理解できる言語です。 これにより、ブラウザや検索クローラが簡単にページを配信してインデックスを作成できるようになります。

SSRを使用する主な利点の1つは、すべての検索エンジンによって適切にクロールしてインデックスを付けることができるアプリです。 これは、SEOとソーシャルメディアチャネルにメタデータを提供するのに役立ちます。

SSRの利点

SSRは、最初のリクエストで完全にロードされたアプリがサーバーから送信されるため、パフォーマンスにも役立ちます。 しかし、単純ではないアプリの場合、SSRには少し複雑になり、より大きなサーバー負荷が発生する可能性のあるセットアップが必要なため、走行距離が異なる場合があります。 ありがたいことに、同型フロントエンドやSSRをサポートするLayer0のようなサービスやツールがあります。

最終的に、Webサイトにサーバーサイドレンダリングを使用するかどうかは、特定のニーズと、ユースケースにとって最も意味のあるトレードオフによって異なります。

最新のCDNとエッジコンピューティングとは何ですか?

エッジコンピューティング は、コンピューティングをデータソースに近づけること、およびプロセスにおけるレイテンシと帯域幅の使用を削減することに重点を置いたネットワーキング哲学です。 さまざまな技術を使用することで、これを実装できます。 計算をネットワークのエッジ(ユーザーのコンピューター、IoTデバイス、エッジサーバー)に近づけることで、クライアントとサーバー間で発生する長距離通信の量を最小限に抑えることができます。

エッジコンピューティング機能を備えたCDN コンテンツをユーザーに最も近いCDN Point of Presence(POP)にストリーミングすることで、Webサイトのサーバーからユーザーのブラウザまでの移動時間を短縮できます。 (サンフランシスコのユーザーがサウスサンフランシスコのPOPからコンテンツを配信し、ニューヨークのユーザーがブルックリンのPOPからコンテンツを配信するように)。

エッジコンピューティングによるCDNの利点

CDNは、ページの読み込みを高速化するために、Webサイトのキャッシュバージョンを複数の場所に保存します。 そのようなPoPには、その近くにある訪問者へのコンテンツ配信を担当するいくつかのキャッシングサーバーが含まれています。

Layer0の CDN-as-JavaScriptは 、この概念を別のレベルに引き上げます。 これは、アプリケーションを理解するアプリケーション認識CDNです。 フロントエンド開発者がすでに知っているのと同じ言語を使用しており、キャッシュを完全に制御できます。 その結果、Layer0を使用しているWebサイトでは、エッジでの動的コンテンツのキャッシュヒット率95%以上を確認できます。

Layer0 CDN-as-JavaScriptのエッジコンピューティング機能は、次のページを予測してプリフェッチし、要求される前にエッジにストリーミングすることで、買い物客の5を数秒先に進めます。これにより、リンクをタップする前にキャッシュされ、ユーザーがすぐに利用できるようになります。

概要

読み込み時間が長いと、ユーザーのエクスペリエンスやウェブサイトの検索ランキングが損なわれる可能性があります。 AMPはこの問題の一部を解決します。検索からの最初のページを驚くほど高速にします。 しかし、それは戦いの半分に過ぎません。 ウェブサイトを最新の状態にするには、高速モバイルページ(AMP)、最新のポータブルフロントエンド、サーバーサイドレンダリング(SSR)、エッジコンピューティング機能を備えたCDNなどのテクノロジーを組み合わせた、より包括的なアプローチが必要です。

Layer0は、複雑で動的なeコマースWebサイトを1秒未満の速度に到達させると同時に、開発速度と収益の増加を促進し、DevOpsコストを削減します。 また、他のCDNではわずか15%であったのに対し、動的コンテンツでは95%以上のキャッシュヒット率を提供するCDN-as-JavaScriptも含まれています。

Layer0は、動的な価格設定とリアルタイムの在庫検索は言うまでもなく、多数のタグとスクリプトを備えた大規模なeコマースWebサイトに対して、500ミリ秒未満の中央値のページロードを一貫して提供します。 このようなスピードの向上は、コンバージョン率の上昇率が15 ~ 30%、可視性が向上し、リーチが向上し、最終的には 収益の増加。

サイトスピードの専門家とのコンサルティング会話をスケジュールして 、インスタントeコマースWebサイトで競争上の優位性を獲得する方法を確認してください。