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

2021/02/21 2021/02/21 0

#W3Cエラー #コンテンツ遅延読み込み #content-visibility:auto; #技術系ブログ #Webページ表示速度改善 #ブロガー胡散臭い #FC2ブロガー #ブログカスタマイズ #FC2ブログ #ウェブページ遅延読み込み

こんにちは。FC2ブロガーのM（@yulari_happy ）です。今回は、記事タイトルに掲げた通り、content-visibility:auto;というCSSの話しを書こうと思います。

最近、たった1行のCSSコードを追加するだけで、ウェブページの読み込み速度を大幅に改善できる小技テクニックとして「content-visibility」が話題になっているようです。ネットニュースでも取り上げられ、Googleニュースのおすすめ記事になっていました。

そこで、ほんの数行のCSSで実装できる小技テクニック「content-visibility:auto;」は、ウェブページの読み込みを爆速にする方法としてどうなのか?実際に試してみたところ、どうやらW3Cエラーになってしまうみたい…。

散々、悪戦苦闘した結果、僕のFC2ブログ『ゆうらり』に使うことを断念せざるを得ませんでした。何故、途中でカスタマイズを中止することになったのか⁉︎

今回は「content-visibility:auto;」を題材に、技術系ブログの胡散臭い記事や情報に振り回された失敗談を書き記しておこうと思います。

そもそも、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という記事の冒頭には、執筆者がさも自慢げといった感じで自己紹介を次のように書いているからです。