最適化を超えて—最速のMagento 2店舗の秘訣

出典:nngroup.com

より高速で摩擦のないeコマースストアは、1つのセッションでユーザーにより多くの製品を表示できる。 これによりコンバージョン率が向上する。 理想的なシナリオでは、店とそのインターフェイスは邪魔にならず、素晴らしいショッピング体験のための背景だけであるべきである。

さらに、ほとんどのeコマースストアと同様に、人々が非常に価格に敏感な市場で製品を提供している可能性が最も高い。 状況を悪化させるもの—競合他社が同じ製品を同じ価格で提供する可能性がある。 この場合、あなたのSEOランキングとウェブサイトの経験はあなた自身を差別化する少数の残りの方法の中にあるかもしれない。 そして、これら2つは多くの売り手が認識するよりも接続されている。

Googleは高速なWebサイトを好む

Google Page Experienceのアップデートをすぐに利用できるため、ウェブサイトの速度に細心の注意を払うことが重要である。 eコマースウェブサイトのスピード最適化は、2020年以降、多くの小売業者にとって最優先の取り組みの1つとして認識されている。 また、ページエクスペリエンスのアルゴリズム的な更新が開始されると、遅いサイトは検索ランキングやSERPの位置ですぐにずれてしまう。 今こそ行動を起こす時だ。

Googleの検索結果の最初のページはウェブトラフィックのほぼ95%を受け取り、残りのSERPページはわずか5%である。 GoogleはRankBrainアルゴリズムとそのさまざまなコンポーネントの重み付けについて常に非常に曖昧だったが、2021年の開始速度が検索ランキングで重要な役割を果たすことは確かである。 Googleが検索結果に影響を与える特定の信号で着物を開いたのは、歴史上初めての可能性が高い。

Magento 2ストアをスピードに合わせて最適化しないと、オーガニックトラフィックや潜在的な顧客を失うリスクにさらされる。 2020年に行動を起こさない多くの店舗(大手ブランドでさえ)は、検索トラフィックが減少し、大きな収益損失を被る可能性がある。 より流動的、より良く、より速い経験を提供するウェブサイトは最も求められた後の有機的なキーワードを支配し始める。

製品だけでなく、優れた体験を提供

他の多くのeコマースプラットフォームと同様に、Magento 2は元々バックエンドとデータファーストのアプローチで構築されており、実際のエンドカスタマーエクスペリエンスとウェブサイトの速度にはほとんど焦点を当てていない。 人ではなくSKUに焦点を当てている。 これにより、プラットフォームの顧客、システムインテグレータ、設計者、開発者にウェブサイトの速度最適化の負担がかかる。

店舗がMagento 2や他の人気のeコマースプラットフォームやバックエンドシステムで動作しているかどうかにかかわらず、最速のエクスペリエンスを提供したい場合は、高度なスピード重視のウェブテクノロジーを実装する必要があり、そのためにはまずヘッドレスでポータブルフロントエンドを構築する必要がある。

ヘッドレスeコマースとは何か、そしてインスタントページロードが不可欠である理由については、このウェビナーを見る。

最速のMagentoウェブサイトの背後にある主要な戦術のために読む。

Speedy Magento 2ストアを支えるテクノロジー

オンラインショッピングは本質的に非常に視覚的な経験であるため、サイトの速度はeコマースにとって特に重要である。 店舗は通常、画像が多いウェブサイトであり、買い物客が最後に見たいのは、読み込みが遅い製品ページ、粒状の写真、ジャンクである。

Magento 2ストアを高速化するために最適化するときは、軽量テーマの使用、画像の最適化、レンダリングをブロックするJavaScriptコードの削除など、さまざまな戦術を実装してより高速にすることができる。 あなたのウェブサイトを最適化する全チームを持つことができるが問題はこれらすべての標準的な速度の最適化技術がタップの後に通常起こる事を微調整することを含むである。 あなたのウェブサイトを実際に速くすることは顧客が何かでかちりと鳴る前にフードの下で動く技術の組合せを要求する。 タップに反応することから、それを予測することに移行する必要がある(それについては後で詳しく説明する)。

スピード指向のウェブ技術の多くはバックエンドをフロントエンドから分離する必要があり、つまりフロントエンドをポータブルにしたり、ヘッドレスコマースアーキテクチャに加入したりする必要がある。 ヘッドレスにすることで、フロントエンドとバックエンドに最適なソリューションを互いに独立して使用しやすくなり、選択したバックエンドで最速のWebサイトを配信できるようになる。

