サイトを高速化するテクニックとして知られる、画像のLazyload（遅延読み込み）。
imgタグに次の属性を付加することで実現できます。
loading="lazy"
Chrome・Edge・Firefox・Safariなど主要ブラウザはこれに対応しています。
かつては一括で記述するのに、functions.phpに記述したり、プラグインを利用したり、手動で行う必要がありました。
しかし、WordPress 5.5以降では記事本文内の画像に対して loading=”lazy” が自動付与されるようになります。
いまやWeb制作においては、Lazyloadを意識することすらなくなったかもしれません。
だったら、これで記事終わり？
……というわけでもありません。
サイト高速化やCore Web Vitalsについて調べていると loading=”eager” や fetchpriority=”high” といった属性を見かけることがあります。
lazyもあわせて、これらには意味があり、使い分けが必要となります。
本記事では、それぞれの違いと使い分けについて整理します。
本記事の要点
ざっくりまとめると、こんな感じです。
WordPressでサイトを作るとき、
・loading=”lazy”：基本つける
・loading=”eager”：知らなくても困らない
・fetchpriority=”high” ：記事先頭のアイキャッチには基本つける
loading=”lazy”と loading=”eager” の違い
まずは基本知識。
lazyとeagerの違いについて説明します。
- loading=”lazy”：遅延読み込み
- loading=”eager”：優先読み込み
型どおりにいえばこれだけであり、知識としてはシンプルです。
大事なのは、これらをどう使い分けるかです
loading=”lazy”と loading=”eager” の使い分け
loading=”lazy”を「使わない」場面
WordPressでサイトを制作するなら記事本文内の画像にはloading=”lazy”が自動付与されます。
では、
UX（ユーザー体験）を上げる観点から、画像の遅延読み込みは当たり前と考えられるからです
そのため、仮に付与されていなくとも付与するのが原則となります。
この概念をおさえておくと、以下の説明の理解が深まります。
例外として、画像の遅延読み込みをさせない箇所もあります。
LCP（Largest Contentful Paint）画像は原則としてloading=”lazy”を外します。
LCPは、画面内で最も大きなコンテンツ（画像やテキストブロックなど）が表示されるまでの時間。
ざっくり、
「LCP＝ファーストビューの快適さ」と捉えていただければ大丈夫です
サイトを訪問したときのことを考えてみてください。
サイトをロードしたら記事は直ぐに出てくる、しかしアイキャッチ部分にぽっかり巨大な空間が空いたまま。
「ええっ！」と驚くかもしれませんし、「読み込み遅っ！」と呆れるかもしれませんし。
いずれにしたところで、いい感情を抱かないであろうことは想像に難くありません。
loading=”lazy”をつけるのはUXを上げるため。
そのため、UXを下げると考えられる箇所ではloading=”lazy”をつけないという考え方になります。
loading=”eager”を使う場面
実はなのですが、
WordPressのサイト制作だと、loading=”eager”を使うことは通常ありません。
属性を指定する意味が薄いからです。
最近のブラウザは賢いので、eagerを指定しようとすまいと挙動があまり変わらないんです。
ただし「書かないのが一般的」＝「書くのが間違い」ではない点には御注意ください。
書いても書かなくてもどちらでも問題ありません。
しかしNuxtなどのフレームワークを使った制作ですと、意図的に loading=”eager”を使うことがあります。
デフォルトがloading=”lazy”になっている場合に、loading=”eager”を入れて打ち消します。
WordPressで個人サイトを制作するくらいでしたら loading=”eager”を知らなくとも問題はさほどありません。
ただ、最近はWordPressからNuxtなどに移行する制作会社も増えてきています。
そうした環境で働く、あるいはその可能性のある方は、頭の片隅に入れておくといつか役立ちます。
fetchpriority=”high”の役割と使いどころ
実務ですと loading=”eager”ではなく、fetchpriority=”high”を用いる方が一般的です。
fetchpriority=”high”：読み込みの優先度指定
これを指定すると真っ先に読み込まれます。
適切にしていすることでサイト速度の体感を上げることができ、UXの改善に役立ちます。
具体的には、次のケースで用います。
- アイキャッチ
- その他、ページ先頭付近の目立つ画像
まとめ
実務的に、本記事で大事と言いうるのはLCPについてです。
- LCPが悪いときは、記事先頭アイキャッチなどに loading=”lazy”がついてしまっていないか疑う
- 記事先頭アイキャッチには fetchpriority=”high”をつける。
- loading=”eager”はWordPressなら書いても書かなくても構わない
私としては、loading=”lazy”、loading=”eager”、fetchpriority=”high”で大事なのは属性そのものの知識ではない。
どういう使い方をするかを知ることだと考えています。
ただ、案外盲点になっているかも？と思ったので記してみました。
お役に立ちましたなら幸いです
VPSは、もう「黒い画面」だけじゃない。
「VPSは難しそう」と諦めていませんか？ ConoHaのKUSANAGIなら、ブラウザ上の管理画面（KUSANAGI Manager）で、ドメイン設定からSSL発行まで直感的に操作可能です。
コマンド操作なしで世界最速級の環境を構築できる、今の時代の初心者にとっての最適解。私が長年愛用している理由がここにあります。
※当サイト経由で新規申し込みいただくと、特典として1000円分のクーポンをもらえます。