grayishスキン適用中

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カスタマイズ依頼

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

カルーセルの表示がAmazonの広告表...
 
共有:
通知
すべてクリア

[解決済] カルーセルの表示がAmazonの広告表示を待っている?

14 投稿
4 ユーザー
11 Likes
672 表示
(@benjamin)
Active Member Registered
結合: 2年前
投稿: 7
Topic starter  

お世話になります。

movable typeから初めてWPに移行してCocoonを使わせてもらっています。
なによりネット上での情報量が多いので助かっています。
七転八倒しながらなんとか移行できたのですが、1つ気になることがあります。

移行後にカルーセルの表示が1分程度遅れていたのですが、サイドバー下部のAmazonの広告の読み込みが遅いことがわかりました。
Amazonの広告画像をすべてLazyLoadにしたところ改善しました。
私の浅い理解だとWebコンテンツの表示は非同期だと思っていましたが、カルーセルだけがAmazonの広告表示を待っているのがなぜなのかが気になっています。

トップページに同バナー広告を貼っていますが、見た感じ広告表示をカルーセルの表示が待っているように見えます。
(AmazonのiframeにはLazeLoadが効かないのか、初期表示に見えないところに貼っても同じようにカルーセルの表示が遅れます)

試しに投稿のページには広告を貼っていないのですが、投稿ページのカルーセルはトップページよりも早く表示されているように思います。

できれば改善したいと思いますが、致命的というわけではありませんし、お忙しいのは予想に難しくないので、パッと回答できないような場合は調べて頂かないで結構です。

よろしくお願い致します。

 

対象サイト
https://yurugadge-channel.com/

環境情報
----------------------------------------------
サイト名:ゆるガジェCHANNEL
サイトURL: https://yurugadge-channel.com
ホームURL: https://yurugadge-channel.com
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン:5.9.1
PHPバージョン:7.4.25
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.4.1.1
カテゴリ数:17
タグ数:0
ユーザー数:3
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:15427バイト
functions.phpサイズ:203バイト
----------------------------------------------
Gutenberg:0
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:1
Retina:1
ホームイメージ:
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:1
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
Better Search Replace 1.3.4
Disable Comments 2.3.3
Gallery Custom Links 2.0.6
Movable Type and TypePad Importer 0.4
Native Lazyload 1.0.2
Revision Control 2.3.2
TinyMCE Templates 4.8.1
Widget Logic 5.10.4
XML Sitemaps 4.1.1
----------------------------------------------

 

 

This topic was modified 2年前 by benjamin

   
トピックタグ
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6679
 

benjaminさん

スマホからなもので調べてはいませんが。

以下のプラグインはアンインストールをお勧めします。

投稿者:: @benjamin

Native Lazyload 1.0.2

WordPress 5.5以降は、標準でネイティブLazyLoadに対応しており、プラグインを必要としません。

上記プラグインは2年も更新されておらず、最後に検証されたのは、WordPress 5.3.11です。

https://ja.wordpress.org/plugins/native-lazyload/

実質的にもう使われないプラグインだと思います。
(古いWordPressをお使いな方ならば・・・。)

コンフリクトして、弊害があるかもしれないです。
(このフォーラムで何度かこのプラグインを見ましたが、弊害があったと思います。)


   
(@benjamin)
Active Member Registered
結合: 2年前
投稿: 7
Topic starter  

@mk2_mk2さん
ご指摘ありがとうございます。

Amazonのifremeにlazy loadを効かせたいと色々と試行錯誤していた時にインストールしてそのまま忘れていました。
削除します。

ちなみに削除しても本件の動作には影響はないように見えます。

This post was modified 2年前 2回 by benjamin

   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6679
 

benjaminさん

すみませんが、スマホからなもので、本来のお問い合わせの件、まったく調べてないです。

現在はプラグイン削除済であれば、iframeも問題ない気がします。(以下しか見ていませんが。)

 
WordPress 5.7で、iframeもLazyLoadの対象になったような・・・。
 
 
スマホから見ても、仰る通りカルーセルが最後に表示されるようです。
ファーストビューだと思いますから、LazyLoadがなくても良いような気がしますが。
 
投稿ページも最後に表示されているように見えますね。

   
わいひら reacted
(@benjamin)
Active Member Registered
結合: 2年前
投稿: 7
Topic starter  

@mk2_mk2さん

今AmazonのバナーにLazyLoadを指定しているのは、初期表示されない位置に移動してみたりを試した時に指定したものがそのままになっています。その状態でchromeの開発者ツールでページの表示時間を見ていたのですが、初期表示しても下に移動してもページの表示時間は変わらなかったので、Amazonのiframeにはなぜか効かないと思った次第なのです。

