サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2023年4月1日 00:13
はじめまして。
（ずいぶん昔に一度書き込ませていただいたことがありますが、
アカウント名など忘れてしまったので、改めて登録させていただきました）
◆要望
SEO対策、LCPの向上のために、おすすめカードの画像に
「loading="lazy"」ではなく「loading="eager"」を
付与できるようにしてほしいです。
◆参考URL
https://bucci.bp7.org/archives/48326/
◆経緯
長くCocoonを利用させていただいておりましたところ、
昨年末ごろから急に検索順位が下落し始めました。
色々と原因を究明していると、参考URLにもある通り、
・画像に「loading="lazy"」の属性が自動的に付与され、
遅延読み込みが発生していること
・それが、読み込み直後に最初に表示される画面領域内の画像にも適用され、
遅延読み込みされるようになってしまうので、
LCPが低下してしまうこと
が原因ではないかと考えるようになりました。
この現象がいつから起こり始めたのか、
正確な日時はわかりませんが、
順位が下落し始めたのは昨年の11月ごろからだと記憶しています。
調べたところ、最近のWordpress（5.9あたり）から、
「loading="lazy"」が自動的に付与されるように仕様変更された、
という話もどこかで見かけました。
なので、現状はおそらく、Wordpressの仕様変更のために、
全ての画像に自動的に「loading="lazy"」の属性が付与されているために、
読み込み直後に最初に表示される画面領域内に画像が使用されていると、
LCPが低下してしまうことになるのではないかと考えています。
◆対策
そこで、対策として、
・読み込み直後に最初に表示される画面領域内に
使用されていた画像は、基本的に削除しました。
（画面デザインを大幅に変えました）
・それでも、cocoonの機能である「おすすめカード」は使いたかったので、
おすすめカードに表示される画像を画面の外に追い出すため、
cocoonの機能の「アピールエリア」にテキスト情報をたくさん記入して
表示エリアを下に長く伸ばして、
おすすめカードを画面外に追い出しました。
これにより、読み込み直後に最初に表示される画面領域内から画像がなくなったので、
LCPが改善されました。
◆要望の趣旨
おすすめカードを、読み込み直後に最初に表示される画面領域内に表示したいです。
しかし、そのためには、ここに使用されている画像から「loading="lazy"」の属性を外し、
「loading="eager"」の属性を付与する必要があるものと思われますが、
私にはどうやったらそれができるのかわかりませんでした。
また、参考URLの方法を試しても、「loading="eager"」の属性を付与することはできませんでした。
さらに、これが、Wordpressの仕様なのか？cocoonの仕様なのか？
それともやり方が間違っているのか？ということもわからず、
とりあえず「おすすめカードを画面外に追い出す」という方法で間に合わせている状態です。
ですので、「loading="lazy"」を解除できるようにしていただけると助かります。
よろしくお願いいたします。
----------------------------------------------
サイト名：ーーー
サイトURL：ーーー
ホームURL：ーーー
コンテンツ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
スキン：/wp-content/themes/cocoon-master/skins/skin-mixred/style.css
WordPressバージョン：6.1.1
PHPバージョン：8.1.17
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36
サーバーソフト：LiteSpeed
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：ja,en-US;q=0.9,en;q=0.8,fr;q=0.7
----------------------------------------------
テーマ名：Cocoon
バージョン：2.5.4.2
カテゴリ数：70
タグ数：107
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：845バイト
functions.phpサイズ：2958バイト
----------------------------------------------
Gutenberg：1
AMP：1
PWA：0
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/uploads/2022/05/logo.png
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------
2023年4月1日 23:08
長くCocoonを利用させていただいておりましたところ、
昨年末ごろから急に検索順位が下落し始めました。
こちらの原因が以下だとはちょっと考えづらいです。
色々と原因を究明していると、参考URLにもある通り、
・画像に「loading="lazy"」の属性が自動的に付与され、
遅延読み込みが発生していること・それが、読み込み直後に最初に表示される画面領域内の画像にも適用され、
遅延読み込みされるようになってしまうので、
LCPが低下してしまうことが原因ではないかと考えるようになりました。
というのもサイトスピードはランキング要因の一つにはありますが重要度はかなり低いと思うからです。
GoogleのWebスパムチーム/品質管理チームの責任者であるマット・カッツ(Matt Cutts)氏は、「もしあなたのサイトが本当に本当に遅くて異常なくらいだったり、（スピードの点で）底辺に位置していたりしたら、そのときは、ページ速度が理由でランキングが低くなるとことがたしかにあるかもしれない」と言及しており、よっぽどサイトが遅くないと影響しないと思われるからです。
添付画像をご参照ください。
引用元： https://www.seohacks.net/blog/1046/
コンテンツやドメインの影響に比べたらスピードの影響するものは非常に微々たるものでloading程度のものでランキングに影響があるとはちょっと考えられないです。
Googleのアルゴリズム変更が原因と考えるのが一般的かと思います。
This post was modified 2年前 by わいひら
2023年4月1日 23:21
しかし、そのためには、ここに使用されている画像から「loading="lazy"」の属性を外し、
「loading="eager"」の属性を付与する必要があるものと思われますが、
私にはどうやったらそれができるのかわかりませんでした。
/lib/html-forms.phpの以下の部分を編集することで変更できるかと思います。
https://github.com/xserver-inc/cocoon/blob/500a32e9ebea9c5c13a958530fcc2b341ccbc7ec/lib/html-forms.php#L1561
親テーマを編集してみて変更することで何か変わりますでしょうか？
Topic starter
2023年4月3日 09:13
わいひら様
ご教示いただきありがとうございます。
/lib/html-forms.phpの以下の部分を編集することで変更できるかと思います。
https://github.com/xserver-inc/cocoon/blob/500a32e9ebea9c5c13a958530fcc2b341ccbc7ec/lib/html-forms.php#L1561
親テーマを編集してみて変更することで何か変わりますでしょうか？
やってみましたが、結果に変わりはありませんでした。
（なお、「Cocoon設定」の「高速化」のチェックをはずし、
さらに他のプラグインにもlazyloadに関するものがありますが、
動作させないように設定した上での結果です）
というのもサイトスピードはランキング要因の一つにはありますが重要度はかなり低いと思うからです。
については、おっしゃるように複合的な要因だとは思いますが、
添付ファイルにお示ししたGoogle search consoleのグラフと、
検索順位の下落時期に相関性があるために、
ＬＣＰの改善を急務と考えております。
2023年4月3日 11:53
@january さん
Cocoon も WordPress も loading 属性を付けるため、どちらも無効にしないといけないと思います。
以下のコードを子テーマの functions.php に追加するのが手っ取り早いと思います。おすすめカードの 1 つ目の画像から loading="lazy" を削除する内容です。
add_filter( 'get_recommend_cards_tag', function( $tag ) {
$tag = preg_replace('/loading="lazy"/', '', $tag, 1);
return $tag;
});
ちなみに、年末年始には Google 検索のアップデートがありましたよね。
This post was modified 2年前 by Akira
わいひら reacted
Topic starter
2023年4月3日 14:50
@akira 様
ありがとうございます。
あとから属性を削除することは考えてもいませんでした。
preg_replace('/loading="lazy"/', '', $tag, [画像の枚数]);
最後の引数を画面内の画像の枚数に設定し、
おかげさまで、おすすめカードを表示したままLCPを維持し、
競合を圧倒できる読み込み速度になりました。
しばらく様子を見て、順位が上昇しなければ、
コンテンツの見直しをしていきます。
どうもありがとうございました。
2023年4月3日 17:19
親テーマを変更しながら気が付いたのですが、WordPress 6.1 から <img> に decoding="async" が付くようになったのですね。
参考：
- Performance Field Guide for WordPress 6.1
- Add async decoding attribute as default to the HTML image tags generated by WordPress
設定解説ページが404、webp、lazyなど のご要望も考えれば、loading="lazy" も decoding="async" もテーマ側で付けないのがいいかもしれないと思いました。
わいひら reacted
2023年4月3日 19:28
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。