lozad.jsで何を実現したいのでしょうか？

もし、Lazy loading（画像の遅延読み込み）が目的であるのなら、
lozad.jsは不要です。（WordPress5.5～辺りから）
WordPressの機能として備わっています。

また、

Cocoonの高速化設定から、これ以外の遅延読み込みのサポートもしています。

videoタグのmp4を遅延読み込みさせたいためです。

遅延読み込みさせたい理由は、動画を載せているページへの初回アクセス時にvideoタグ部分の表示が添付の画像のようになってしまうという現象が発生しているためです。

初回アクセス時は画像のようになりますが、リロードされると正しく表示されるので、HTML自体の記述が間違っているわけではなく、動画データがキャッシュされさえすれば表示されるという状態だと想定しています。（ここも知識不足であまり分かっていませんが..）

これまでに、キャッシュ系のプラグインを試したり、cloudflareの利用などを試しましたが効果がなく、ページの読み込み後に動画ファイルが読み込まれるようにすれば良いのではと考え遅延読み込みを実装してみたい、というのが背景です。

遅延読み込みの方法としてlozad.jsを検討するに至ったのは、これまでに

・videoタグにposter属性で画像を設定し読み込み完了するまで表示する内容を指定する

・posterと同じような考えで動画ソース後に#t=0.1と記述してみる

・preload属性を追加して遅延読み込みさせる

・遅延読み込みプラグイン「a3 lazy load」利用

など試したのですがいずれも効果がなかったためです。

Lozad.js であれば、Cocoon 親テーマに同梱されています。

cocoon/plugins/lozad.js-master

Cocoon 設定 > 高速化 の「Lazy Loadを有効にする」が無効の場合は、lib/utils.php をご参考に読み込めば使えます。コードは子テーマの functions.php に追加します。

add_filter( 'wp_enqueue_scripts', function() {
  wp_enqueue_script( 'my-lazy-load-js', get_template_directory_uri() . '/plugins/lozad.js-master/dist/lozad.min.js', [], false, true );
  $data = 'const observer = lozad(".lozad", {rootMargin: "0px 500px 500px"});observer.observe();';
  wp_add_inline_script( 'my-lazy-load-js', $data, 'after' );
});

もし、ご自身でダウンロードしたものをお使いになる場合は、dist に入っているどれかを使います。

• lozad.es.js : ES Modules で書かれたものです。
• lozad.js : CommonJS で書かれたものです。
• lozad.min.js : lozad.js を縮小したものです。

どれを選べばいいのか分からない場合は、最後の lozad.min.js をお選びになるといいと思います。

もし、CDN を利用される場合は、子テーマの tmp-user/head-insert.php にでも <script> をお書きになればいいと思います。ただ、CDN の利用はおすすめしません。

<video> を遅延読み込みするのはいいと思います。preload 属性だけでは不十分な場合があるためです。

ただ、その症状と遅延読み込みが関係あるのか？と疑問に思います。実際にその動画を見れば何か分かるかもしれません。

Akiraさん

丁寧にご説明くださりありがとうございます。

>Lozad.js であれば、Cocoon 親テーマに同梱されています。

ということはCocoon 設定 > 高速化 の「Lazy Loadを有効にする」にチェックが入っていればlozad.js実装に等しい状態になっているということでしょうか。

もしそうなのであれば、そこもすでに試しているのでおっしゃる通り遅延読み込みは関係ないのかもしれません。

動画ファイルのサイズ等が関係する可能性もあるのでしょうか。

サーバーサイドに疎くわからないのですが、ファイルサイズが大きかったら読み込みに時間がかかることはあっても正しく読み込めないことはないように思うんですがそういうわけでもないんでしょうか。

動画はメディアとしてサーバーにアップロードしているものではなく、Twitterに投稿した動画をmp4化しているものです。

Twitterの埋め込み等を入れると表示スピードに悪影響が出ることは理解していますが、今起きている現象の原因になり得るんでしょうか。

同じようにTwitterに投稿された動画をmp4形式でサイトに載せているサイトをいくつか見つけてソースを見たりしているのですが大きな違いは発見できず、試す方法として思いついていたもので最後に残っていた（実装できず試すことができていなかった）のがJavascriptによる遅延読み込みでした。

@papi さん

ということはCocoon 設定 > 高速化 の「Lazy Loadを有効にする」にチェックが入っていればlozad.js実装に等しい状態になっているということでしょうか。

Cocoon の遅延読み込みは、<img> と <iframe> が対象です。<video> は遅延読み込みされません。そのため、Example with video のように <video> を変更する必要があります。

---

実際に拝見しないと何とも言えません。その動画があるページの URL のご提示は難しいでしょうか。同じ症状が出るテスト環境でも構いません。

@Akira さん

>Cocoon の遅延読み込みは、<img> と <iframe> が対象です。

そうなんですね。教えていただいてありがとうございます。

今出先ですぐに試せないのですが、videoの遅延読み込みは試してみようと思います。

>実際に拝見しないと何とも言えません。

そうですよね。対象ページ自体の共有は難しいのでテスト環境を作って確認していただきたいです。

こちらもすぐに準備ができないので、もしお時間やタイミングが合った時に見て頂ければと思います。

すぐに対応できず申し訳ありません。

@Akira さん

ご相談させていただいた件ですが、サイトを管理運用しているのは私なのですが所有者が別であるためそちらに確認したところテスト環境を作成して情報を公開することに難色を示されてしまったため、実際に見ていただくことができなくなってしまいました。

親身に色々と教えていただいたのにも関わらず申し訳ございません。

一旦は当初の質問である「lozad.jsを実装したいが方法がわからない」という疑問は解消していただいたので、こちらを試すことにします。