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コンサルタントのまとめ

エンジニアさんなどと協力してやっていきたいですね。