こんにちわ、ゆえっくま(@ux_bear)です。
SEOとも相性が良い、Web表示速度を上げる画像読み込みが、自動で設定されるWordPressプラグインとなって、Googleより公開されました。
Google Releases Native Lazyload Plugin for WordPressLazy-load (遅延読み込み)とは?
Webの表示速度向上技術のひとつ。
サイトに表示される画像を、必要に応じて必要な分だけ読み込む。
例えば、ニュースサイトで
✔️起動時に文字や構成だけ先に表示して、ユーザー操作できる状態にしておき
✔️ページ下にある画像は、スクロールに応じて表示する。
レイテンシー(物理的な表示速度)だけでなく、UX体感速度も上げることができます。
Google Botの進化により、SEOとも相性がいい実装となります。
今までも、jQueryなどで同様の”Lazy-loadプラグイン”はありましたが、
今回は、Google社より、JavaScriptなしで自動設定できるWordPressのプラグインの登場です。
WordPressで、Native Lazyloadを使うには?
【Native Lazyload 導入手順】
✔️「Native Lazyload」プラグインをインストールし、有効化します。
✔️<img>タグと、<iframe>タグに、自動的にloading=”lazy”属性が追加されます。
導入後にソースをみたら、HTMLに属性が追加されていました。
<img **/native-lazyload/assets/images/placeholder.svg"
alt="ゆえっくま"
width="150" height="150"
class="lazy" loading="lazy"
data-src="**.jpg/>
既存JavaScriptとの干渉もあり得るので、ちゃんと動作テストすることをオススメします。
僕の環境では、特に問題なく動いています。
関連書籍
リンク
リンク