Webページを高速化するためのHTML要素×5

ローカルSEOにChatGPT。口コミ返信をチャットAIで効率的に作る方法【SEO情報まとめ】[Web担当者Forum]

ウェブページの表示速度を向上するためのHTMLのポイントを5つ、グーグルのエンジニアであるアディ・オスマニ氏がツイッターで紹介していた。

Modern HTML has many performance controls:

🔑 Prioritize a key image: <img fetchpriority=high>
💤 Lazy-load images: <img loading=lazy>
🌐 Warm connections to origins: rel=preconnect
🕐 Fetch late-found resources: rel=preload
⏭️ Fetch next-page navigations: rel=prefetch pic.twitter.com/tbpwChnskn

— Addy Osmani (@addyosmani) June 4, 2023

順に簡潔に説明すると、次のようなものだ：

●HTML内のimg要素に指定する最適化：
＜img fetchpriority=high＞ ―― fetchpriority=high属性をimgタグに設定すると、ブラウザはその画像を高優先度で取得する。重要な画像を真っ先に表示できる（実験的機能で、現時点ではChrome・Edgeのみ対応）。

●＜img loading=lazy＞ ―― loading=lazy属性をimgタグに設定すると遅延読み込みさせられる。画面外の画像は読み込まれず、スクロールして表示されそうになったときに初めて読み込まれる。不要な画像を読み込まないのでファーストビューの表示速度が速くなる。

●HTML内のheadにlink要素で指定する最適化：
rel=preconnect ―― 指定したオリジン（ドメイン名）と事前にネットワーク接続を確立するので、そのオリジンからのリソース取得が速くなる。

●rel=preload ―― 指定したリソースをブラウザは早期に読み込む。すぐに必要になるリソースをすぐに読み込むことによりページのパフォーマンスが良くなる。

●rel=prefetch ―― ブラウザがバックグラウントで（アイドリング中に）次に移動するであろうページのリソースを先読みしておく。そのページに実際に移動したときにはリソースがすでに取得されているので、速く表示できる。

SEOコンサルタントのまとめ

【Webページを高速化するためのHTML要素】[アディ・オスマニ氏]
●HTML内のimg要素に指定する最適化：
＜img fetchpriority=high＞ ―― fetchpriority=high属性をimgタグに設定すると、ブラウザはその画像を高優先度で取得する。重要な画像を真っ先に表示できる（実験的機能で、現時点ではChrome・Edgeのみ対応）。
●＜img loading=lazy＞ ―― loading=lazy属性をimgタグに設定すると遅延読み込みさせられる。画面外の画像は読み込まれず、スクロールして表示されそうになったときに初めて読み込まれる。不要な画像を読み込まないのでファーストビューの表示速度が速くなる。
●HTML内のheadにlink要素で指定する最適化：
rel=preconnect ―― 指定したオリジン（ドメイン名）と事前にネットワーク接続を確立するので、そのオリジンからのリソース取得が速くなる。
●rel=preload ―― 指定したリソースをブラウザは早期に読み込む。すぐに必要になるリソースをすぐに読み込むことによりページのパフォーマンスが良くなる。
●rel=prefetch ―― ブラウザがバックグラウントで（アイドリング中に）次に移動するであろうページのリソースを先読みしておく。そのページに実際に移動したときにはリソースがすでに取得されているので、速く表示できる。