webpにloading=lazyは有効かどうか

2020-06-06Lighthouse SEO診断,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を指定していないとコンソールで注意が出るので、デザイン上の支障がなければ指定しておいた方が良さげです。

2020-06-06Lighthouse SEO診断,SEO

Posted by Yousuke.U