Chrome76より実装されたLoading属性に対応させるプラグイン「Native Lazyload」

Chromeに実装されているLoading属性を実装するWordPressプラグイン「Native Lazyload」がGoogleからリリースされていましたので早速当サイト使用してみます。このプラグインの使い方は非常にシンプルで、プラグインのインストール後、有効化するだけで機能します。
Native Lazyloadのダウンロードはこちら

Loading属性はChrome76からサポートされた機能でHTMLにloading="lazy"を追加するだけで画像とiframeを遅延ロードさせることができます。ブラウザの機能なので対応ブラウザ（Chrome76以降のみ：2019年9月時点）はJavaScriptを利用しなくても遅延ロードが可能になります。個人的には他のブラウザにもサポートしていただけたらと思います。
下の画像が実際Native Lazyloadを利用した場合の<img>タグのソースです。loading="lazy"が追加されていますね。

LazyLoadに対応していないブラウザは？

LazyLoadに対応していないブラウザはフォールバックとしてJavaScriptのIntersectionObserver APIを利用した遅延ロードになります。このJavaScriptを使用せず、loading属性のみで使用したい場合はfunctions.phpに以下のコードを追加してください。

LazyLoadを適用したくない場合

Native LazyLoadを適用したくない画像やiframeにはclassにskip-lazyを追加するとその画像やiframeには適応されません。自分は投稿内の画像のみ遅延ロードさせたいと思ったので、アイキャッチの画像やヘッダー画像にはLazyLoadを適用させていません。この辺りはサイトの管理者によって考え方があるかと思いますので適時対応してください。

このプラグインの注意点

最後に注意点として、loading="lazy"を直書きしている画像では画像がロードされないということがありました。（自分の環境だけ？）その場合は直書きのloading="lazy"を削除て対応しました。他にも、スライダー系のScriptを使用している際、画像に遅延ロードを適用させると、スライダーが動作するたびに画像が一瞬消えてから表示されるという現象が起きました。この場合は遅延ロードを適用させないようclassにskip-lazyを追加し対応しました。

この辺りの症状もプラグインのアップデートで解消されていくとありがたいですね。