サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2024年10月18日 14:12
お世話になります。
WP記事や編集を行う程度の初心者です。
現状について以下、私の分かる部分でリストアップ致しました。
改善方法についてご教授頂きます様お願い致します。
【不具合ページURL】
【エラー内容】
「PageSpeed Insights」や「LightHouse」でエラー頻発、原因・対処法が分からない。
診断結果が表示される時と、エラーが出る時もアリ。
※エラー発生時は【パフォーマンス】【ユーザー補助】【おすすめの方法】【SEO】の全4項目に【！】のマークが表示され、以下全指標にも【Error！】と表示。
【不具合報告に際し行った事】
・プラグインHealth Check & Troubleshootingにてチェック（親／子テーマ、個別プラグイン）OK診断済
※但し通常時からサイトヘルス上で表示される”永続オブジェクトキャッシュを使用してください”は放置状態
・cocoon高速化設定、無効化済
・全プラグイン無効化済
・サーバー（Xサーバー上でのXpagespeed解除済：Xアクセラレータver.2は解除せずそのままの状態）
【エラー改善のために行った事】
画像圧縮、高速化など分かる範囲で行うが、エラー改善が見られない。
先日プラグイン【FlyingScript】をインストールする事で、診断結果数値が表示される事が増えた（未だにエラー表示にもなる）。
【エラーが出ずに診断表示された時の問題・ヒント？】
問題の項目は【パフォーマンス】のみで、【ユーザー補助】【おすすめの方法】【SEO】の3項目については常に95～100と安定している。
※添付画像は読み込まれた時の画面表示
【個別の指標で個人的に特に気になる診断結果】
1. FCP (ファースト コンテンツ ペイント)ーレンダリングを妨げるリソースの除外 3940 ミリ秒短縮できます
Google Fonts CDN
2. LCP(最大コンテンツペイント)ー「最大コンテンツの描画」要素 8,460 ミリ秒
<div class="logo logo-header logo-text">
仮に1が阻害要因である場合、GoogleフォントというWebフォントを読み込まないようにするには？という対応方法も分からず、2の場合も、ヘッダー画像を入れていないにも関わらずナゼ？という疑問が膨らむばかりです。
良き改善策がございましたら、何卒お知恵をお授け頂きます様お願い致します。
----------------------------------------------
サイト名：汚部屋・ゴミ屋敷 片付けが出来ない方にこそ
サイトURL： https://obeya-kataduke.com
ホームURL： https://obeya-kataduke.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
スキン：/wp-content/themes/cocoon-master/skins/skin-tegakinote-white-banana/style.css
WordPressバージョン：6.6.2
PHPバージョン：8.2.22
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.7.8
カテゴリー数：10
タグ数：666
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：845 バイト
functions.phpサイズ：418 バイト
----------------------------------------------
Gutenberg：1
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：0
CSS縮小化：1
JavaScript縮小化：1
Lazy Load：1
----------------------------------------------
利用中のプラグイン：
Advanced Editor Tools 5.9.2
Broken Link Checker 2.4.1
EWWW Image Optimizer 7.9.0
Flying Scripts: Delay JavaScript to Improve Site Speed & Performance 1.2.3
WP Multibyte Patch 2.9
XML Sitemap & Google News 5.4.9
2024年10月18日 19:24
【エラー内容】
「PageSpeed Insights」や「LightHouse」でエラー頻発、原因・対処法が分からない。
診断結果が表示される時と、エラーが出る時もアリ。
※エラー発生時は【パフォーマンス】【ユーザー補助】【おすすめの方法】【SEO】の全4項目に【！】のマークが表示され、以下全指標にも【Error！】と表示。
これについてはFlying Scriptsの動作を阻害しているから出ている可能性があります。
【エラーが出ずに診断表示された時の問題・ヒント？】
問題の項目は【パフォーマンス】のみで、【ユーザー補助】【おすすめの方法】【SEO】の3項目については常に95～100と安定している。
これに関しては、AdSenseやGoogleタグマネージャー、GoogleAdSense、その他の外部スクリプトなどを使用しているとかなり点数が落ちるものです。
それらを使用しないなら良い点が出ますが、収益化サイトでそれらを使用しないのは本末転倒になるかと思います。
トピックスターター 2024年10月19日 12:58
ご返信ありがとうございます。
今もcocoon高速化および全プラグイン無効化状態をキープしております。
「PageSpeed Insights」再診断では全項目【！】エラー表示
「LightHouse」は診断表示されております（添付画像）
パフォーマンスの点数が低くなる事については理解しているのですが、このエラーだけは回避したいと思っております。
■このエラーを引き起こす要因として、先にも挙げてみましたがGoogleフォントとヘッダーロゴにあるのでは？？と思うのですが、cocoon上でフォント【指定なし】と設定していても読み込んでしまうのでしょうか？
可能であれば削除してしまいたいと考えております。
1. FCP (ファースト コンテンツ ペイント)ーレンダリングを妨げるリソースの除外 3940 ミリ秒短縮できます
Google Fonts CDN
■また以下の問題についても画像ではなくただのテキストでこんな影響を受けてしまうのか？という疑問と共に、一体何をどのように対処すれば回避できるのかと悩んでおります。
2. LCP(最大コンテンツペイント)ー「最大コンテンツの描画」要素 8,460 ミリ秒
<div class="logo logo-header logo-text">
よろしくご教授頂きます様お願い致します。
2024年10月19日 17:14
●回答
「PageSpeed Insights」再診断では全項目【！】エラー表示
図1のことを指しているかと思います。
【原因】
同様の内容が掲載されており、原因が述べられています。
https://division-web.atelier-ss-agency.com/10385/google-pagespeed-insights-opacity-0-error/
https://www.flying-h.co.jp/media/2023/04/05/no_lcp-error/
【対策】
以下が該当します。（てがきノートシリーズ）
ここをopacity:0.1とするとエラーは改善するかと思います。
cocoon上でフォント【指定なし】と設定していても読み込んでしまうのでしょうか？
【原因】
[Cocoon設定]→[全体]→サイトフォント「指定なし」としても、スキンが独自でGoogle Fontを読み込んでいます。
【対策】
[外観]→[カスタマイズ]→【スキン】日本語フォント設定「クレー(デフォルト)」となっているため（図2参照）、Google Fontが読み込まれます。
これを「設定なし」としてください。
先にも挙げてみましたがGoogleフォントとヘッダーロゴにあるのでは？？
言われるように、Webフォントファイルが大きいので、指摘されたと思われます。
私のページでは「設定なし」にすると、スコアが7点ほどアップしました。
honni110kantan and わいひら reacted
2024年10月19日 17:24
honni110kantanさん
chu-yaさんと重複しますけれど。
1. FCP (ファースト コンテンツ ペイント)ーレンダリングを妨げるリソースの除外 3940 ミリ秒短縮できます
Google Fonts CDN
ご利用のスキンで読み込んでいるかと思います。
スキン：/wp-content/themes/cocoon-master/skins/skin-tegakinote-white-banana/style.css
2. LCP(最大コンテンツペイント)ー「最大コンテンツの描画」要素 8,460 ミリ秒
<div class="logo logo-header logo-text">
私が確認した時は、ご提示いただいた箇所ではなく、以下が表示されました。
Webフォントだからではないでしょうか。（レンダリング遅延）
スコアばかりに囚われても、仕方ないようには思います。
体感的に遅いということであれば、気にするべきだと思いますけれど。
体感的に問題なければ、気にし過ぎる必要はないように、私は思います。
体感的に遅いということであれば、気にするべきだと思いますけれど。
体感的に問題なければ、気にし過ぎる必要はないように、私は思います。
私のスマホで4G回線でアクセスしてみましたが、遅いとは思いませんでした。
（むしろ、すんなり表示されているように思います。気になるとしたら、ふわっと表示される分くらいでしょうか）
（むしろ、すんなり表示されているように思います。気になるとしたら、ふわっと表示される分くらいでしょうか）
honni110kantan and わいひら reacted
2024年10月19日 17:33
スコアばかりに囚われても、仕方ないようには思います。
スコアそのものではなく、おそらくPageSpeed Insightsでエラーが表示されるため、フォントが原因ではないかと気にされたのではないでしょうか。
honni110kantan and わいひら reacted
2024年10月21日 01:30
[外観]→[カスタマイズ]→【スキン】日本語フォント設定「クレー(デフォルト)」となっているため（図2参照）、Google Fontが読み込まれます。
これを「設定なし」としてください。
↑全く関係ないですね。
＞わいひらさん
mk2さんが言われるように、無条件でてがきノートで使われるGoogle Font一式を読み込んでおり、望ましくないですね。
図1のことを指しているかと思います。
【原因】
同様の内容が掲載されており、原因が述べられています。
https://division-web.atelier-ss-agency.com/10385/google-pagespeed-insights-opacity-0-error/https://www.flying-h.co.jp/media/2023/04/05/no_lcp-error/
【対策】
以下が該当します。（てがきノートシリーズ）
ここをopacity:0.1とするとエラーは改善するかと思います。
上記部分を修正するか否か。
わいひら reacted
2024年10月21日 18:08
opacity:0については修正しました。
https://github.com/xserver-inc/cocoon/commit/75c2106cb4a0d9d6109a962f50c78d5c5812763c
ただ、Googleフォトに関してはスコア的には望ましくないかもしれませんが、作者さんが意図的にそのデザインにされていると思うので、そのままにしたいと思います。
この投稿は2か月前ずつわいひらに変更されました
2024年10月21日 18:28
その後、動作確認してみたら、カスタマイザーで別のフォントにしても余計に読み込まれるっぽい？ですね。
後で詳しく確認して、修正できそうなら修正しておきます。
2024年10月21日 19:36
てがきノート「ブルーコーラル」のみスキンでの日本語フォント設定「設定なし」にすると読み込まず。
簡単な方法で以下で可能では？
if (get_theme_mod('font_pattern_control','font_klee') !== 'font_none') {
echo '<link href="https://fonts.googleapis.com/css2?family=Kaisei+Decol&family=Kiwi+Maru&family=Klee+One&family=Zen+Kaku+Gothic+New&family=Zen+Maru+Gothic&family=Zen+Kurenaido&display=swap" rel="stylesheet">'."\n";
}
わいひら reacted
2024年10月21日 20:47
opacity:0については修正しました。
https://github.com/xserver-inc/cocoon/commit/75c2106cb4a0d9d6109a962f50c78d5c5812763c
てがきノートが修正されていることを確認しました。
honni110kantan and わいひら reacted
2024年10月21日 22:20
「ブルーコーラル」スキンとその他でコードが違うんですね。
よくよく見たら、「ブルーコーラル」以外は全てのフォントを一緒くたに読み込んでいるというのも含めて、めちゃくちゃ重たいのではないかと。
ttps://fonts.googleapis.com/css2?family=Kaisei+Decol&family=Kiwi+Maru&family=Klee+One&family=Zen+Kaku+Gothic+New&family=Zen+Maru+Gothic&family=Zen+Kurenaido&display=swap
コードは「ブルーコーラル」の仕様に合わせて条件分岐をつければ良いのかなと思います。
/*******************************
* WEBフォント設定
*******************************/
// Googleフォント読み込み（非同期化）
add_action('wp_head', 'adds_head');
function adds_head() {
$font_family = get_theme_mod('font_pattern_control', 'font_klee');
$font_url = generate_font_url($font_family);
if ($font_family !== 'font_none') {
echo '<link href="' . esc_url($font_url) . '" rel="preload" as="style">'."\n";
echo '<link href="' . esc_url($font_url) . '" rel="stylesheet" media="print" onload="this.media=\'all\'">'."\n";
}
}
// フォントのURLを生成する関数
function generate_font_url($font_family) {
$font_families = array(
'font_klee' =>'Klee+One:wght@600&display=swap',
'font_kaisei_decol' => 'Kaisei+Decol:wght@700&display=swap',
'font_zen_kusenaido' => 'Zen+Kurenaido&display=swap',
'font_zen_kaku_gothic' => 'Zen+Kaku+Gothic+New:wght@500&display=swap',
'font_zen_maru_gothic' => 'Zen+Maru+Gothic:wght@500&display=swap',
'font_kiwi' => 'Kiwi+Maru:wght@500&display=swap',
'font_none' => '', // 読み込むフォントがない場合は空文字にする
);
if (isset($font_families[$font_family]) && $font_family !== 'font_none') {
return 'https://fonts.googleapis.com/css2?family=' . $font_families[$font_family];
}
return ''; // 該当するフォントが見つからない場合も空文字にする
}
この投稿は2か月前 3回ずつわいひらに変更されました
トピックスターター 2024年10月22日 02:48
トピックスターター 2024年10月22日 02:59
@yhira さん
理解できているか自信があまりございませんが、要はブルーコーラルのスキン39行～68行をコピーの上、
私の使用しているホワイトバナナのスキンにペーストすれば良いという事なのでしょうか？
その場合の挿入場所は・・・？
皆さまのアドバイス内容についていけず、ちょっと心もとないです。。。
2024年10月22日 04:17
honni110kantanさん
もしかして、親テーマをカスタマイズなさっていませんか？
（スキンがたくさん見えますので、親テーマかな？と）
親テーマを修正した場合、親テーマをバージョンアップすると、全てカスタマイズは消えてしまいます。
（親テーマはバージョンアップ時に、インスト―ルされているものはフォルダごと削除され、配信された新しいバージョンに置き換わります）
カスタマイズは子テーマで行います。
（functions.phpを修正なさっているようですので、ご存知かとは思うのですが）
今いろいろ修正・ご対応くださっていますので、少しお待ちになってみてはと思います。
一通り対応が終わったところで、バージョンアップしていただければ、適用されるのですし。
その上で、honni110kantanさんのご都合にあわせ、個別にカスタマイズなさった方が良さそうに思います。
杞憂でしたらご放念ください。
honni110kantan and わいひら reacted
2024年10月22日 17:20
私の使用しているホワイトバナナのスキンにペーストすれば良いという事なのでしょうか？
その場合の挿入場所は・・・？
テーマ修正側の問題だったので、自前での何もしない方が良いかもしれません。
PageSpeed Insights対応版の親テーマと手書きスキンをGitHubにアップしました。よろしければこちらで試してみていただければ幸いです。
------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------
honni110kantan reacted
トピックスターター 2024年10月23日 10:24
@mk2_mk2 さん
親テーマいじっておりました。。。
皆さんにアドバイス頂いて箇所が子テーマに見当たらなかったため、これが正解の対処法だと思っておりました。
バージョンアップご対応頂けるのを待ち、進めたいと思います。
ありがとうございました。
2024年10月24日 14:49
ご確認いただきありがとうございます。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。