このサイトは再三触れている通りNuxt/ContentとBulmaを組み合わせて作り出されています。といってもNuxt/ContentはMarkdownをHTMLに変換しそれをNuxt.jsに渡すという機能がメインなので、Nuxt.jsに関する諸々は自分で書かないといけないんですよね。
Nuxt.jsはドキュメントが充実しているので困ることは基本的に無いのですが、そもそも私のHTMLに対する認識が間違っていると少し困ったことが発生することがあります。さて、世の中には私のようなポンコツが適当に書いたHTMLが文法的に正しいのかをチェックするツールがあります。その中でも有名なものの一つにW3Cによる「Markup Validation Service」があります。というわけで今回はW3Cのツールに投げて出てきたエラーを潰したという話を書いていこうかと思います。
article
今回はタフォニについて解説した記事のURLを試しにW3Cのツールに投げてみました。するとそれなりのエラーと警告が出てきました。悲しいですね。
取り敢えず解決が楽そうなエラーを探してみるとこのようなエラーが出てきました。
The
mainelement must not appear as a descendant of thearticleelement.
このエラーを素直に読み解くと「main要素はarticle要素よりも下位にあってはいけない」となります。ちなみに改善前のHTMLはこんな感じです。
<article>
<section>
<h1>
hogehoge
</h1>
</section>
<main class="columns">
<div class="column is-8 m-4">
<div class="content">
<nuxt-content :document="articles" />
</div>
</main>
</article>
私はarticle要素は「記事そのもの」を表現するもので、記事の内部にメインの内容であったり著者の情報が含まれていたりするものだと思っていました。そのためなぜこのようなエラーが出たのかが理解できませんでした。不思議に感じながらMDNの解説ページを見てみるとこんなことが書いてありました。
HTML の article 要素は文書、ページ、アプリケーション、サイトなどの中で自己完結しており、 (集合したものの中で) 個別に配信や再利用を行うことを意図した構成物を表します。
つまりarticle要素は「記事そのもの」を表現するものというよりは、「サイトの中での構成物」を表現するものということらしいです。ここの認識が誤っていたので文法的に誤ったHTMLを書いてしまっていたようです。そのため応急的ではありますが通常のdiv要素に置き換えておきました。このページをF12ツールで見るか、URLの頭にview-source:を付けて見ると直っているのが確認できるかと思います。
Lazy Load
モダンなブラウザにはLazy Loadといった機能が存在しています。簡単にこの機能を説明すると、loading="lazy"という属性が付けられた画像はページを読み込んだ瞬間ではなく、実際にその画像が掲載されている位置にたどり着いた時に初めて読み込まれるといったものです。Lazy Loadを使用すると多くの場合において重い画像の読み込みを遅らせることが出来、ロード時間を短く感じさせることが可能です。体感速度を上げるよりもそもそもの画像の使用量を減らした方がいいと思っているので「Lazy Loadを使ってサイトを高速化！」みたいな胡散臭い記事はあまり好きではないですが。
このサイトではライセンス表記で用いられる画像の読み込みに使用しており、特にスマートフォンなどの画面が細長い端末の場合は下部にライセンスの画像が置かれるため体感速度の向上に役立つと考えています。しかしながらその実装を間違えていたため、実際にはLazy Loadされていなかったということがついでに発覚しました。
Cloudflare Web Analyticsのスクリプトをブロックしている環境下でのネットワークタブなので実環境とは少々異なるかとは思いますが、注目していただきたいのはライセンスを示す画像である88x31.pngの読み込み開始タイミングです。この計測を行った際、意図的にページ幅を狭くし本来Lazy Loadが行われているなら読み込みが行われないようにしているのですが、残念ながら読み込まれてしまっています。
私はloading="lazy"という属性を付けた全ての（もはや古い呼び名ですが）ブロック要素は遅延読み込みされると思っていました。しかしながらMDNの「読み込みが速い HTML ページを作成するための豆知識」を読んでみると、直接的ではないですがこの属性はimg要素に付けた時のみ機能するという風に読み取ることが出来ます。というわけで今までdiv要素に付けていたloading="lazy"をimg要素にもつけてみました。するとこのような読み込みがなされるようになりました。
ローカル環境で行っているのでさらに実際の環境とはかけ離れているかと思いますが、ページが出てきたタイミングでは読み込みされないように設定することが出来ました。わずかだとは思いますが体感速度が向上していれば幸いです。
最後に
極めてどうでもいいゴミ記事だとは思うのですが、将来の私がどこでミスったのかを確認するための備忘録として公開させてください。記事のストックの足しにもなるし。