Magento 2 eコマースWebサイトでヘッドレスになったら、プログレッシブWebアプリ(PWA)のようなスピードのために構築されたポータブルフロントエンドを使用できる。 PWAフロントエンドを使用してヘッドレスMagento 2ストアを実行するには、確かなAPIカバレッジと優れたドキュメントが必要である。

ヘッドレス行くことはまたあなたのウェブサイトをblazingly速くする付加的な最先端技術を、次のように実装し始めることを可能にする:

• ポータブルフロントエンドにより、すばやくブラウジングを実行
• サーバーサイドレンダリング(SSR)とAMPのサポートにより、超高速の初回ロードを実現。
• 予測プリフェッチ
• エッジコンピューティングを備えた最先端のCDNにより、エッジでの動的コンテンツのキャッシュヒット率を最適化し、買い物客の5秒先を行く

Magento 2がこれらの技術を実装し、1秒未満のeコマースWebサイトをサポートするためにどの程度適しているかを調査しよう。

1. Magento 2 API

ヘッドレスストアはAPIを介してフロントエンドとバックエンドのeコマースプラットフォームを接続する。 ヘッドレスになる前に、eコマースプラットフォームがAPIカバレッジが優れているかどうか、サードパーティのストアフロントに簡単に接続できるかどうかを確認する価値がある。

MagentoはAPIをカバーしている: SOAPとRESTエンドポイントはすべてのバージョンで利用可能で、Magento 2アップデートでネイティブGraphQLサポートが追加された。 PWAとヘッドレスエンドポイントはGraphQL APIを介して作成することができるが、プラットフォームのコードやデータベーススキーマをカスタマイズすると、API互換性が損なわれる可能性がある。

• Magento 1 API形式：REST、SOAP
• Magento 2 APIフォーマット: REST、SOAP、およびより最新のGraphQL

Magento 2は、フロントエンド開発のためのRESTやSOAPウェブAPIの代替としてGraphQLを使用してヘッドレスウェブサイトやPWAをサポートするAPIを比較的簡単に作成できるようにした。

2.Magento 2用のPWAフロントエンドの構築

現代のPWAポータブルフロントエンドは、多くの点でネイティブアプリのようであり、そのスピードの利点は、ウェブサイトを探索する方が速く、オンラインで買い物をするときに多くのことをすることで明らかである。

Magento 2のPWAは、ネイティブのような感覚で速く感じる。 しかし、PWAの文脈で速度が言及されている場合、速度よりもレイアウトの安定性に関するものである。 ページからページへ行くと、これらのページは従来のウェブサイトのように「跳ね返る」ことはない。 そして、ユーザーは通常、この「跳ね返る」ことをページの読み込みが遅いと認識する。

これは何度も見たことがあるでしょう。ウェブサイトに入って広告やバナーが数秒後に読み込まれ、すべてがシフトしてテーマ全体が上下に移動する。 これにより、意図しないクリック、気が散り、買い物客のフラストレーションが発生する。

PWAフロントエンドはこの問題を解決する。 Magento PWA Studioは、開発者がMagento 2上で複雑なプログレッシブウェブアプリを構築できるようにするツールのコレクションである。 残念ながら、PWA StudioはMagento 2.3以降でしか利用できない。

要約するために、ここにあなたのMagento 2の店の上に座るPWAの前部を造ることの賛否両論がある。

サポートされているPWAにおけるMagento 2の利点：

• MagentoはPWAをサポートしている。 Magento 2には、BaseとLumaのレスポンシブテーマが付属しており、箱から出して。 Magento 2.3ではPWA Studioと呼ばれるツールキットが提供されており、基本テーマはVeniaである。
• レイアウトの安定性が向上。 PWAフロントエンドではMagento 2ページはより滑らかにレンダリングされる、すなわち、画像が重いページでもロードされるときに画像が「跳ね返る」ことはない。
• スピード。 PWAが正しく構築されていれば、ウェブサイトをより速くする。

最後の2つの利点はサーバーサイドレンダリングに依存していることに注意してほしい。これは可能であるが、PWA Studioフロントエンドで常に利用できるわけではない。 それについては後で。

Magento 2でPWAフロントエンドを提供する際の課題：

