公開日: 2024 年 10 月 30 日
2024 年初頭に Core Web Vitals 指標として Interaction to Next Paint（INP）が導入されたことで、レンダリング パフォーマンスへの関心が高まっています。INP の一部は、ユーザーがページの操作を開始した後、ブラウザが次のフレームをペイントするまでにかかる時間に焦点を当てています。ウェブサイトの INP を低く保つことで、ユーザーは操作にできるだけ迅速かつスムーズに応答していると感じます。
また、ページの読み込み時に行う必要があるレンダリング作業は、インタラクションの開始が遅れる可能性もあります。ページのライフサイクルにおいて、この重要な部分に費やされる作業量を減らす方法を見つけることは価値があります。CSS content-visibility プロパティは、この目的を達成するための 1 つの方法です。このプロパティは、2024 年 9 月よりベースラインで新規に利用可能になりました。
content-visibility は、要素がビューポートに近づくまで要素のレンダリングを遅らせるようユーザー エージェントに指示する CSS プロパティです。多数の DOM 要素があるページには、ページの初期読み込みで開始されるレンダリング作業が少ないため、この方法が有用です。代わりに、ユーザーが表示する必要がある直前に処理が行われます。
content-visibility: auto を適用すると、初期読み込み時のレンダリング パフォーマンスが 7 倍向上します。詳しくは、以下をご覧ください。
画面外の要素に対してこの最適化を有効にするには、ウェブサイトの CSS で content-visibility: auto ルールを適用します。
.render-me-later {
content-visibility: auto;
}
content-visibility は、CSS の包含で contain プロパティに定義されている動作の一部に基づいて動作します。CSS の制限の目的は、DOM ツリーの一部を分離することです。これにより、レンダリング操作のスコープを DOM ツリーの特定の部分に絞り込めるため、レイアウトを無効にして、DOM ツリーのサブセットについてのみレイアウトをやり直すことができます。レンダリングのパフォーマンスに適用するには、contain プロパティのさまざまな値と、それらを効果的に使用する方法を十分に理解する必要があります。
content-visibility: auto が要素に適用されると、contain プロパティによって提供されるプロパティの一部が自動的に適用されます。その結果、影響を受ける要素は最初は 0px の高さでレンダリングされます。つまり、レンダリングされません。
ただし、これにはいくつかの副作用があります。たとえば、ユーザーがスクロールして、これまでレンダリングされていなかった要素を表示すると、ページのスクロールバーが移動して高さが変化することがあります。この問題を軽減するには、contain-intrinsic-size プロパティを適用します。
content-visibility は最近ベースラインで新しく利用可能になったため、新しいプロパティを使用するためにブラウザをまだ更新していないユーザーが心配になるかもしれません。content-visibility は CSS プロパティであるため、過度に心配する必要はありません。それを認識するブラウザはそれを使用し、認識しないブラウザは使用しません。つまり、content-visibility をサポートするブラウザで得られるパフォーマンス上のメリットを除き、ページの機能はほとんど同じになると考えられます。
content-visibility は付加的なメリットをもたらします。ページの読み込み中にレンダリング作業を減らすために使用できる場合は、ページで最も処理能力が必要なときに、できるだけ多くの処理能力を利用できるように、使用することを検討してください。この便利な機能がベースラインで新たに利用可能になったので、必要に応じてレンダリング作業を回避し、ユーザーがそのメリットを享受できるように、この機能を自由に使用してください。