ヘッドレスWordPressでより良いコアWebバイタルを達成する

優れたユーザーエクスペリエンス（UX）を作成することは、長い間Web戦略を成功させるための重要な要素でしたが、デジタルエクスペリエンスに対するユーザーの期待が新たな高みに達するにつれて、UXはこれまで以上に重要になっています。

急速なデジタルアクセラレーションにより、どのデバイスでもすばやくロードして適切に応答する、高速でシームレスなエクスペリエンスに対する需要が高まっています。今日のデジタルオーディエンスは、不足しているものに対してほとんど忍耐力がありません。

このような状況を背景に、GoogleはCore Web Vitalsを立ち上げました。これは、サイトの所有者とビルダーがエンドユーザーに明確に焦点を当てて作成しているデジタルエクスペリエンスをよりよく把握できるようにするユーザー中心のパフォーマンス指標のセットです。

Core Web Vitalsは、Googleの検索アルゴリズムのランキング要素にもなっています。つまり、ユーザーエクスペリエンスが向上した高速サイトは、ユーザーエンゲージメントの向上だけでなく、検索結果でも支持されるようになりました。

これにより、構築するすべてのエクスペリエンスでエンドユーザーがどれほど重要であるかがわかります。また、コアWebバイタルが強力なサイトは、訪問者をより高い割合で顧客に変えるという、現実世界の最終的な意味合いがあります。

全体的なユーザーエクスペリエンスを向上させるために最適化する方法はいくつかありますが、ヘッドレスまたは分離されたWebサイトアーキテクチャは、Core Web Vitalsと連携し、今日のデジタルコンシューマーにシームレスなオムニチャネルエクスペリエンスを提供する高性能のWebサイトとアプリケーションを構築するための明確なパスを提供します要求する。

ヘッドレスのハンズオンの力を体験してください。今すぐ無料のAtlasサンドボックスアカウントにサインアップしてください。

この投稿では、Headless WordPressが、強力なCoreWebVitalsで優れたユーザーエクスペリエンスを提供するための最高のテクノロジースタックである理由を説明します。 これが私たちがカバーするものです：

コアWebバイタルとは何ですか？

Core Web Vitalsは、GoogleのWeb Vitalsイニシアチブに含まれるページエクスペリエンスシグナルのサブセットであり、「ウェブ上で優れたユーザーエクスペリエンスを提供するために不可欠な」高品質のシグナルの統一されたガイダンスを提供します。 本質的に、これらのメトリックは、訪問者が探しているもの、つまり予測可能で応答性が高く、高速なコンテンツをWebサイトが確実に配信するのに役立ちます。

Core Web Vitalsのリストは時間の経過とともに進化すると予想されますが、現在のセットは、次の3つの指標のレンズを通して、ページの読み込み速度、双方向性、視覚的な安定性という3つの主要な領域に焦点を当てています。

• 最大のコンテンツフルペイント（LCP）：読み込みパフォーマンスを測定します。 優れたユーザーエクスペリエンスを提供するには、ページの読み込みが最初に開始されてから2.5秒以内にLCPが発生する必要があります。
• First Input Delay（FID）：双方向性（サイト要素がクリックまたはタッチに応答する速度）を測定します。 優れたユーザーエクスペリエンスを提供するには、ページのFIDが100ミリ秒未満である必要があります。
• 累積レイアウトシフト（CLS）：サイト要素がクリックまたはタッチされずにシフトした場合の視覚的安定性を測定します。 優れたユーザーエクスペリエンスを提供するには、ページでCLSを0.1未満に維持する必要があります。

上記のように、Core Web Vitalsは現在Googleの検索アルゴリズムのランキング要素です。つまり、検索結果では、速度が速く、ユーザーエクスペリエンスが優れているサイトが優先されます。 Core Web Vitalsが強力なサイトは、UXが低いサイトよりも高い割合で訪問者を顧客に変えるため、これは重要ではありません。魅力的なユーザーエクスペリエンスを提供し、そうすることでより多くの可視性が得られるからです。

サイトの所有者とビルダーは注意を払う必要があり、PageSpeed Insights、Lighthouse、匿名化された実際のユーザー測定値を収集するChromeユーザーエクスペリエンスレポートなど、Googleの多くのWeb開発者ツールを使用してCore Web Vitalsの測定を開始できます（まだ測定していない場合）。各コアWebバイタルメトリック（およびそれ以上）のデータ。

この無料の電子書籍でコアWebバイタルの測定の詳細をご覧ください！

サイトのパフォーマンスに関連する要素はGoogleのアルゴリズムにとって新しいものではありませんが、モバイルの応答性と安全なブラウジング（HTTPS）は何年にもわたってランク付けの要素でしたが、ランク付けの要素としてCore Web Vitalsを導入することで、Googleのパフォーマンスへの焦点が明確な側面を表す指標で拡大されます。ユーザーエクスペリエンスの。

