累積レイアウトシフトの測定

累積レイアウトシフトは、時にはJankとして知られている、どのように多くの要素が遅いレンダリングコンテンツのために移動の測定です.レイアウト不安定性の測定として考えることができます.サードパーティのスクリプトとタグ管理のために多くのウェブサイトに共通の問題となっている.

レイアウト不安定性

現代のWebアプリケーションは複雑です.JavaScriptは、DOM、サードパーティ製のスクリプトは、キャンディのように追加され、あまりにも多くのコックは、DOMコンテンツを非同期的にレンダリングするキッチン(ADネットワーク、A/Bテストツールなど)です.この複雑さと非同期負荷は、レイアウトの不安定性の主な問題の原因である.
レイアウトの不安定性は、DOM要素が動的にレンダリングされたコンテンツによって移動するときに発生します.ここでは、モバイルWebを使用する例としては以下のようなものがあります.

DOM要素は、新しいコンテンツレンダリングに応答してシフトしており、ユーザーがアクションを完了するのは困難になります.この例では、それは特にジャガーですが、レイアウトシフトの任意の量は、ユーザーエクスペリエンスに悪いです.どのように我々は建物のレイアウトが不安定性に苦しむかどうかを決定できますか?

レイアウト不安定性測定API

Webインキュベータコミュニティグループ(WICG)の人々はan API to help measure layout instability (「レイアウトシフト」とも呼ばれます).それだけですsupported in Blink-based browsers 現時点では、クロム、エッジ、オペラなどが、それはかなり簡単に使用することです.目標は、一貫してレイアウトシフトを測定する定量的な方法を提供することです.
上の例のAPIを試してみましょう.最初にすべきことはPerformanceObserver オブジェクト.それから、我々はそれが我々が見たいと思うエントリーの種類を伝える必要があります.我々もそれを渡すことに注意してくださいbuffered: true オプションは、コードを実行する前に発生したすべてのエントリを含みます.

new PerformanceObserver(entryList => {
    console.log(entryList.getEntries());
}).observe({ type: "layout-shift", buffered: true });

我々が使用していることに注意してくださいPerformanceObserver の代わりにクラスperformance object . 今日performance.getEntries() は含まれませんLayoutShift エントリー.
このコードは、以下のようなコンソール出力を提供しています.

私たちは2つのレイアウトシフトがあることがわかります.に注意を払うvalue プロパティ.これはレイアウトシフトの大きさを記述する“スコア”です.スコアが高くなればなるほどシフトは鈍くなる.スコアは、の組み合わせですimpact fraction とdistance fraction . つの値は一緒に乗算され、layout-shift エントリー.WICGAPI document goes in to detail on how the score is calculated . 十分に言って、私たちのスコアを低く保つためにしたい!

累積レイアウトシフト

ブラウザーがウェブページとコンテンツを非同期的にレンダリングすると、多くのレイアウトシフトが発生します.上の例では、広告がポップしたとき、2つのシフトがありました、しかし、多くのサイトでは、ページがロードされる前に、1ダース以上のレイアウトシフトがあります.レイアウト不安定性を一貫して話すためには,これらのレイアウトシフトを特異距離に到達させる必要がある.このメトリックを累積レイアウトシフトと呼ぶ.
Googleは、役に立つページを記述しましたCumulative Layout Shift (CLS) そして、それが意味するもの.CLSは3つの主要な“web vitals” Googleは、ユーザーが良い経験を持っていることを確認するための測定をお勧めします.我々は、Googleがいつかこれらのスコアに基づいて検索結果をランク付けする可能性があると思います.
Googleによると、あなたのCLSは「良い」と考えられるために0.1未満になければなりません.上記の何でも、あなたは非同期にあまりに多くの内容を動かしています.

JavaScriptを用いたCLSの測定

我々は、累積レイアウトシフトを測定するいくつかの方法でコードスニペットを改善することができます.あなたは、我々がちょうどvalue 各レイアウトのシフトエントリの一日を呼び出すが、それはかなり簡単ではない.すべてのレイアウトシフトが悪いか予期しない.ユーザーがボタンまたはリンクをクリックすると、レイアウトがいくつかの方法で変更されることを期待するのは妥当です.我々は予想外のレイアウトのシフトを計算して、予期しないだけ含める必要はありません.
そのためには、レイアウトシフトエントリに別のプロパティを使用できます.hadRecentInput . このプロパティは、layout shift was likely caused by user input . 最新のユーザー入力から来たどんなレイアウトシフトも除外するために我々のスニペットを更新しましょう.

new PerformanceObserver(entryList => {
    var entries = entryList.getEntries() || [];
    var cls = 0;
    entries.forEach(e => {
        if (!e.hadRecentInput) { // omit entries likely caused by user input
            cls += e.value;
        }
    });
    console.log(`Cumulative Layout Shift: ${cls}`);
}).observe({ type: "layout-shift", buffered: true })

我々が一緒にそれをすべて置いた今、モバイルデバイスエミュレーションをつけられたクロムdevtoolsでロードされるとき、若干の人気があるウェブサイトのためにCLS得点を見ましょう.

グーグル.COM0

YouTubeCOM0.049

CNNCOM0.2898

追跡する.COM1.7163

これらの結果は全く驚くべきものではない.つの最悪のパフォーマーは、両方のJavaScriptのレンダリングコンテンツの多くの重いサイトを持っている(そしてCNNの場合は、サードパーティの広告プロバイダの無償量).Googleは他方、パフォーマンスに誇りを持っています、そして、彼らが彼ら自身の重要な指標でうまくやっていないならば、それは偽善的です.

CLS得点の制限

サイトのCLSスコアはやや非決定的です.多くの非同期資源がロードされて、描かれる場合、CLSはそれらの資産の到着と実行時間に基づいて変わります.より遅いインターネット接続またはコンピュータを持つユーザーは、より多くのレイアウト変更がasync資源に対応するのに必要であるので、より高いCLSをたぶん経験します.(ブラウザが一度にすべてのリソースが存在する場合、アニメーションフレーム間でバッチレイアウトを変更することができます.
さらに、CLSスコアはビューポートのサイズに大きく影響される.彼らのビューポートがより小さくて、どんな運動でもパーセンテージとしてより大きいので、CLSはしばしばモバイルユーザーのためにより高くなります.これがすべてのケースで意味をなすかどうかは議論不能です-ユーザーがボタンをクリックするか、または非同期DOMレンダリングのためにリンクをクリックしているならば、彼らはそれがデスクトップかモバイルかどうか刺激されそうです.
CLSは不完全なメトリックですが、それはまだあなたのサイトのユーザーエクスペリエンスのための貴重な信号です.コンテンツを読むことができないか、ボタンをクリックすることができないユーザーは、ページが動き回るので、イライラされます.

パフォーマンス監視

私は難しいものを扱うことができます.累積的なレイアウトシフトのようなあなたの本当のユーザーWeb vitalsをモニターしてくださいRequest Metrics .