• Magentoがネイティブに提供するPWAは、それほど高速ではない。 超高速になるには適切なインフラが必要だ 時にはPWAはそれをサポートする適切な技術なしであなたのウェブサイトを遅くすることができる(サーバーサイドレンダリングやエッジコンピューティングを備えたCDNなど)。 多くの大きな店はその間違いを犯す。 それは少し直観的でないように聞こえるが、それは本当である-あなたは速度を上げるためにPWAに入るが、あなたのウェブサイトを遅くすることになるかもしれない。 私たちの分析によると、PWAを提供する米国の上位500のeコマースウェブサイトは、PWA以外のウェブサイトよりもロード速度が速くなく、平均約4秒である。
• SSRとAMPを使用しないと、最初のクリック音がまだ遅い。 Magento PWA StudioはSSRやAMPを最初からサポートしていないため、最初のページの読み込みはそれほど良くない。 また、PWAにアクセスすると「アプリ」全体をダウンロードするため、最初のロードはそれほど速くはない。 PWAの次ページのロードは、従来の複数ページのウェブサイトよりも著しく高速である。
• MagentoのPWA Studioは他のオープンソースフロントエンドオプションと似ているが、PWA Studioはこのプラットフォームに特化して設計されている。 これは、あなたがMagentoエコシステムに閉じ込められたままであることを意味し、ヘッドレスコマースの価値の一部を鈍らせる。
• ネイティブのPWA Studioを使用してMagentoでPWAをビルドするには、従来のMagento開発とは異なるスキルセットとツールチェーンが必要となる。
• Magento PWA StudioはMagento 2.3以降でのみ利用可能である。 Magentoの大部分の店舗はまだMagento 2.3にアップグレードしていない。

全体として、オープンソースで移植性の高いPWAフレームワーク(すなわち、プラットフォームにネイティブに組み込まれていないが、自然なAPI接続を提供するもの)を選択する方が、ベンダーがPWA Studioで提供しているフレームワークよりも良い選択肢である。

Magento 2用のサードパーティ製フロントエンドフレームワーク

オープンソースとベンダーが提供するフロントエンドのオプションは無料であるが、ベンダーが提供するフロントエンドは移植性がない。 もちろん、ある程度の努力で別のプラットフォームに持ち込むこともできるかもしれないが、それは確かにそれを可能にするように設計されていなかった。 ベンダーが提供するフロントエンドは、PWA Studioを使用して構築されたものと同様に、PWAの回答を得るためにeコマースプラットフォームによって構築されている。プラットフォームを再構築する際にそれを持ち運ぶことを意図しているからではない。

Magento 2ストアで動作するPWAフロントエンドを探すときは、理想的には同型フレームワーク、つまり同じページを2つのバージョンでレンダリングするフレームワークを探している。 2回書く必要はなく、1回書く。 最初のページはサーバー側でレンダリングされ、ナビゲーションはクライアント側でレンダリングされる。

Magento 2ストアでは、ヘッドレスになった後に使用できる、同型のヘッドレスフレームワークがいくつかある。

• Next.js–Vercelによって作成されたPWAのための素晴らしいReactフレームワーク
• Nuxt.js–Next.jsと同じだがVueに基づいている。
• React Storefront–Next.jsをベースにしているが、Magento、Shopify、SAP (Hybris )などの特定のプラットフォームへのより多くのストアフロント機能、ウィジェット、コネクタが付属している。 Layer0は、オープンソースのPWAフレームワークReact Storefrontの主要な貢献者である。
• Angular–サーバーサイドレンダリングでポータブルなPWAフロントエンドの作成を可能にする。

これら4つのフレームワークはクライアント側とサーバ側の両方のレンダリングを提供する。 つまり、最初のロードでは速度のトレードオフはなく、ストア内の最初のロードとその後のロードの両方が高速になる。 また、Googleはレンダリング時間が短いページを愛しているため、ストアのような重いアプリがSSRなしで適切に配置する機会が少なくなる。

複雑なeコマースサイトはしばしばJavaScriptを多用し、Googleがクロールして意味を理解するためにより多くの努力を必要とする。 彼らはそれが問題ではないと言うだろうが、Googleはクライアント側のレンダリングを好まない。 コンテンツが正しく表示されていない場合、バグや問題が発生する可能性がある。 理想的には、箱から出してサーバーサイドレンダリングを行うPWAフレームワークを探すべきだが、MagentoのPWA Studioはそうではない。