つまり、ユーザーエクスペリエンスが中心となっており、Core Web VitalsをWebサイトのベンチマークとして使用することは、サイトユーザーに一貫して優れたエクスペリエンスを提供するための優れた方法です。 とはいえ、CoreWebVitalsの測定は方程式の一部にすぎません。

ヘッドレスワードプレスの台頭

デジタルエクスペリエンスへの期待が高まり続け、高性能のWebサイトの必要性がますます重要になるにつれて、これらの課題に正面から取り組むために新しいフレームワークとソリューションも採用されています。

ヘッドレスWordPressはその代表的な例であり、ますます多くのサイト所有者やビルダーが、お気に入りのフロントエンドフレームワークを世界で最も人気のあるCMSと結び付けようとしています。

ヘッドレスアーキテクチャは、ウェブサイトのフロントエンドとバックエンドを分離し、APIを使用してそれらの間でデータをフィードすることでこれを可能にします。

WordPressの場合、これにより、コンテンツ作成者はお気に入りのオープンソースCMSに依存し続けることができ、開発者はNext.jsなどのツールや最新のフロントエンドフレームワークの選択を利用して、すばらしいWebサイトやアプリケーションを構築できます。

ヘッドレスのリスクフリーで実験してみませんか？

今すぐ無料のAtlas評価アカウントにサインアップしてください！

今日のペースの速いデジタル市場では、ヘッドレスモデルが広く採用されていることは間違いありません。特に企業レベルでは、大企業がコンテンツ作成者とWeb開発者の間に長い間存在していた従来のサイロを解消することで俊敏性を再発見しています。

コンテンツ管理への壁に囲まれたアプローチは、市場投入までの時間を遅らせ、ROIを弱めるだけでなく、多くの場合、理想的とは言えないユーザーエクスペリエンスをもたらすため、急速に時代遅れになりつつあります。

コンテンツクリエーターは締め切りが厳しくなり、オールインワンのCMSソリューションに目を向けているため、エンドユーザー向けに最適化されたエクスペリエンスを常に構築しているわけではありません。 実際、WordPressで構築されたWebサイトの30％未満が、最適なCore Web Vitalsスコアを持っています。このスコアは、他の競合他社のプラットフォームが評価されるにつれて低くなります。

WP Engineのプラットフォーム上に構築されたサイトは、40％以上が健全なCore Web Vitalsのしきい値を満たしていますが、サイトの所有者とビルダーがより優れたユーザーエクスペリエンスを構築するための新しい方法を模索しているため、ヘッドレスアーキテクチャが最善の方法として飛び出し続けています。コンテンツの作成者と開発者の両方が好むツールを使用して、パフォーマンスの高いサイトを提供します。

実際、ヘッドレスWebサイトは、コアWeb Vitalsスコアをゲートからすぐに押しつぶすことが多く、ヘッドレス（フロントエンド）フレームワークの50％以上が定期的に健全なCoreWebVitalsスコアを達成しています。

同時に、フロントエンドフレームワークを使用して、CMSを使用せずにデジタルエクスペリエンスを構築することは、コンテンツクリエーターに限定される可能性があります。これは、ヘッドレスWordPressがすべての人に解決する課題です。

アトラス：完全なヘッドレスWordPressソリューション

AtlasはWordPressの完全なヘッドレスソリューションであり、開発者とコンテンツ作成者の両方の要件を満たしながら、ヘッドレスパフォーマンスのピークを達成するために特別に設計されました。

Atlasは、複数のサーバー側環境、GitHubブランチからの自動デプロイ、静的および動的ヘッドレスアーキテクチャの両方、JavaScriptフレームワーク（React、Angular、Vue.jsなど）の選択など、最新の開発者が必要とするすべてのサポートを提供します。 100％スクリプト可能なコマンドラインツール。

同時に、Atlasは、開発者の経験をWordPressとWP Engineのテクノロジーのリーダーシップと組み合わせて、開発者やコンテンツ作成者からエンドユーザーまで、すべての人を幸せにします。

パフォーマンスの観点から、At​​lasは変革をもたらします。 WPエンジンはすでに地球上で最速のマネージドWordPressプラットフォームであるため、スタックにAtlasとNode.jsを追加すると、速度が飛躍的に向上し、従来のWordPressよりも最大10倍高速にページを実行できます。

最終結果は？ 開発者とコンテンツ作成者は、力を組み合わせて、ベンチマークを常に上回っているCoreWebVitalsを使用してパーソナライズされたフロントエンドエクスペリエンスを作成できます。

Atlasを使用したコアWebバイタル要件の破棄

