ユーザーエクスペリエンスとコアWeb vitals最適化-角度ユニバーサル.

この記事はもともと出版されたhere
この記事では、Analog Universalをサーバー側のアプリケーションにレンダリングします.これは、ユーザーエクスペリエンスを向上させるとコアWeb vitalsスコアを高めるでしょう.同時に、サーバー側のレンダリングを有効にするだけで、それ以上の手順を踏まずに、これらのコアWeb VITAL、特にCLSに悪影響を及ぼす可能性があることを示します.

ユーザーの経験を測定するコアWeb vitalsとCLS

我々が始める前に、あなたがコアウェブvitalsについてもっと知りたいならば、あなたはこのページを訪問することができますhttps://web.dev/vitals/ . 私は、彼らがその記事に現れたとき、簡単な定義を提供します.

Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web. Philip Walton

Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools. Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome.

Philip Walton

上から、コアWeb Vitalsは私たちが測定し、当社のWebアプリケーションのユーザーエクスペリエンスを最適化するのに役立ちます.私はこれらのバイタル、CLS(累積レイアウトシフト)の1つの特定の信号にこの記事に焦点を当てます.
CLSはWebアプリケーションの「視覚安定性」を測定します.そして、それがあなたのページがどれくらい安定しているかについて反映して、ユーザーが読んでいる間、起こる突然の動きまたは予想外の変化によって影響を受けます.CLSの理想値は「0.1」以下である.この記事ではCLSの詳細を見つけることができますhttps://web.dev/cls/ .

SSRなしでシンプルなアプリケーション

まず最初に単純な角度クライアントサイドレンダリングアプリケーションを作成し、我々のアプリケーションは1つの機能を持って、それはサーバーから記事を取得し、ビュー内の記事を表示します.アプリケーションを実行して作成します.

ng new cls-measuer-app

今すぐアプリを更新することができます.コンポーネント.TSアプリ.コンポーネント.HTMLは次のようになります.
< div >
<ウル>

インAppComponent 我慢できないarticle$ これは、表示される記事オブジェクトを保持します.

インngOnInit の返り値getArticle() プロパティへのメソッドarticle$ .

getArticle() サーバーから記事データを取得するAPI呼び出しをシミュレートします.それはモックを返しますIArticle JSONファイルから500 msの遅延を持つオブジェクトは、記事の内容がページ全体を埋めるのに十分大きいはずです.これは記事の現実的な例をシミュレートするために不可欠です.

定義するIArticle インターフェイス、プロパティのタイトル、本体、およびimagurl.

テンプレートでは、我々はarticle$ 非同期パイプを使用して、解決したら、返された記事オブジェクトからデータを表示します.を指定することが重要ですheight 画像のプロパティ.そうでなければ、CLSの値に非常に大きな負の影響を与えるでしょう.

記事がまだ読み込まれている間、ローディング指標を表示します.

< ull >
一度我々がサーブして、アプリケーションを閲覧するならば、我々はヘッダー、フッターとローディング指標を見ます.半秒後に記事の内容が読み込まれ、ローディングインジケータが記事の内容に置き換えられます.p >

メジャーウェブ

私は、ウェブvitalsクロム拡張を使用しています.私は生産モードでアプリケーションを実行し、以下の結果を与える測定をトリガします.
< P >

＜p＞理想値(0.1)より高いCLS(0.122)の値に注目する.これは、我々は我々のアプリケーションで良いユーザーエクスペリエンスを提供していないことを意味します.この理由は、ローディング指標を記事の内容に置き換えているからです.これは予期しない内容の変化とみなされ、CLSシグナルに負の影響を与えますp >
幸いにも、この問題は角度の適用で固定できる.解決策は、ページの最終的な状態(記事がロードされた後)をユーザーにできるだけ速く提供することによって、このコンテンツのシフトを回避することである.私たちは、角度のUniversalを使用しているサーバー側でページをレンダリングすることによって、そうすることができますp >
< hr/>

ユーザー側の経験を改善するための角度ユニバーサルのサーバー側レンダリング