結論: Magento 2.3のPWA Studioで得られるネイティブPWAエクスペリエンスは、大幅な速度向上を提供しない。 しかし、Layer0でMagento PWA Studioを起動すると、より高速なWebサイトが得られる。

より高速なMagento 2の構築

PWAのようなヘッドレスでポータブルなフロントエンドには多くの速度上の利点がある。 よいPWAは遅いから速いに連れて行くが、すぐに得ない。 そのためには、次のような最先端技術を正しく組み合わせる必要がある。

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

Magento 2.3は、サーバサイドレンダリングを実装するための限られたツールを提供している。 Magento PWA Studioの上位仕様の一部として、口ひげテンプレートを介して実装されている。 真のSSRは（口ひげテンプレートだけでなく）サーバー上で完全なクライアントサイドコードを実行する。 結果として、SSRを上位にすることは特定の領域（app shellのような）に限定されるか、開発者はSSRをサポートする必要があるページや領域ごとに、クライアント側のReactコードとサーバー側の口ひげテンプレートの両方にコードを複製する必要がある。

Google AMPは、HTMLを単純化し、CSSとJavaScriptに厳しい制限を課すことにより、超高速なモバイルウェブページを作成するためのオープンソースのフレームワークである。 検索から500ミリ秒以内に平均AMPページがロードされる。 これらのページはGoogleサーバーにキャッシュされ、事前にレンダリングされており、これが迅速に配信される方法である。

Magento 2ストアでSSRとAMPを実装する際の課題：

• MagentoはAMPをサポートしていない。 AMPをサポートするには、サードパーティの拡張機能や既存のテーマを再構築して独自にこれらの機能を追加する必要がある。 これは、モバイルで最初のページのロードを最適化する能力を大幅に妨げる。
• Magento 2では、真のSSRを上位でサポートするには、Node.jsサーバーのフリートを実行し、維持する必要がある。

2.最新のCDN

コンテンツ・デリバリー・ネットワーク（CDN）はメディアファイルを保存できる。 CDNは、ウェブサイトのコンテンツ(画像、ビデオ、コード—JavaScript、CSS—およびウェブサイトの他の部分)の読み込みを高速化するために作られた。 誰かがあなたのウェブサイトにアクセスすると、CDNはコンテンツへの道を短縮するので、全国のサーバーからアクセスする必要はない。 CDNはすべての主要都市にそれを置くので、そのコンテンツにアクセスする時間ははるかに短い。 CDNを持っているが、知らない人もいる。

従来のCDNは、画像やテキスト、および頻繁に変更されない他の要素を保存するための静的なウェブサイトを意図している。 しかし、ダイナミックな価格設定とリアルタイムの在庫検索を備えた現代の店舗には、それ以上のものが必要だ。

モバイルネットワークがより速くなり、これらすべての4Gと5Gの速度がある場合でも、モバイルWebサイトは同じ速度を維持し、通常はページのロードあたり約3~5秒である。 現在、ほとんどすべての主要なeコマースサイトがCDNを使用しているにもかかわらず、これは改善されていない。

CDNとMagento 2を統合する際の課題

• オンプレミス版のMagentoにはCDN統合が付属していないが、選択したCDNを使用することはできる。
• Magento Commerce (Cloud)にはキャッシュモジュールが組み込まれているが、真のCDNではない。 実際のCDNが持つような分散されたPoints of Presence（PoP）を欠いている。

Layer0 CDN-as-JavaScriptは、CDNを置き換えることも、CDNと一緒に作業することもできる。 100近いポップスがある。 Layer0上のウェブサイトでは、エッジでの動的コンテンツの平均キャッシュヒット率は95%以上である。

コンサルティング会話をスケジュールして、Layer0がMagento 2で1秒未満のページロードを実現する方法を学習する。

私たちはここにいる

Layer0は、開発や展開から簡単なロールバックまで、迅速でヘッドレスなMagentoストアを非常にシンプルにする。 それは現代のヘッドレスフロントエンドにも可能である: Next、Nuxt、React、SAP/Spartacus、React Storefront、Vue Storefront—私たちはそれらすべてをサポートしている。

速度と変換リフト。 コンバージョン率の上昇とオーガニックトラフィックの上昇を組み合わせると、eコマースサイトの相乗効果が生まれ、直接収益につながる。 より速い店を動かすことによって、SERPでより高くなるだけでない。 より競争の激しい市場では、それはあなたの競争相手があなたのウェブサイトへの交通を失っていることを意味する。 Layer0上のウェブサイトでは、コンバージョン率と検索トラフィックが平均15-30%向上する。

