Cloudflare最適構成でLCP、TBT、Web Vitalsを向上させるためのショップの成功法

ウェブパフォーマンスは、顧客にシームレスなショッピング体験を提供するための重要な要素です。本記事では、Cloudflareを使用してLargest Contentful Paint [LCP]やTotal Blocking Time [TBT]などのWeb Vitalsで高得点を得るための方法を紹介します。これらの構成は、簡単な修正から高度な最適化まで幅広く含まれています。
始める前に、Google PageSpeed Insightsのようなツールを使用して、ウェブサイトの現在のパフォーマンスを評価する時間を取ってください。これにより、これらの設定を適用した後の改善を追跡することができます。
なぜWeb Vitalsが重要なのか
Web Vitalsは、ユーザー体験の重要な側面を測定します。以下は、我々が重点的に取り組む最も重要な指標の概要です。

指標	測定内容	重要性
LCP	最大の表示可能な要素の読み込みにかかる時間	ユーザーがサイトの速度をどのように認知するかに影響
TBT	長いJavaScriptタスクによるブロック時間	対話性と応答性に影響
CLS	ページ読み込み中のレイアウトシフト	視覚的安定性と使い勝手を確保

Cloudflareの設定を最適化することで、これらのスコアを大幅に向上させることができ、訪問者にとってより迅速で魅力的な体験を提供します。

ステップ1: Cloudflareにドメインを設定し、CDNを有効にする

Cloudflareを使用してウェブサイトのパフォーマンスを最適化するためには、まずドメインがそのプラットフォーム上で正しく設定され、CDN（コンテンツ配信ネットワーク）機能が有効であることを確認する必要があります。

Cloudflare CDNを有効にする方法

1. Cloudflareアカウントにログインし、ドメインを選択します。
2. DNSセクションに移動します。
3. DNSレコードの下で、ドメインのAまたはCNAMEレコードを見つけます。
4. レコードの隣にあるオレンジ色の雲のアイコンをクリックしてProxy Cloud機能を有効にします。有効にすると、アイコンは明るいオレンジ色になり、ドメインがCloudflareのCDNを通じてルーティングされていることを示します。

Selldoneユーザーへの特別な注意

もしSelldoneを使用している場合、CloudflareのCDNと統合するためにドメインを正しく設定する必要があります。これにより、Selldoneの外部CDNがサイトとシームレスに連携し、キャッシュされたコンテンツを効率的に配信し、Selldoneのプラットフォームとの互換性を維持します。
Selldone用の設定手順:

1. Selldoneのダッシュボードでカスタムドメインを設定します。
2. 外部CDNがCloudflareを指し示すようにDNSレコードを正しく設定します。
3. Cloudflareの設定が完全に有効になっていることを確認します。Proxy Cloudの状態を含むこれらの手順により、Selldoneを使用したウェブサイトがCloudflareのパフォーマンス向上機能を最大限に活用できるようになります。

ステップ2: Cloudflareのスピードテスト機能

Cloudflareは、ウェブサイトのパフォーマンスに関する貴重な洞察を提供するスピードテストツールを提供しています。この機能は、Cloudflareのサービスを実装した後の読み込み時間、応答性、および全体的な速度の改善などの主要指標を測定します。

ステップ3: Cloudflareでリアルタイムのユーザーインサイトを有効にする

ユーザーの行動をリアルタイムで理解することは、ウェブサイトでの体験を最適化するために重要です。Cloudflareのリアルタイムユーザーインサイト（RUN）機能では、訪問者がサイトとどのようにインタラクトしているのかを追跡し、パフォーマンスと使い勝手を改善するための実用的な指標を提供します。

ステップ4: Cloudflareのすべての最適化機能を有効にする

ウェブサイトのパフォーマンスを最大化するために、Cloudflareのスピードタブの下で利用可能な最適化機能を有効にしてください。これらの機能は、読み込み時間を短縮し、帯域幅の使用を削減し、全体的なユーザー体験を向上させるために設計されています。
  サイトを高速化するための最も重要な機能にはPROライセンスが必要です。
「Cloudflare Fonts」および「Rocket Loader」を有効にすることを忘れずに。

ステップ5: Cloudflareの無料プランで即時の結果を得る

Cloudflareの無料プランでも、正しい機能を有効にすることで、劇的なパフォーマンス改善が見られます。私はmarketplace.hanscristy.comにこれらの最適化を適用し、結果はすぐに現れました。この変更によって、LCPやTBTなどのWeb Vitals指標が改善されるだけでなく、全体的なユーザー体験も向上しました。
 

ステップ6: CloudflareとSelldoneの最適化が実際のパフォーマンスに与える影響

Cloudflareの最適化とSelldoneの専用技術がどのように組み合わさって、厳しいテストシナリオでも無比のパフォーマンスを生み出すかをご紹介します。

