Native Lazyload：ブラウザの機能で遅延読込できる
ブラウザに実装されている機能を使って画像の遅延読み込みができる WordPress 用プラグインの紹介です。
それは「Native Lazyload」です。
そのインストール手順から日本語化・使い方と設定などを解説していきます。
Native Lazyload
Native Lazyload は、Google Chrome 76 以降で実装された loading 属性を使って画像の遅延読み込みができます。
loading 属性は、Web ブラウザーでネイティブに遅延ロードをサポートし、
img 要素や iframe 要素を簡単に遅延ロードさせることができます。
loading 属性をサポートしていない Web ブラウザーでアクセスされると、
同梱されているフォールバックスクリプトで、
既存の Javascript を利用した遅延ロードを自動的に行なってくれます。
プラグインを有効化するだけで機能します。
このプラグインは Google 純正のプラグインです。
記事を作成もしくは更新時点でのバージョン：v 1.0.1
マルチサイトでの利用:可
Gutenberg エディターでの動作
Gutenberg エディターに追加される機能は無いので、気にする必要は無いです。
インストール手順
下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化するか
Native Lazyload – WordPress.org
もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面から入手できます。
ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「Native Lazyload」と入力します。
検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
※一番左上に表示されない場合は、上記の画像から探して下さい。
インストールが完了したら、プラグインを「有効化」します。
プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。
WordPressプラグインのインストール手順を解説 – WordPress活用術
日本語化
Native Lazyload は、バックグラウンドで動作します。
専用メニュー・設定画面も含めて何も無いので、日本語化を気にする必要は無いです。
専用メニュー
Native Lazyload に専用メニューは無いです。
使い方
プラグインを有効化するだけで機能するので、使い方は特にありません。
class に skip-lazy を追加すると、
その画像または iframe の遅延読み込みをスキップすることができます。
フォールバックスクリプトを無効にすることもできます。
function.php などに下記のコードを記述するだけです。
add_filter( 'native_lazyload_fallback_script_enabled’, '__return_false’ );