ページの読み込みを高速化できるCSSプロパティ「content-visibility」

tecmemo2109

こんにちは、ウェブラボクリエイターズメモです。

今回は、ページの読み込みを高速化できるCSSプロパティ「content-visibility」を紹介したいと思います。

まず初めに、このプロパティは全てのブラウザに対応しているわけでは無いので、以下の参考サイトをご確認ください。

ご覧の通り、現状ではFirefoxやiOS Safariなど主要ブラウザでも対応していないものもいくつかあります。

ですが今後対応されていくと思うので、それを踏まえた上で簡単に紹介したいと思います。

まずこのプロパティで具体的に何ができると言うと、コンテンツのレンダリングを制御することができます。

レンダリングとは、Webページに含まれるHTML・CSS・各種ファイルなどのデータを元に処理してブラウザ内で描画すること。

ブラウザの表示領域に入るまでコンテンツのレンダリングをストップ出来たりするので、最初に表示されるまでの処理を減らしたりすることができます！

詳しい説明など気になる方は以下に開発者向けの文書があるのでそちらをご覧くださいませ。

使い方はとても簡単で以下のようにCSSで制御したい部分を指定するだけです。

CSS記述例

section {
	content-visibility: auto;
	contain-intrinsic-size: 0 500px; //表示表示領域の大体の大きさ
}

これだけで実装できます。

あとは実際にテストしてみて実感出来るかって所ですね。

簡単なDEMOページで作って試してみましたが、やっぱり重いページ用意しなきゃ実感できませんでした・・・。

今度弊社のサイトとかで試してみようかと思います。

色々調べてみた感じだとレスポンシブでPCとスマホでコンテンツを切り替える時などに使うと良いみたいですね。

今後もこういった細かい高速化できる技術が増えていくと思うので非常に楽しみです。

以上、クリエイターズメモでした。