現在、我々は上記の問題を解決し始めます.我々は、初期ページの負荷のサーバー側のレンダリングを許可するために角度の普遍的なアプリケーションに追加を開始します.では次のコマンドを実行しましょう
<> P >
クラスをハイライト表示する

ng add @nguniversal/express-engine

< div >
これはプロジェクトを準備し、Universal/Expressエンジンをインストールし、サーバー側のアプリケーションモジュールと他の多くのファイルを作成します.このコマンドと、Angular official documentation .

この時点で、サーバーのサイダーレンダリングをサポートしています.
クラスをハイライト表示する

npm run dev:ssr

< div >
ブラウザを開き、アプリケーションURLに移動すると、すぐに記事の内容が表示されます.p >

それだけじゃない

私たちのアプリケーションは、サーバー側レンダリングされ、時間のないページのコンテンツをユーザーに提供しています.しかし、我々にはまだ問題があります.アプリケーションを実行すると、すぐに記事の内容が表示されても、読み込みインジケータが瞬く間に少し時間が経過した後、記事の内容が再びページに塗りつぶされます.これは以下の一連の実行の結果です.
< OL >

角度ユニバーサルユニバーサルサーバー側にアプリケーションをレンダリングし、クライアントに最終的なHTMLを送信します.

クライアントはレンダリングされたHTMLを受け取り、すぐにユーザに表示します.

ブラウザはすべてのJavaScriptファイルをロードし、再アプリケーションを水和した.その後、アプリケーションは、ローディングインジケーターを表示し、ローディングインジケータを表示し、ローディングが終了したときに記事の内容をインジケータに置き換えられます.

< OL >
私たちがこの時にCLSを測定しようとするならば、結果は以前より悪いイベントでしょう.まず、アプリケーションを構築します.
クラスをハイライト表示する

npm run build:ssr

< div >
それから< tt/>
<> P >
クラスをハイライト表示する

npm run serve:ssr

< div >
今、我々はアプリケーションを実行し、再度測定を受け取り、彼女は結果です

<高橋>言い換えれば、SSRを有効にすることによって以前よりも事態を悪化させ、幸いにもこの問題の解決策がありますp >

移送への移行

私たちが直面している問題の主な理由は、アプリケーションがアプリケーションを再起動した後、クライアント側で一度、記事を2回、サーバー側で読み込んでいることです.これを修正するにはTransferState , で定義されている.
<高橋潤子>
クライアント側のアプリケーションにサーバ側のアプリケーションから転送されるキー値ストアp >
<紹介>Angular Official Documentation <川合>
サーバはAPIからフェッチし、クライアント側のアプリケーションに渡すので、クライアント側で再度サーバーを呼び出す必要はありません.
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/NicholaAlkhouri/b22c2732f8bc8be171292661599d1b8b.js//>
< div >
< OL >

輸入したBrowserTransferStateModule にAppModule , and ServerTransferStateModule インAppServerModule 転送状態サービスがこれらのモジュールの中に提供されるので.

アプリケーションがサーバー側で実行されているかどうかを確認しますif(isPlatformServer(this.platformId)) , 我々は、APIから記事をロードし、転送状態に格納されてthis.transferState.set(this.stateKey, article) .

アプリケーションがクライアント側で実行されている場合は、transferState サーバから値を持ちますthis.transferState.hasKey(this.stateKey) .

If the transferState 値を持って、我々は直接、それ以外の場合は、APIから記事を再読み込みを使用します.

< OL >
そして、それは、我々のアプリケーションを再び構築して、サーブして、測定します
< P >

そして、現在CLSは0まで下がります、そして、それは最初のレンダリングの後、ページの内容が決して変わらないのでですp >
全体的に、あなたがSEOを押し上げたいならば、あなたのアプリケーションで角度ユニバーサルを有効にしないでください、そして、あなたのページをレンダリングしているサーバーがすべてのSEO問題を解決すると仮定してください.角度普遍性を可能にすることは、最初のステップだけです.あなたのアプリケーションが意図通りに動作していることを確認するためにさらに手順を実行する必要があります.そして、最初にして変更して比較することを忘れないでくださいp >