説明
このプラグインはネイティブのブラウザの機能を使ってメディアを遅延ロードします。詳しくは新しい loading 属性の詳細を参照してください。また、 WordPress コアチケットでは、WordPress のコア自体に同様の実装を含めることが議論されています。
ブラウザで loading 属性がサポートされていない場合、プラグインは IntersectionObserver に基づく JavaScript を利用する方法にフォールバックします。 JavaScript が無効になっているが、ブラウザで loading 属性がサポートされている場合、それぞれの要素の noscript タグが追加されます。また、自動で loading 属性が追加されます。
ネイティブ = 高速
このプラグインを見つけたということは、あなたはおそらくウェブサイトのパフォーマンスがユーザー体験と成功にとってどれほど重要であるかを知っているでしょう。 また、遅延読み込みがパフォーマンスを改善するための重要な機能であることも知っていることでしょう。 ただし、これまでの遅延読み込みのソリューションは、カスタム JavaScript ロジックの読み込み、解析、実行に依存していたため、多少のオーバーヘッドが追加されていました。
このプラグインは主にこのパターンを廃止します。新しい loading 属性に依存しているため、ネイティブのブラウザ機能である遅延読み込みが可能になります。この属性は既に Chrome でサポートされており、今後他のブラウザにも展開されます。ソリューションが「ネイティブ」であるということは、これまでのような JavaScript のロジックに依存しないため、より軽量であることを意味します。 また、「軽量」とは「高速」をも意味します。
最後になりましたが、忘れてならないのは、 loading 属性をサポートするブラウザが時間とともに増えるにつれて、このプラグインは本質的に改善されていくということです。
使い方
このプラグインを有効化するだけで、投稿コンテンツ内の画像と iframe のすべてが遅延ロードされるようになります。
クレジット
このプラグインは WP Rig のロジックに一部基づいており、そのロジックは web.dev および developers.google.com からの推奨事項となっています。
インストール
native-lazyloadフォルダー全体を/wp-content/plugins/ディレクトリにアップロードするか、ダッシュボードの「プラグイン ＞ 新規追加」からダウンロードします。- WordPress の「プラグイン」メニューから有効化してください。
FAQ
- プラグインの設定画面はどこにありますか？
-
このプラグインには設定画面はありません。 有効化するだけでプラグインは機能します。
- 画像または iframe が遅延してロードされるのを防ぐにはどうすればよいですか？
-
class
skip-lazyを追加することで、特定の画像または iframe の遅延読み込みをスキップすることができます。 - このプラグインはまだ追加の JavaScript のファイルをロードしています！ 私にはそれは不要なのですが。
-
このプラグインは、ユーザーのブラウザがネイティブで
loading属性をまだサポートしていない場合のフォールバックとしてのみ JavaScript ファイルをロードする親切な設計になっています。 つまり、デフォルトではネイティブではない方法で画像を遅延ロードするロジックが含まれています。loading属性がある場合のみ遅延ロードを有効にしてフォールバックを提供したくない場合は、add_filter( 'native_lazyload_fallback_script_enabled', '__return_false');の行をサイトのコードベースで (訳注： functions.php などに) 追加することで簡単に無効にできます。 - これは AMP で機能しますか？
-
AMP を使用する場合、AMP はもともとメディアを遅延ロードするので実際にはこのプラグインは必要ありません。ただ、このプラグインは念のため AMP との互換性を損なわないように構築されています。
- サポートの依頼はどこに送信すればよいですか？
-
一般的なサポートについては、 wordpress.org サポートフォーラムを使用してください。プラグインに技術的な問題があり、その修正方法について既に詳しい情報がある場合は、代わりに Github のイシューを立てることもできます。
- プラグインに貢献するにはどうすればよいですか？
-
プラグインを改善したりバグを解決したりするアイデアがある場合は、プラグインのGithubリポジトリでイシューを立てるかプルリクエストを送信してください。その際にはコントリビュートガイドラインを遵守してください。
翻訳に協力してプラグインに貢献することもできます。始めるにはまず translate.wordpress.org にアクセスしてください。
評価
貢献者と開発者
変更履歴
1.0.2
- Fix broken images which are using data URI scheme (e.g. base64-encoded images). Props ieim.
- Fix images in IE 11 not being loaded until the user starts scrolling. Props Soean.
- Fix image loading script not working in IE10 and other browsers that do not support
dataset.
1.0.1
- より明確なクラスを使用し、JS フォールバックにのみ追加することで、他のプラグインとの互換性を向上します。
- Autoptimize のようなプラグインとの互換性を向上するため、必要に応じて
DOMContentLoadedで lazy-load スクリプトを実行します。 - Do not transform elements inside an AJAX response due to lack of predictability of the context and script execution.
1.0.0
- 最初のリリース