最初に書きました通り、技術的な興味のほうが質問した理由として大きいので、特に急いで回答して頂く必要はありません。よろしくお願い致します。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16128
 

カルーセルはそのような表示になっているのはCLS対策です。
CLSについて詳しくはこちら。
https://web.dev/cls/
カルーセルは、CLSになるべく影響がないように、htmlを全て読み込んでから表示する仕様になっています。


   
benjamin reacted
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1645
 

おそらく、Amazon の画像が原因だと思います。

デベロッパーツールのコンソールに大量のエラーが出ます。ただ、何度かページの再読み込みを試したのですが、エラーが出ない時もありました。


   
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1645
 

デベロッパーツールのネットワークでも確認できます。

「ir-jp amazon」と検索したところ、いくつか情報が出てきます。

https://www.google.com/search?q=ir-jp+amazon


   
わいひら reacted
(@benjamin)
Active Member Registered
結合: 2年前
投稿: 7
Topic starter  

@akira さん

見ていただいてありがとうございます。

Amazonの1ピクセル画像は当初問題になっていましたが、Lazy Load指定にしてからカルーセルの表示には影響はないと思います。試しにサイドバーのAmazon広告を撤去してみても挙動はかわりありません。
デベロッパーツールのネットワークで見るとエラーにはなるのですが、カルーセルが表示されて少ししてからエラーの表示になります。
(なぜLazy Load指定しているのに初期表示時に読みに行くのか謎ですが)


   
(@benjamin)
Active Member Registered
結合: 2年前
投稿: 7
Topic starter  

@yhira さん

回答ありがとうございます。

CLSというのは認識がなかったので勉強になりました。

Amazonの広告を待っている訳ではなく、ページの描画全体を待っているのですね。
カルーセルは表示する画像によってサイズが変わるので、ページの初期表示後で画像表示することで、もし要素が動いてしまっても初期表示は終わっているからCLSの計測から逃れるみたいなイメージでしょうか。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16128
 

カルーセルはHTMLを読み込んだ後、JavaScriptを読み込む際にその描画最中に大きく位置がずれてしまうため、全て描画されてから表示するようにJavaScript処理を加えた感じだったと思います。


   
benjamin reacted
(@benjamin)
Active Member Registered
結合: 2年前
投稿: 7
Topic starter  

@yhira さん

なるほど。
お忙しいなか回答頂きありがとうございました。


   
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1645
 

なぜLazy Load指定しているのに初期表示時に読みに行くのか謎ですが

loading="lazy" は、初期表示(画面に表示されている領域)以外にある画像を読み込まないものではありません。どこまでの画像を読み込むのかは、ブラウザに任せられています。

例えば、Chrome は、以下の領域にある画像を読み込みます。

  • 4G などの高速回線の場合は、表示されている領域から、さらに 1250px 下にスクロールした地点まで
  • 3G などの低速回線の場合は、表示されている領域から、さらに 2500px 下にスクロールした地点まで

参考:Improved data-savings and distance-from-viewport thresholds

デベロッパーツールのネットワークで見るとエラーにはなるのですが、カルーセルが表示されて少ししてからエラーの表示になります。

net::ERR_CONNECTION_TIMED_OUT エラーだからです。

このエラーは、一般的に 30 秒以内に接続できない時に表示されます。つまり、エラーが表示される 30 秒前から接続ができていないわけです。


全て描画されてから表示するようにJavaScript処理を加えた

わいひらさんが、このようにおっしゃっています。違う言葉で言えば、画像などを含めページが完全に読み込まれてからカルーセルは表示されます。

裏返せば、カルーセルを速く表示するにはページの表示を速くすればいいわけです。そのため、私であれば以下のことを行います。

① コンソールのエラーは全て潰す(ただ、Amazon の画像のエラーの解消は無理)。

② Cocoon 設定 > 高速化にある全ての項目にチェックを入れる。

③ Cocoon 設定 > PWA タブにある「PWAを有効化する」にチェックを入れる。PWA が有効の場合、2 回目以降の表示速度がすごく速くなる。無効時と有効時では全く違う。


   
(@benjamin)
Active Member Registered
結合: 2年前
投稿: 7
Topic starter  

@akira さん

なるほど勉強になります。

まだページに表示されていない範囲の少し下の画像も読まれているなとは気がついていましたが、エラーの出ているAmazon広告はかなり下の方にあり、実際に商品画像はかなりスクロールが進んでから読み込まれていたので、同じ位置に貼られている1ピクセル画像だけが先に読まれているのがよくわからないなぁと思っていました。

Cocoonの高速化やPWAは本フォーラムに投稿するにあたってOFFにしていましたが、ご指摘の通りに全てONにしました。

ありがとうございました。


   
わいひら reacted
共有:

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

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

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

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

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

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

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

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