画像やiframeに「loading=”lazy”」を自動付与し遅延読み込みを有効化してくれるWordPressプラグイン「Native Lazyload」

画像やiframeに「loading=”lazy”」を自動付与し遅延読み込みを有効化してくれるWordPressプラグイン「Native Lazyload」

画像やiframeに「loading=”lazy”」を自動付与し遅延読み込みを有効化してくれるWordPressプラグイン「Native Lazyload」

Native Lazyloadは、画像やiframeに「loading=”lazy”」を自動的に付与して、遅延読み込みを有効化してくれるWordPressプラグインです。Googleが提供しています。

loading属性による遅延読み込みは、Google Chrome 76から公式にサポートされるようになりました。loading属性の指定方法については、こちらの記事に書いていますのでご参照ください。

Native Lazyloadを導入することで、簡単に画像やiframeの遅延読み込みに対応することができます。

Native Lazyloadのインストール

インストール手順は以下の通りです。

  1. Native Lazyloadをダウンロードします。
  2. ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。
  3. 管理画面の[プラグイン]ページで、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は最有力候補になるかと思います。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です