Atlasのパフォーマンス上の利点は確かに変革的であり、ユーザーは美しいページの超高速配信の違いをすぐに確認できますが、その高いパフォーマンスは、サイト全体のCoreWebVitalsメトリックの向上にも反映されます。

AndroidOSに特化した最大の独立系出版物であるAndroidAuthorityは、2019年にWP Engineに搭載されました。ウェブサイトが成長し続けるにつれて、Android Authorityのデジタルチームは、スケーラビリティのオプションを備えた将来に向けて構築していることを確認する方法として、ヘッドレスWordPressの評価を開始しました。増大する要求を満たすことができるパフォーマンス。

Atlasでサイトをアップグレードした後、Android Authorityは驚くべき結果を確認しました。これは、Core WebVitalsを含むGoogleLighthouseの指標が6倍になり、デスクトップとモバイルでの速度が競合他社よりも速いことです。

wpengine.com/atlasで無料のAtlasサンドボックスアカウントにサインアップすることで、Atlasを実際に利用することもできます。

サンドボックスアカウントを使用すると、開発チームはAtlasに飛び込むことができ、WPエンジンアカウントを開かなくてもサイトのフロントエンドを構築して提供できる「ホスティングなし」とペアになったサンドボックスWordPressサイトが含まれます。

また、幅広いチュートリアルとドキュメントのほか、Faust.jsやAtlas Content Modelerなどの追加のオープンソースツールもあります（これらについては以下で詳しく説明します）。 いつものように、Atlasへのアクセスについて質問がある場合は、いつでも当社の専門家の1人と話すことができます。

Faust.jsとAtlasを使用してサイトをセットアップ、構築、デプロイします

ヘッドレスを使い始める最も速い方法の1つは、ヘッドレスWordPressのデータフェッチ、ページレンダリング、ユーザー認証を簡単にするオープンソースのフロントエンドフレームワークであるFaust.jsを使用することです。

Faust.jsは、WordPressの公開エクスペリエンスに精通していることを維持しながら、ヘッドレスWordPressで構築するときに最高の開発者エクスペリエンスを提供することに重点を置いています。

Faust.jsが提供する機能のいくつかを次に示します。

• 静的サイトジェネレーターとサーバーサイドレンダリング：FaustはNext.jsの上に構築されており、Next.jsですでに利用可能なSSGとSSRを利用できます。
• GraphQL ：Faustは最先端のGraphQLクライアントを使用しており、事前にGraphQLクエリを知らなくてもWordPressWPGraphQLAPIをクエリできます。 これが実際に動作しているのを初めて見ると、魔法のように感じます。Faustは、この種の機能を提供する最初のフレームワークです。 GraphQLクエリを作成することを二度と考えないでください。
• コンテンツプレビュー：Faustは、ヘッドレスWordPressの一貫したプレビューという厄介な課題を解決します。
• 認証：Faustには、WordPressバックエンドで認証するためのメカニズムが組み込まれているため、ゲート付きコンテンツ、eコマースエクスペリエンス、またはその他の認証済みリクエストを簡単に作成できます。
• React ：Faustを使用すると、最も人気のあるフロントエンドライブラリを使用してフロントエンド全体を構築できます。
• Reactフック：Faustは、WordPressからのデータの取得を非常に簡単にするため、WordPressAPIの自然な拡張機能です。
• カスタム投稿タイプ：Faustがデータのフェッチを支援する独自の方法により、WordPressサイトにカスタム投稿タイプを追加してフロントエンドでそれらにアクセスするのは簡単です。
• 柔軟性：FaustはNext.jsとReactを使用する場合に最適に機能しますが、Gatsby、Nuxt、SvelteKitなどの他のツールを使用する場合はそれを行うことができます。

ここをクリックしてFaustを今すぐ開始するか、このステップバイステップのウェビナーをチェックして、新しいフロントを構築するときに使用するツール、言語、API、フレームワークなどの詳細を確認してください。 -Next.jsの上でエクスペリエンスを終了し、Atlasを使用してデプロイします。

ヘッドレスWordPressであなたの創造性をパワーアップ

デジタルアクセラレーションが、より高速で、よりパーソナライズされたオムニチャネルエクスペリエンスへの需要を刺激し続ける中、Headless WordPressは、サイト所有者、サイトビルダー、およびそれらが作成するデジタルエクスペリエンスに幅広い可能性のリストを提供します。

また、Core Web VitalsはGoogleの検索アルゴリズムで引き続き重要な役割を果たしているため、これらの指標をAtlasと正面から一致させることは、最高水準のページエクスペリエンスを満たすだけでなく、より優れた、より使いやすいWebサイトを構築するための確実な方法です。あなたのエンドユーザーのために。

今すぐ無料のAtlasサンドボックスアカウントにサインアップして、Headless WordPressを実際に見てみましょう！