シンプルさ。 Layer0では、Webを瞬時にシンプルにすることが目標だ。ただし、単純な作業ではないヘッドレストレンドをサポートしている。 Layer0上のウェブサイトでは、サーバーレスJavaScriptプラットフォームを使用してコードをワークフローの中心に配置するだけで、開発者の速度とエンタープライズの俊敏性が20%向上する。

コラボレーション。 新しいコードを書くたびに、プリプロダクション環境が自動的に生成される。 QA担当者やビジネス関係者は、コードがマージされる前にテストしてフィードバックを提供できる。

12週間でMagento 1からMagento 2にアップグレードして、1秒未満のWebサイトを入手。

真のA/Bテスト。 A/Bテストはあなたのウェブサイトを遅くする。 速度のために最適化されたウェブサイトを持っていることのポイントがないし、A/Bテストはあなたの努力を台無しにする。 Layer0(Edgio)を使用すると、あなたのウェブサイトで実験することができるが、まだそれを瞬時に持っている。 たとえば、ユーザーの5%に対してカナリアデプロイを行うことができる。 Layer0では、アプリケーションを記述するようにルートルールを記述し、トラフィック分割を完全に制御できる。

Layer0には、パフォーマンスモニタリングとすべてを追跡するダッシュボードも付属している。

無制限のスケール。 ブラックフライデーでも、Layer0あなたの店へのトラフィックの増加を吸収するために自動的にスケールする。 毎月Layer0上のウェブサイトを訪問している米国の買い物客の3分の1で、あなたはあなたが良い手にあることを知っている。

セキュリティ。 Layer0はエンタープライズ対応で、WAF、DDoS、ボット緩和をすぐにサポートしたPCI Level 1 DSS認定。

成功したストアの仕組み：AkiraのインスタントMagento 2ストア（Layer0）

インスタントeコマースウェブサイトはあなたの収益に大きな影響を与えることができる。 私たちはこれをお客様と何度も見てきた。 例えば、ギフトとフラワーの巨人である1-800-Flowersは、サブセカンドサイトからのコンバージョン数が50%上昇した。 ヴィーナス・ファッションもその一例で、ファッション小売業者はウェブサイトの15.25%の読み込みが1秒未満からLayer0で72.75%になり、コンバージョン率が24%上昇した。

ファッション小売業者のAKIRAは、Layer0上の1秒未満のウェブサイトでコンバージョン率を37.25%引き上げた。 アキラは、次のような高度なテクノロジーを瞬時に組み合わせた

• React Storefrontで構築された超高速のeコマースPWA
• サーバーサイドレンダリングとAMPのサポート
• 予測プリフェッチ
• エッジコンピューティング機能を備えたCDN-as-JavaScript

最初の2つは、ランディングからチェックアウトまで超高速のページ速度を保証する。 最後の2つは、次の動きを予測し、キャッシュされたエッジからJSONデータをプリフェッチしてブラウザにストリーミングすることで、ウェブサイトが買い物客より5秒早くとどまることを保証する。 このようにして、ユーザーはサイト全体がすでに自分の携帯電話にあり、もはや「ページロード」の概念がないように感じる。

フリクションレスAMPサポートにより、検索トラフィックの高速化とSEOの向上を実現

Akiraは、Amazon、Nordstrom、Zapposなど数十億ドル規模の競合他社よりもキーフレーズで優位に立っている。 どうやって? ファッション小売業者はReact StorefrontのAMP変換技術を利用して、検索から即座に最初のロードを提供する。

小売業者のウェブサイトのすべてのページは、自動的に生成されたAMPバージョンを取得する。 これにより、検索エンジンの最適化に専念するはるかに大きなチームと予算を持つeコマース大手を凌駕するために必要な競争上の優位性が小売業者にもたらされる。

SSRにより非検索トラフィックを高速化

Akiraは、Layer0に組み込まれているサーバーサイドレンダリング機能を使用して、非検索チャネルに即座に最初のロードを提供する。 表示、ソーシャル、Eメール、紹介、その他の非検索トラフィックの平均値は、秒のすぐ北にあり、後続のページは500ミリ秒でロードされる。 これはページロードあたり平均3-5秒の市場ではかなり競争上の優位性である。