ネイティブ Lazyload がウェブ標準になりました。 ホームページ制作 大阪の株式会社TREVO｜SEO対策・システム作成

ホームページ（ウェブサイト）上で画像などの読み込みを遅延する技術が ウェブ標準となりました。

ウェブ標準となったことで、chromeでサポートされている（loading=lazy）属性が各ブラウザへの実装される可能性が高くなりました。

Lazyloadがウェブ標準となった事で何が変わるのか？

これまで、Lazyloadの設定はjavascriptを使用して、画像やiframeなどにタグを追加して制御していました。

Chrome76からサポートは開始していたのですが、対応していないブラウザがほとんどで、javascriptの読み込みが必要だったり、コーディング時の設定も面倒でした。

firefoxはtwitterで、開発版に実装したとツイートしていたので、今後アップデートされるのも時間の問題と思います。

Native image lazy-loading (<img loading=lazy>) working in @FirefoxNightly! An early look… 🦊 pic.twitter.com/yX0nHr2VSp

— Addy Osmani (@addyosmani) February 13, 2020

ウェブ標準となった事で、その他のブラウザが実装してくるのは時間の問題だと思います。

これで JavaScript の読み込みが不要になる事は嬉しいです。

Lazyload と SEO対策の関係

ホームページの表示（読み込み）速度は、SEO対策情とても大切な要素の１つです。

画像やgooglemap(iframe)などのコンテンツは容量が重く、読み込むのに時間がかかってしまうので、Lazyload で読み込むタイミングを遅延する事で表示速度をあげることができます。

googleのページスピードを計測する、PageSpeed Insightsやホームページのパフォーマンスを計測する web.dev では、Lazyload の設定をしていないとスコアが落ちて警告が出ます。

弊社のブログ、「Googleが提供しているホームページチェックツール」の記事でも紹介しています。

GoogleはWordPress用のプラグインを出しています。

Google純正のWordPress用のLazyload設定プラグインが公開されています。

これまで、SEO対策用の画像圧縮系のプラグインなどでは、Lazyload の設定は一般的でした。

今後、ホームページ制作でも標準の技術となりそうです。

常に進化しているホームページの技術

ホームページの技術は常に進化しており、PageSpeede Insight や web.dev で高得点を出しても数ヶ月、数年後には点数が下がっていることが多いです。

ホームページの構造自体をアップデートし続けないとSEO対策でも効果が出ないことがあります。