【W3Cエラー】content-visibility:auto;遅延読み込みでWebページが爆速に!?

そもそも、CSS「content-visibility:auto;」とは⁉︎

そもそも、たった一行のCSSを使うだけでウェブページの読み込みが爆速になると噂になっている話題の「content-visibility:auto;」とは、どんな話しなのか?

下記の説明文は、Googleニュースに掲載された記事から引用したものです。

2020年8月末リリースのChrome85に実装された機能で、本日記載している内容で一番新しい仕様です。

このプロパティが優れもので、指定した要素の描画をスキップして、ビューポートに近づくと描画 を行います。Lazy loadingはデータの読み込みを遅延実行し、一方で、content-visibilityは表示（レンダリング）を遅延実行します。

引用：表示速度を飛躍的に向上させるHTML/CSS最新仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説 - Yahoo! JAPAN Tech Blog

「Lazy loading」は、画像の遅延読み込み方法として非常に優れもの。僕のFC2ブログでも有り難く使わせてもらっています。

これに対して、content-visibility:auto;は、指定した部分的なコンテンツを丸ごと遅延読み込みしてくれる、もの凄く便利なCSSだと理解しました。

要するに、指定したコンテンツがスクロールによって画面内にあらわれるまでは、それを描画させる必要がない、ということを伝えられるようになったそうなんです。

いわば、ブログの記事後半にある関連記事や、ソーシャルシェアボタンなどの重たいコンテンツを遅延読み込みさせることにより、表示速度が劇的に速くなると…。

ググってわかる⁉︎毎度、胡散臭い技術系ブログたち…

もしも、これが本当の話しなのだとすると、使ってみない手はありませんよね?

さっそく、「content-visibility:auto;」にまつわる記事周辺をググって実装してみることにしましたよ、自ブログに。ところが…。

毎度の話しなんですが、何かブログのカスタマイズをしようとする際には、当たり前の如く技術系サイトを巡回して分かりやすい説明を探すものです。

しかし、そのほとんどは、薄っぺらな内容のコピペ記事ばっかり（汗）なかには、英文をソフトで翻訳した上で、メチャクチャなままの日本語を丸ごと記載しているサイトまであるありさま。よって、何て書いてあるのかがサッパリ分かりません…。

なぜ、技術系に限ってお粗末なサイトや胡散臭いブログが多いのだろう⁉︎どこかで騙されて商材などを売りつけられた人達がマニュアルでも見ながら書いているのでしょうか⁉︎技術を語る前に、まず日本語の勉強をしたらどうなの?と思ってしまいました(￣▽￣;)

コンテンツを遅延読み込みするCSS「content-visibility:auto;」実装は簡単

クソ記事に振り回されつつも、唯一と言って良いくらいの具体例を挙げている記事にやっと辿り着く。ほんの数行のCSSで実装できる小技テクニック12個まとめ 【簡単＆実用的】という記事を参考にしながら、CSSの「content-visibility:auto;」を遅延読み込みさせたい箇所に実装。ごく簡単な作業だけで完成させることが出来ました。

こんな簡単な方法でコンテンツの遅延読み込みが出来たら本当に凄いこと。Webのとてつもない進化に驚いた次第です。

自ブログへのカスタマイズが終わってから、さっそく「content-visibility:auto;」の実装前・実装後を比較してみる。たしかに、Webページの読み込みは速くて軽くなったことが実感できました。

僕がcontent-visibility:auto;のカスタマイズをやめた理由

本来なら、これでめでたし、めでたしなはず。しかし、そうはなりませんでした。すぐにやめて、全部を元通りに直す羽目になったのです。何故でしょうか⁉︎

僕が「content-visibility:auto;」のCSSをぜんぶ取り外した理由。それは、今回のカスタマイズをhtmlバリデート（正確性の検証）した結果、どうしてもW3Cのほうでエラー警告がされてしまうからです。

エラーを回避する方法をいろいろと試みたのですが、残念ながら僕の能力では解決できませんでした。なお、僕自身が作業をする行程に何かミステイクでもあったのか⁉︎と思って何度もチェックしたのだけれど、問題はなかったようです。

しかし、このまま終わらせるようでは、モヤモヤが残って気持ち悪い…。念のため、最後にやってみたことは、「content-visibility:auto;」のCSSを紹介した元記事のバリデート。その結果は、全部がW3Cエラーだらけという散々なものだった…。

何だ！まず最初に、紹介元の記事をバリデートしてからカスタマイズするかどうかを判断すれば良かったんだ（汗）この結論に達したことで、この話しはひとまず終結させることにしました(￣▽￣;)

「content-visibility:auto;」がW3Cエラーになるのは腑に落ちない⁉︎

今回のCSS「content-visibility:auto;」が、なぜW3Cエラーになってしまうのか?そこが、どうしても腑に落ちません。何故なら、先程ご紹介した表示速度を飛躍的に向上させるHTML/CSS最新仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説 - Yahoo! JAPAN Tech Blogという記事の冒頭には、執筆者がさも自慢げといった感じで自己紹介を次のように書いているからです。

突然ですが、弊社ヤフーがW3Cという標準化団体に参加しているのはご存じでしょうか。

（中略）

自分はその活動に関して積極的に取り組んでおり、今回はその活動下で得た表示速度改善系の情報で有益だと感じたものをいくつかコード付きで簡単に解説します。

こんな事を書いておきながら、W3Cエラーになる情報提供を行なうなんて一体どんな人物なのでしょうか⁉︎

とりあえず、W3Cエラーになるようなカスタマイズを実装することなんて出来ませんから…。

おわりに

果たして、「content-visibility:auto;」は情報が新しすぎるからW3Cエラーになるのかどうか分かりませんが、W3Cに精通していると自称するのであれば、なぜW3Cエラーになる情報を広めているのか⁉︎ちゃんと理解できるように説明するべきだと考えます。

そうそう、「content-visibility:auto;」の記事をググっていたら、【SEO対策】content-visibility:auto;でコンテンツの遅延読み込みなんていうタイトルで「SEO対策」などと謳っているブログまでありましたよ。ここもバリデートにかけたらエラーだらけ…。

何がSEO対策だよ(￣▽￣;)

ただし、いずれ「content-visibility:auto;」が普及してまともな解説記事があらわれたりするのであれば、とても画期的なWebテクニックですよね‼︎しばらくの間は様子を見つつ、頭の片隅に留めておきたいカスタマイズ方法だと思いました。