CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする3 検証

containプロパティにlayoutやpaintを指定した場合やcontent-visibilityプロパティを設定した場合のCSS Containmentの検証をご紹介します。

これまでの関連Blogについては「CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする1 概要」「CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする2 検証」でご確認いただけます。

layoutの検証

contain: layout;の設定の有無による要素の配置の違いからLayoutの封じ込めを検証します。

containプロパティがない場合

1. containプロパティの設定がないブロックを用意します。
2. ブロック内に3つの要素を設置します。
   1. 1つ目の要素は、position: fixed;を設定して相対的な配置にします。
   2. 2つ目の要素は、float: right;を設定して右側にフロートさせます。
   3. 3つ目の要素は、positionやfloatの設定、clearのようなフロート解除の設定はしません。
3. クリックするたびに、ブロック内のfixed要素が移動するボタンを用意します。

See the Pen layoutの検証（containプロパティがない場合） by ミツエーリンクス (@mitsue-links) on CodePen.

• 初期表示
  • fixed要素はビューポートを基準とした相対配置になります。
  • float要素はブロック要素の右側にフロートし、弟要素のテキストが左側に回り込みます。
  • フロートは解除されません。
• ボタンをクリックして、fixed要素を移動
  • fixed要素はビューポートを基準とした相対位置で移動します。

containプロパティにlayoutを指定した場合

ブロック要素にcontain: layout;を指定して、包含ブロックとします。

See the Pen layoutの検証（containプロパティにlayoutを指定した場合） by ミツエーリンクス (@mitsue-links) on CodePen.

• 初期表示
  • fixed要素は包含ブロック要素を基準とした相対配置になります。
  • float要素は包含ブロック要素の右側にフロートし、弟要素のテキストが左側に回り込みます。
  • 包含ブロックでフロートが解除されます。
• ボタンをクリックして、fixed要素を移動
  • fixed要素は包含ブロック要素を基準とした相対位置で移動します。
  • fixed要素は包含ブロックのパッディングの縁を超えても表示されます。

要素の配置の基準がビューポートではなく包含ブロックになっていることがわかります。 また包含ブロックでフロートが解除されることで、包含ブロック内のfloat要素が包含ブロック外に影響していません。

paintの検証

contain: paint;の設定の有無による要素の描画の違いからPaintの封じ込めを検証します。

containプロパティがない場合の検証はlayoutを指定した場合のcontainプロパティがない場合と同じですので割愛します。

containプロパティにpaintを指定した場合

ブロック要素にcontain: paint;を指定して、包含ブロックとします。

See the Pen paintの検証（containプロパティにpaintを指定） by ミツエーリンクス (@mitsue-links) on CodePen.

• 初期表示時
  • containプロパティにlayoutを指定した場合と同じ見た目になります。
• ボタンをクリックして、fixed要素を移動
  • fixed要素は包含ブロック要素を基準とした相対位置で移動します。
  • fixed要素は包含ブロックのパッディングの縁を超えると、はみ出た部分が切り取られたように描画されます。

包含ブロック内の要素を包含ブロックのpadding領域の外側に配置すると表示されません。 そのため包含ブロックをオフスクリーンの位置に配置した場合は、包含ブロック内の要素も表示されません。

content-visibilityの検証

content-visibilityプロパティの設定による封じ込めを検証します。

仕組みを理解するところから少し踏み込んで、content-visibilityプロパティはautoを指定することでcontainプロパティと同じように封じ込めを有効にする他、hiddenを指定することで要素のレンダリングがスキップされるため、その場合のタブ遷移によるフォーカスやスクリーンリーダーでの読み上げなどのアクセシビリティへの影響がどうなるかを確認してみます。

ブロックを2つ用意します。

1. 1つ目ブロック要素にはcontent-visibility: auto;を設定し、ブロック内に3つの要素を設置します。
   1. 1つ目の要素は、position: fixed;を設定して相対的な配置にします。
   2. 2つ目の要素は、float: right;を設定して右側にフロートさせます。
   3. 3つ目の要素にはリンクを設定します。clearのようなフロート解除の設定はしません。
2. 2つ目のブロック要素にはcontent-visibility: hidden;を設定します。
   1. ブロック内の要素にはリンクを設定します。
3. クリックするたびに、1つ目のブロック内のfixed要素が移動するボタンを用意します。

See the Pen content-visibilityの検証（content-visibilityプロパティを設定した場合） by ミツエーリンクス (@mitsue-links) on CodePen.

• 初期表示
  • 1つ目のautoが指定されたブロック
    • containプロパティにpaintを指定した場合と同じ見た目になります。
    • ブロック内のリンク要素はアクセシビリティツリーに表示されます(ブロックがオフスクリーンの場合も同様です)。
    • ブロック内のリンク要素はフォーカス可能です(ブロックがオフスクリーンの場合も同様です)。
    • ブロック内のリンク要素はスクリーンリーダーで読み上げられます(ブロックがオフスクリーンの場合も同様です)。
  • 2つ目のhiddenが指定されたブロック
    • margin、border、paddingのサイズ指定がある場合は、その指定したmargin、border、paddingのサイズは0にはならずにそのまま残ります。
    • ブロック内のリンク要素はアクセシビリティツリーに表示されません。
    • ブロック内のリンク要素にフォーカスできません。
    • ブロック内のリンク要素はスクリーンリーダーで読み上げられません。
• ボタンをクリックして、fixed要素を移動
  • containプロパティにpaintを指定した場合と同じ見た目になります。

W3Cの仕様にあるようにcontent-visibility: auto;ではレンダリングのStyle、Layout、Paintの封じ込めが有効になります。 この検証からStyle、Layout、Paintの中のPaintの封じ込めが有効になることがわかります。 またcontent-visibility: hiddenを設定してレンダリングをスキップすると、タブ遷移によるフォーカスやスクリーンリーダーの読み上げなどのアクセシビリティに影響することがわかります。

パフォーマンスを比較

これまでの内容を踏まえ、content-visibilityプロパティの設定がないページとcontent-visibilityプロパティを設定したコンテンツを含むページを用意してパフォーマンスを比較しました。

content-visibilityプロパティの設定はファーストビューの表示に影響が出ないように、オフスクリーンにあるコンテンツのみとしました。

計測にはGoogle Chrome デベロッパーツールのLighthouseとPerformance Observerを使用しました。

Lighthouseで計測したFirst Contentful Paintの結果

Performance Observerで計測したfirst-contentful-paintの結果

Performance Observerで計測したloadEventEndの結果

計測した3つのパターン全てにおいて封じ込めを行ったほうが、若干表示パフォーマンスの改善が見受けられました。

さいごに

CSS ContainmentについてのBlogを3回に分けてご紹介してきました。 個人的にパフォーマンスを比較ではもう少し数値に差が出ることを期待していました。今後、パフォーマンス改善が必要なコンテンツで取り入れながら、引き続き効果的な使用方法を検証し、ご紹介していければと思います。