このプラグインは WordPress の最新3回のメジャーリリースに対してテストされていません。もうメンテナンスやサポートがされていないかもしれず、最新バージョンの WordPress で使用した場合は互換性の問題が発生する可能性があります。

Native Lazyload

説明

このプラグインはネイティブのブラウザの機能を使ってメディアを遅延ロードします。詳しくは新しい loading 属性の詳細を参照してください。また、 WordPress コアチケットでは、WordPress のコア自体に同様の実装を含めることが議論されています。

ブラウザで loading 属性がサポートされていない場合、プラグインは IntersectionObserver に基づく JavaScript を利用する方法にフォールバックします。 JavaScript が無効になっているが、ブラウザで loading 属性がサポートされている場合、それぞれの要素の noscript タグが追加されます。また、自動で loading 属性が追加されます。

ネイティブ = 高速

このプラグインを見つけたということは、あなたはおそらくウェブサイトのパフォーマンスがユーザー体験と成功にとってどれほど重要であるかを知っているでしょう。 また、遅延読み込みがパフォーマンスを改善するための重要な機能であることも知っていることでしょう。 ただし、これまでの遅延読み込みのソリューションは、カスタム JavaScript ロジックの読み込み、解析、実行に依存していたため、多少のオーバーヘッドが追加されていました。

このプラグインは主にこのパターンを廃止します。新しい loading 属性に依存しているため、ネイティブのブラウザ機能である遅延読み込みが可能になります。この属性は既に Chrome でサポートされており、今後他のブラウザにも展開されます。ソリューションが「ネイティブ」であるということは、これまでのような JavaScript のロジックに依存しないため、より軽量であることを意味します。 また、「軽量」とは「高速」をも意味します。

最後になりましたが、忘れてならないのは、 loading 属性をサポートするブラウザが時間とともに増えるにつれて、このプラグインは本質的に改善されていくということです。

使い方

このプラグインを有効化するだけで、投稿コンテンツ内の画像と iframe のすべてが遅延ロードされるようになります。

クレジット

このプラグインは WP Rig のロジックに一部基づいており、そのロジックは web.dev および developers.google.com からの推奨事項となっています。

インストール

  1. native-lazyload フォルダー全体を /wp-content/plugins/ ディレクトリにアップロードするか、ダッシュボードの「プラグイン > 新規追加」からダウンロードします。
  2. 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 にアクセスしてください。

評価

2020年12月31日
This plugin adds loading="lazy" and then, the browser lazy loads the image. I think that native lazy loading performed by the browser is the only viable solution for lazy loading. For many years, I tried to implement lazy loading on my websites. I faced many issues. Once images were not crawled. Once my website was penalized because of cloaking. Versions differed depending on the client. I am enough with javascript scripts that slow down the pageload and negatively impact the pagespeed insight. I think that for now and in the future, the native lazy loading is the only way to go for lazy loading.
2020年2月27日
First, did not break my site and it did lazyload most of the page images. It does not lazyload images if they are served from a different host. Example, unbounce, etc. I will add another caveat, all of my images and their versions are always carefully resized and highly compressed. Checked with lighthouse and my score took a hit downwards. 13 points down on performance score. I tested on my Staging area, uncached. FCP went from 2.1s to 4.2s, all of the other metrics, including time to interactive, CPU idle, speed index and First Meaningful Paint took a dive. I will chuck this to I was already hyperoptimized and lazy loading is not truly needed on my site/s. But I would advise others to try it out (not on their live site) and test speed with Google Lighthouse before and after.
2020年2月17日
Seems to work well. On browsers that don't support lazy loading, it doesn't seem to load the images as soon as I would like. As in there can be a bit of a delay between scrolling and the image appearing on screen. Not to bad though. Not going to worry about it as native image loading is the way of the future and will be implemented into more browsers.
31件のレビューをすべて表示

貢献者と開発者

Native Lazyload はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。

貢献者

“Native Lazyload” は16ロケールに翻訳されています。 翻訳者のみなさん、翻訳へのご協力ありがとうございます。

“Native Lazyload” をあなたの言語に翻訳しましょう。

開発に興味がありますか ?

コードを閲覧するか、SVN リポジトリをチェックするか、開発ログRSS で購読してみてください。

変更履歴

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

  • 最初のリリース