Webコンテンツの表示をスピードUPする3つの最新技術
■ウェブページの表示速度を向上するための最新技術
●loading属性
●content-visibilityプロパティ
●containプロパティloading
loadingは、HTMLタグの属性だ。ネイティブLazyloadとも呼ぶ技術で、必要になるまで画像やiframeを読み込まない「遅延読み込み」を、JavaScriptを使わずブラウザの機能で実現する。
このコラムで以前に詳しく解説した。現在はChromeだけではなく、FirefoxやEdgeもサポートしている。Safariもバージョン14でサポートすると思われる。
content-visibility
content-visibilityは、CSSのプロパティだ。スクリーンに見えていないコンテンツのレンダリングを遅らせる
さきほどのloading属性は読み込みを遅らせるものだが、このcontent-visibilityは「読み込むが描画しない」もの。新しい技術であり、サポートしているのは Chrome 85だけだ（この記事を公開している時点での安定版Chromeの最新バージョン）。
このcontent-visibilityを詳しく紹介した記事をweb.dev サイトが先月公開している。グーグルのマルテ・ウブル氏が絶賛している注目の技術でもある（ウブル氏はAMPプロジェクトのリーダー）。今後のChrome以外のブラウザサポートに期待したい。
contain
containは、CSSのプロパティだ。CSS Containmentとも呼ぶ。再レンダリングをページ内の特定の部分だけに限定できる。画面全体を再レンダリングしないので、表示速度の向上に役立つ。
SEOコンサルタントのまとめ
エンジニアさんなどと協力してやっていきたいですね。
