Native Lazyloadは、画像やiframeに「loading=”lazy”」を自動的に付与して、遅延読み込みを有効化してくれるWordPressプラグインです。Googleが提供しています。
loading属性による遅延読み込みは、Google Chrome 76から公式にサポートされるようになりました。loading属性の指定方法については、こちらの記事に書いていますのでご参照ください。
Native Lazyloadを導入することで、簡単に画像やiframeの遅延読み込みに対応することができます。
Native Lazyloadのインストール
インストール手順は以下の通りです。
- Native Lazyloadをダウンロードします。
- ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。
- 管理画面の[プラグイン]ページで、Native Lazyloadを有効化します。
Native Lazyloadの使い方
Native Lazyloadに設定画面はありません。プラグインを有効化すれば、自動的に記事内の画像やiframeに「loading=”lazy”」が追加されます。
遅延読み込みさせたくない要素については、以下のように「skip-lazy」クラスを追加してあげましょう。
<img src="images/sample.jpg" alt="" class="skip-lazy">
さらに、loading属性に対応していないChrome以外のブラウザではJavaScriptによる遅延読み込みが提供されます。そのため、すべてのブラウザで遅延読み込みが実装されることになります。
JavaScriptによるフォールバックを無効化したい場合は、functions.phpに以下を追記します。
add_filter( 'native_lazyload_fallback_script_enabled', '__return_false' );
あとがき
単純にloading属性を追加するだけでなく、未対応ブラウザへの対応も考えられていて素晴らしいですね。
プラグインの提供元もGoogleということで、これから遅延読み込みを実装しようと思った時は、Native Lazyloadは最有力候補になるかと思います。