SEO | webpにloading=lazyは有効かどうか
次世代画像フォーマットとされGoogleが推奨している静止画像ファイル形式「WebP」。
LighthouseでのSEO診断やPageSpeed Insightsでも評価基準となっている様に、次世代画像フォーマットはGoogleのSEOの観点からも有効とされており、WebPファイルは最近では良く見かけるようになってきました。
とわいえ、まだSafari、iOSではWebPが未対応なので、現状ではjpg、pngファイルも用意してpictureタグを使い以下の様に記述している人も多いと思われます。
<picture>
<source type="image/webp" srcset="file.webp" />
<img src="file.jpg" />
</picture>picture、sourceを利用した上記のHTMLの場合、WebP対応ブラウザであればwebp、未対応ブラウザならjpgにて表示されます。
これまたgoogleがChrome系ブラウザで利用可能にしたlazylordの「loading="lazy"」はWebPファイルにも有効なのか検証してみたところ、imgタグの中にloading="lazy"を指定しておけばWebP表示時もlazylordが機能している事がわかりました。
<picture>
<source type="image/webp" srcset="file.webp" />
<img src="file.jpg" loading="lazy" width="" height=""/>
</picture>loading="lazy"はsourceタグに指定するのではなく、imgタグに指定します。
結果としては、上記の記述で表示されているのはwebpの場合であっても、スクロールに応じて順に読み込まれていくことが確認できました。
また、余談ですがloading="lazy"はwidthとheightを指定していないとコンソールで注意が出るので、デザイン上の支障がなければ指定しておいた方が良さげです。