サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2022年2月27日 13:40
お世話になります。
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 3年前 by benjamin
2022年2月27日 14:06
benjaminさん
スマホからなもので調べてはいませんが。
以下のプラグインはアンインストールをお勧めします。
Native Lazyload 1.0.2
WordPress 5.5以降は、標準でネイティブLazyLoadに対応しており、プラグインを必要としません。
上記プラグインは2年も更新されておらず、最後に検証されたのは、WordPress 5.3.11です。
https://ja.wordpress.org/plugins/native-lazyload/
実質的にもう使われないプラグインだと思います。
（古いWordPressをお使いな方ならば・・・。）
コンフリクトして、弊害があるかもしれないです。
（このフォーラムで何度かこのプラグインを見ましたが、弊害があったと思います。）
Topic starter
2022年2月27日 15:26
@mk2_mk2さん
ご指摘ありがとうございます。
Amazonのifremeにlazy loadを効かせたいと色々と試行錯誤していた時にインストールしてそのまま忘れていました。
削除します。
ちなみに削除しても本件の動作には影響はないように見えます。
This post was modified 3年前 2回 by benjamin
2022年2月27日 15:40
benjaminさん
すみませんが、スマホからなもので、本来のお問い合わせの件、まったく調べてないです。
現在はプラグイン削除済であれば、iframeも問題ない気がします。（以下しか見ていませんが。）
WordPress 5.7で、iframeもLazyLoadの対象になったような・・・。
スマホから見ても、仰る通りカルーセルが最後に表示されるようです。
ファーストビューだと思いますから、LazyLoadがなくても良いような気がしますが。
投稿ページも最後に表示されているように見えますね。
わいひら reacted
Topic starter
2022年2月27日 18:42
@mk2_mk2さん
今AmazonのバナーにLazyLoadを指定しているのは、初期表示されない位置に移動してみたりを試した時に指定したものがそのままになっています。その状態でchromeの開発者ツールでページの表示時間を見ていたのですが、初期表示しても下に移動してもページの表示時間は変わらなかったので、Amazonのiframeにはなぜか効かないと思った次第なのです。
最初に書きました通り、技術的な興味のほうが質問した理由として大きいので、特に急いで回答して頂く必要はありません。よろしくお願い致します。
2022年2月27日 18:57
カルーセルはそのような表示になっているのはCLS対策です。
CLSについて詳しくはこちら。
https://web.dev/cls/
カルーセルは、CLSになるべく影響がないように、htmlを全て読み込んでから表示する仕様になっています。
benjamin reacted
2022年2月27日 21:57
デベロッパーツールのネットワークでも確認できます。
「ir-jp amazon」と検索したところ、いくつか情報が出てきます。
https://www.google.com/search?q=ir-jp+amazon
わいひら reacted
Topic starter
2022年2月28日 18:43
@akira さん
見ていただいてありがとうございます。
Amazonの1ピクセル画像は当初問題になっていましたが、Lazy Load指定にしてからカルーセルの表示には影響はないと思います。試しにサイドバーのAmazon広告を撤去してみても挙動はかわりありません。
デベロッパーツールのネットワークで見るとエラーにはなるのですが、カルーセルが表示されて少ししてからエラーの表示になります。
(なぜLazy Load指定しているのに初期表示時に読みに行くのか謎ですが)
Topic starter
2022年2月28日 18:47
@yhira さん
回答ありがとうございます。
CLSというのは認識がなかったので勉強になりました。
Amazonの広告を待っている訳ではなく、ページの描画全体を待っているのですね。
カルーセルは表示する画像によってサイズが変わるので、ページの初期表示後で画像表示することで、もし要素が動いてしまっても初期表示は終わっているからCLSの計測から逃れるみたいなイメージでしょうか。
2022年2月28日 19:18
カルーセルはHTMLを読み込んだ後、JavaScriptを読み込む際にその描画最中に大きく位置がずれてしまうため、全て描画されてから表示するようにJavaScript処理を加えた感じだったと思います。
benjamin reacted
2022年3月1日 00:21
なぜ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 回目以降の表示速度がすごく速くなる。無効時と有効時では全く違う。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。