Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

lozad.jsを実装したいが方法がわ...
 
共有:
通知
すべてクリア

[解決済] lozad.jsを実装したいが方法がわからない

9 投稿
3 ユーザー
5 Reactions
481 表示
 papi
(@papi)
Eminent Member Registered
結合: 2年前
投稿: 12
Topic starter  

lozad.jsを実装しようとしたのですが、知識がないまま調べて見よう見まねでやってみた結果うまくいきません。

調べると、実装する方法としてダウンロードやCDNを読み込むなどとありました。

とりあえずGitHubからzipファイルをダウンロードしました(添付ファイルの「Download ZIP」から)が、展開後のフォルダ内にたくさんのファイルがあり、どれをサーバーにアップして良いかわからず一旦断念し、「CDNを読み込む」という方法を試しました。

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

こちらをテーマエディターで追記したのですがうまくいかず、何度か試すうちにサイト自体がおかしくなってしまったのでバックアップでサイトを編集前の状態に戻しました。

 

質問の仕方が正しいかも判断できない知識量で大変恐縮なのですが、ダウンロードしたファイルを直接使う方法及びCDN読み込みの方法について教えていただけないでしょうか。

This topic was modified 1年前 by papi

   
引用
(@yamachan11)
Honorable Member Registered
結合: 5年前
投稿: 417
 

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

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

また、

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

 

This post was modified 1年前 2回 by Yamachan11

   
わいひら reacted
返信引用
 papi
(@papi)
Eminent Member Registered
結合: 2年前
投稿: 12
Topic starter  

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

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

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

 

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

 

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

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

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

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

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

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

This post was modified 1年前 by papi

   
返信引用
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

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 の利用はおすすめしません。

This post was modified 1年前 2回 by Akira

   
わいひら reacted
返信引用
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

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

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

This post was modified 1年前 by Akira

   
わいひら reacted
返信引用
 papi
(@papi)
Eminent Member Registered
結合: 2年前
投稿: 12
Topic starter  

Akiraさん

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

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

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

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

 

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

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

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

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

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

 

 


   
返信引用
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

@papi さん

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

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

---

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


   
わいひら reacted
返信引用
 papi
(@papi)
Eminent Member Registered
結合: 2年前
投稿: 12
Topic starter  

@Akira さん

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

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

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

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

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

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

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


   
返信引用
 papi
(@papi)
Eminent Member Registered
結合: 2年前
投稿: 12
Topic starter  

@Akira さん

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

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

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

 


   
わいひら reacted
返信引用
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました