サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2023年4月1日 08:54
@yhira 様
引き続きお手数をお掛けしております。
子テーマのCSS変更程度ではLCP遅延を想定しずらいこと理解しました。
1)functions.phpのようなPHPのカスタマイズはされていないのでしょうか?
記憶の限りでは、追加CSS以外に手を加えていないつもりですが。。。確証は。。。
これについては、functions.phpの更新日を添付の通り、確認してみました。これがエビデンスとなり、同ファイルに手を加えていないことが実証されることを望みます。
2)子テーマの最新バージョンを1.1.3にする
mk2様のご提示方法(PHPのバージョンを下げる)で、503が回避できたのですが、念のためと、LCP改善に少しでも近づくかと思い、Cocoon子テーマを1.1.1→1.1.3にバージョンアップしました。
style.css ですが、手を独自に加えていない記憶があり、目視でも、1.1.1と1.1.3をチェックし、不動であることを確認し、1.1.1に置き換えることなく、そのまま1.1.3にしております。
こちらは、期待通りいかず、LCP改善には至っておりません。
該当の「投下資本利益率(ROIC: Return on Invested Capital)」に関し、Query Monitorによる計測値は、5.41s でした。
宜しくお願い致します。
トピックスターター 2023年4月5日 09:27
LCP課題について、他に関連しそうな点で思いつくものを挙げさせて頂きたく存じます。
ウィジットで、CTAボックスを300超作成しております。
上記の「投下資本利益率(ROIC: Return on Invested Capital)」にも設定しておりまして、1ページ1つのように配置しております。
最近は、WordPressダッシュボード>外観>ウィジット の反応速度がかなり遅くなっております。(読み込みが終わるのに10秒以上待つ感じです。
CTAボックスの多用が負荷をかけているのではないでしょうか? →もしそうなら使用を控えるか、この反応速度を甘受するかどちらかと思えてきました。
他にも点検すべき点がございましたら、アドバイス宜しくお願いします。
2023年4月5日 20:14
最近は、WordPressダッシュボード>外観>ウィジット の反応速度がかなり遅くなっております。(読み込みが終わるのに10秒以上待つ感じです。
確かにその状態だと管理画面のウィジェットページが遅いのは確かにそうかもしれません。
公開ページもそうなのかと言うと、管理画面のウィジェットページよりは早いと思いますが、条件分岐がそれだけできる分、設定しないよりは確実に遅くなるような気がします。
前回「親テーマのみ」で動作確認した際、管理画面のウィジェットエリアに設定したウィジェットは外れていましたでしょうか。
ウィジェットが外れて「使用停止中のウィジェット」にそのCTAウィジェットが大量に入っていた場合、速くなっていたとしたら納得できます(ウィジェット設定が原因の可能性が高い)。
「親テーマのみ」を使用していたとしてCTAウィジェットが各ウィジェットエリアに入ったままなのに表示スピードが速くなったのならウィジェット設定が原因でない可能性が高いという切り分けはできるかもしれません。
この投稿は2年前ずつわいひらに変更されました
トピックスターター 2023年4月6日 09:32
調査法の糸口をご提示いただきありがとうございます。
<現況報告>
複数のウィジェットをしている中で、302個のCTAアクションを「投稿本文中」→「使用停止中」にドラッグアンドドロップした上で、PageSpeed Insight で反応速度を計測いたしました。
ウィジェットの変更を確実なものにしようと、1)ウィジェット画面を再読み込み、2)テーマを切り替え、すると、ドラッグアンドドロップした結果が作業前のものに戻り、ウィジェット設定が不安定な中、簡易な方法が分からないので、ひとつずつ手作業でドラッグアンドドロップ作業を3回繰り返しました。後述にある通り、同様のテストを繰り返すのはちょっと大変です。。。自分のことなので必要ならばやるべきですが。。。
添付ファイルにある通り、302個のCTAアクションを外すと、
該当の「投下資本利益率(ROIC: Return on Invested Capital)」について、
●PageSpeed Insight計測結果
Cocoon親テーマ/ウィジェット有 5.1s
Cocoon親テーマ/ウィジェット無 0.97s
という改善結果が示されました。
ここから、下記のように打ち手と、その打ち手の具体程方法について可能でございましたらアドバイス頂きたく存じます。
1)LCP対応方針
1-1)本サイトのLCPの問題:4秒超 の重大な真因のひとつに ウィジェットの多用(1頁1様で302個のCTAアクション)が考えられると推定する - この推定の正誤と確実性についてコメント頂きたく。
1-2)その他の理由も考えられるが、とりあえずの対応策として、「ウイジェット:CTAアクション」を別の実現策に置き換えてサイトパフォーマンスを経過観察する
1-3)「ウイジェット:CTAアクション」を別の実現策に置き換えるにあたり、適切な方法を教えて頂けないでしょうか。当方は、1頁1様で設定する編集方針を貫徹したいと考えておりますので、302ページを改変する手間は厭いません。各ページごとに記述するならば、それほどパフォーマンスに悪くないと推測しています。パフォーマンスに影響しなければ1頁ずつ設定してく方法で全く問題ありません。
例えば、❶フォーマットをご指導・ご提示頂けたなら、それを再利用ブロックに登録して呼び出し、個別設定はその都度編集する、❷プラグインを使用する(「Easy Call To Action」など)、❸CTAアクションといっても、サーバ内からExcelファイル等をダウンロードしてもらうための機能だから、ファイルブロックとその他のブロックで装飾を自作して、グループ化して使いまわす、等を考えました。
2)ウィジェット画面の動作確認
2-1)何度もドラッグアンドドロップ作業を繰り返しては元に戻るという現象に見舞われたので、同じようなことが再発しないようにするにはどうすればよいのかアドバイスございませんか。当方の推測として、あまりに常識外の数のウィジェットを使用したので、メモリか何かの不都合でオーバーフローを起しただけだから、今後は使用数を控えるので、同様の事象は起きないと安心してよいのか、別のクリティカルな原因がありそちらを解決する必要があるのか、まあ妥当な不具合なので放置でよいかの判断が頂ければ幸いです。
2-2)もし私が知らないだけで存在していればということで構いませんが、通常は、302個のウィジットをひとつずつ手でドラッグアンドドロップをしなくても、「使用停止中」に移せる方法があるのでしょうか。こちらは、何回も上記のようなテストを実施するのでなければ、今後は滅多に面倒なことにならないと思うので、現行スペックで何か便利な方法がないですか、という安易な確認レベルの質問です。
本件、長々と書き連ねてすみません。
宜しくお願いします。
2023年4月6日 17:52
2-2)もし私が知らないだけで存在していればということで構いませんが、通常は、302個のウィジットをひとつずつ手でドラッグアンドドロップをしなくても、「使用停止中」に移せる方法があるのでしょうか。
ウィジェットエリア「投稿本文上」に、[C]CTAボックスを多数、投稿IDごと表示設定をし、配置しているかと思います。
[Cocoon設定]→[ウィジェットエリア]→除外ウィジェットエリア
チェックすると、ウィジェットエリア自体が除外され。(チェックを止めると元に戻り)
結果、配置したウィジェットを全て「使用停止中」にする事と同義かと思います。
わいひら reacted
2023年4月6日 21:04
1-3)「ウイジェット:CTAアクション」を別の実現策に置き換えるにあたり、適切な方法を教えて頂けないでしょうか。
●手順
Chromeのデベロッパーツールで、ウィジェット[C]CTAボックスの部分を
右クリック→[コピー]→[要素コピー]
でまるごとコピーし、投稿ページのカスタムHTMLブロックに貼り付ける。
●[C]CTAボックスのレイアウト
同じレイアウトなら以下をグループ化すれば同じだと思います。
同じレイアウトなら以下をグループ化すれば同じだと思います。
- 段落(CTA見出し)
- 2カラム(左にインライン画像、右にCTAメッセージ)
- ボタン(CTAボタンテキスト、CTAボタンURL)
もしくは上記のウィジェットのコードをカスタムHMTLブロックにコピペ。
ブロック変換して、再利用ブロックにす方法もあるかと。
ブロック変換して、再利用ブロックにす方法もあるかと。
わいひら reacted
固定ページ 2 / 2
前へ
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。