パフォーマンステストの課題を理解する

LighthouseやGTmetrixなどのツールは、主に静的ページやサーバーサイドでコンテンツをレンダリングするウェブサイトのために設計されています。しかし、Selldoneは異なるアプローチを取っています。

• 100% PWA: Selldoneのプラットフォームのすべての要素（メインウェブサイト、ダッシュボード、ストアフロントなど）は、プログレッシブWebアプリ（PWA）として構築されています。これにより、全てのレンダリングがクライアントサイドで行われ、ユーザーはカスタムダッシュボードやストアフロントを柔軟にデザインできます。
• 動的ドメイン読み込み: ユーザーは任意のドメインでSelldoneを読み込み、複雑なバックエンドの実装を心配することなく利用できます。このシステムは、すべてをダイナミックに処理し、単一のJavaScriptファイルとして配信されます。

このユニークなアプローチは柔軟性と速度を提供しますが、サーバーレンダリングされたページ用に設計されたツールでテストすると固有の課題を生み出します。

Selldoneが実際の使用で10倍から100倍速い理由

静的ページが各ユーザーリクエストのHTMLをサーバーでレンダリングするのに対し、SelldoneのPWAアプローチは根本的に異なります。
効率的なデータ取得:

• サーバー上でページ全体をレンダリングする代わりに、Selldoneは必要なデータを含む軽量のJSON構造を送信します。
• 例えば、ユーザーが商品をクリックすると、プラットフォームはページ全体を再読み込みまたはレンダリングするのではなく、必要なデータ（商品詳細など）だけを取得します。

サーバーサイドレンダリングの遅延なし:

• WooCommerceのように、各クリックがサーバーサイドレンダリングをトリガーするプラットフォームとは異なり、Selldoneはこのボトルネックを完全に排除しています。すべてがクライアントサイドで処理され、待機時間が大幅に削減されます。

リアルタイムの速度的優位性:

• ユーザーはほぼ瞬時にページ遷移を体験します。この実際の速度により、プラットフォームはサーバーレンダリングされたウェブサイトと比べてかなり速く感じられ、伝統的なテストスコアがその利点を完全には反映しなくても問題ありません。

技術的ボトルネックを突破する

クライアントサイドレンダリングされたPWAの高いテストスコアを達成することは、歴史的に以下のような理由で課題となってきました:

• JS実行遅延: クライアントサイドレンダリングはJavaScriptに大きく依存しており、テストツールはしばしばペナルティを課します。
• 動的コンテンツ: 静的HTMLとは異なり、動的コンテンツの読み込みは合成テストでは遅く見えることがあります。

しかし、Selldoneは以下を組み合わせることで、インターネット上で初めてこれらの制限を克服しました:

• Cloudflareの最適化（Rocket Loader™やBrotli Compressionなど）を活用してアセット配信を効率化します。
• 高度なPWAアーキテクチャを使用してリアルタイムデータの取得とレンダリングを実現しました。

現実的なパフォーマンスと合成スコアの違い

合成テストがSelldoneのようなクライアントレンダリングプラットフォームで低いスコアを示すことがある一方で、実際のパフォーマンスは異なる物語を語ります。Selldoneのダッシュボードとストアフロントは、サーバーレンダリングされたプラットフォームと比較して10倍から100倍速い体験を提供し、現代のeコマースニーズに最適なソリューションとなっています。
  最適なパフォーマンスのために使用されるCloudflareの設定を模倣したい場合、以下の有効にした機能のリストがあります:

ウェブパフォーマンス用語

Web Vitalsにおけるウェブパフォーマンス用語をわかりやすく解説します:

LCP (最大コンテンツ描画時間)

LCPは、ウェブページの最大表示部分（大きな画像や見出しなど）が読み込まれ、ユーザーによって見えるようになるまでの時間を測定します。これは、ページが「準備完了」と感じられるまでにかかる時間と考えてください。

CLS (累積レイアウトシフト)

CLSは、ウェブページが読み込まれている間に予期しない動きがどれほど発生するかを追跡します。たとえば、ボタンがクリック直前に位置を移動する場合、それはレイアウトシフトです。低いCLSスコアは、サイトが安定して滑らかであることを意味します。

INP (次の描画までのインタラクション)

INPは、ボタンのクリックや検索バーへの入力のようなユーザーインタラクションに対して、ウェブページがどれだけ早く反応するかを測定します。INPが早いほど、サイトは応答性が高くなり、ユーザーはアクションの実行を待つのにイライラしません。

TBT (合計ブロッキング時間)

TBTは、ページが読み込まれている間に応答しない時間を計算します。たとえば、ユーザーがスクロールしたりクリックしたりしようとしたときに何も起こらない時間も含まれます。低いTBTは、ページがマルチタスクが得意であり、読み込み中でもユーザーが滑らかにインタラクションできることを意味します。