投稿者:: @honni110kantan

↑

【エラー内容】

「PageSpeed Insights」や「LightHouse」でエラー頻発、原因・対処法が分からない。

診断結果が表示される時と、エラーが出る時もアリ。

※エラー発生時は【パフォーマンス】【ユーザー補助】【おすすめの方法】【SEO】の全4項目に【！】のマークが表示され、以下全指標にも【Error！】と表示。

これについてはFlying Scriptsの動作を阻害しているから出ている可能性があります。

投稿者:: @honni110kantan

↑

【エラーが出ずに診断表示された時の問題・ヒント？】

問題の項目は【パフォーマンス】のみで、【ユーザー補助】【おすすめの方法】【SEO】の3項目については常に95～100と安定している。

これに関しては、AdSenseやGoogleタグマネージャー、GoogleAdSense、その他の外部スクリプトなどを使用しているとかなり点数が落ちるものです。
それらを使用しないなら良い点が出ますが、収益化サイトでそれらを使用しないのは本末転倒になるかと思います。

ご返信ありがとうございます。

今もcocoon高速化および全プラグイン無効化状態をキープしております。

「PageSpeed Insights」再診断では全項目【！】エラー表示

「LightHouse」は診断表示されております（添付画像）

パフォーマンスの点数が低くなる事については理解しているのですが、このエラーだけは回避したいと思っております。

■このエラーを引き起こす要因として、先にも挙げてみましたがGoogleフォントとヘッダーロゴにあるのでは？？と思うのですが、cocoon上でフォント【指定なし】と設定していても読み込んでしまうのでしょうか？

可能であれば削除してしまいたいと考えております。

1.　FCP (ファースト コンテンツ ペイント)ーレンダリングを妨げるリソースの除外 3940 ミリ秒短縮できます

Google Fonts　CDN

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

■また以下の問題についても画像ではなくただのテキストでこんな影響を受けてしまうのか？という疑問と共に、一体何をどのように対処すれば回避できるのかと悩んでおります。

2.　LCP(最大コンテンツペイント)ー「最大コンテンツの描画」要素 8,460 ミリ秒

<div class="logo logo-header logo-text">

よろしくご教授頂きます様お願い致します。

●回答

投稿者:: @honni110kantan

↑

「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とするとエラーは改善するかと思います。

https://github.com/xserver-inc/cocoon/blob/33d88f1ab0f08b162da44d15a60063816224aefc/skins/skin-tegakinote-white-banana/keyframes.css#L4

投稿者:: @honni110kantan

↑

cocoon上でフォント【指定なし】と設定していても読み込んでしまうのでしょうか？

【原因】

[Cocoon設定]→[全体]→サイトフォント「指定なし」としても、スキンが独自でGoogle Fontを読み込んでいます。

【対策】

[外観]→[カスタマイズ]→【スキン】日本語フォント設定「クレー(デフォルト)」となっているため（図2参照）、Google Fontが読み込まれます。
これを「設定なし」としてください。

投稿者:: @honni110kantan

↑

先にも挙げてみましたがGoogleフォントとヘッダーロゴにあるのでは？？

言われるように、Webフォントファイルが大きいので、指摘されたと思われます。
私のページでは「設定なし」にすると、スコアが7点ほどアップしました。

honni110kantanさん

chu-yaさんと重複しますけれど。

投稿者:: @honni110kantan

↑

1.　FCP (ファースト コンテンツ ペイント)ーレンダリングを妨げるリソースの除外 3940 ミリ秒短縮できます

Google Fonts　CDN

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

ご利用のスキンで読み込んでいるかと思います。

投稿者:: @honni110kantan

↑

スキン：/wp-content/themes/cocoon-master/skins/skin-tegakinote-white-banana/style.css

https://github.com/xserver-inc/cocoon/blob/33d88f1ab0f08b162da44d15a60063816224aefc/skins/skin-tegakinote-white-banana/functions.php#L42

投稿者:: @honni110kantan

↑

2.　LCP(最大コンテンツペイント)ー「最大コンテンツの描画」要素 8,460 ミリ秒

<div class="logo logo-header logo-text">

私が確認した時は、ご提示いただいた箇所ではなく、以下が表示されました。

投稿者:: @mk2_mk2

↑

スコアばかりに囚われても、仕方ないようには思います。

スコアそのものではなく、おそらくPageSpeed Insightsでエラーが表示されるため、フォントが原因ではないかと気にされたのではないでしょうか。

@chu-ya さん

ご教授頂きありがとうございます。

最初は子テーマのskinで修正したところ、変化がなかったのでビビリながら親テーマ修正致しました。

バッチリ表示されました。

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

@mk2_mk2 さん

ご教授頂きありがとうございます。

1.　FCP (ファースト コンテンツ ペイント)に関して、ご指摘の42行目を削除で改善されました。

もう嬉しくて、嬉しくて・・。

一方、

2.　LCP(最大コンテンツペイント)-<div class="logo logo-header logo-text">にどうやって辿り着けばいいのか分からず、修正に至れませんでした。

ともあれ、診断結果が表示された事が何よりも嬉しく・・・

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

投稿者:: @chu-ya

↑

[外観]→[カスタマイズ]→【スキン】日本語フォント設定「クレー(デフォルト)」となっているため（図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とするとエラーは改善するかと思います。

https://github.com/xserver-inc/cocoon/blob/33d88f1ab0f08b162da44d15a60063816224aefc/skins/skin-tegakinote-white-banana/keyframes.css#L4

上記部分を修正するか否か。

opacity:0については修正しました。
https://github.com/xserver-inc/cocoon/commit/75c2106cb4a0d9d6109a962f50c78d5c5812763c

ただ、Googleフォトに関してはスコア的には望ましくないかもしれませんが、作者さんが意図的にそのデザインにされていると思うので、そのままにしたいと思います。

その後、動作確認してみたら、カスタマイザーで別のフォントにしても余計に読み込まれるっぽい？ですね。
後で詳しく確認して、修正できそうなら修正しておきます。

てがきノート「ブルーコーラル」のみスキンでの日本語フォント設定「設定なし」にすると読み込まず。

簡単な方法で以下で可能では？

https://github.com/xserver-inc/cocoon/blob/a427d83e60a8d981e2730b042fa942b6cf8809bb/skins/skin-tegakinote-dark-sky/functions.php#L42

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";
}

投稿者:: @yhira

↑

opacity:0については修正しました。
https://github.com/xserver-inc/cocoon/commit/75c2106cb4a0d9d6109a962f50c78d5c5812763c

てがきノートが修正されていることを確認しました。

「ブルーコーラル」スキンとその他でコードが違うんですね。
よくよく見たら、「ブルーコーラル」以外は全てのフォントを一緒くたに読み込んでいるというのも含めて、めちゃくちゃ重たいのではないかと。

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 ''; // 該当するフォントが見つからない場合も空文字にする
}

@chu-ya さん　Opacityについては0.1で修正済です。　ありがとうございます。

@chu-ya さん　

私の回答が正しいのか自信ありませんが、

https://github.com/xserver-inc/cocoon/blob/33d88f1ab0f08b162da44d15a60063816224aefc/skins/skin-tegakinote-white-banana/functions.php#L42

の件につきましては、@mk2_mk2さんにアドバイス頂いた内容に従い、【42行目】をバッサリ消去し、現状は添付画像の通りです。

@yhira さん

理解できているか自信があまりございませんが、要はブルーコーラルのスキン39行～68行をコピーの上、

私の使用しているホワイトバナナのスキンにペーストすれば良いという事なのでしょうか？

その場合の挿入場所は・・・？

皆さまのアドバイス内容についていけず、ちょっと心もとないです。。。

honni110kantanさん

もしかして、親テーマをカスタマイズなさっていませんか？
（スキンがたくさん見えますので、親テーマかな？と）

親テーマを修正した場合、親テーマをバージョンアップすると、全てカスタマイズは消えてしまいます。
（親テーマはバージョンアップ時に、インスト―ルされているものはフォルダごと削除され、配信された新しいバージョンに置き換わります）

カスタマイズは子テーマで行います。
（functions.phpを修正なさっているようですので、ご存知かとは思うのですが）
 

今いろいろ修正・ご対応くださっていますので、少しお待ちになってみてはと思います。
一通り対応が終わったところで、バージョンアップしていただければ、適用されるのですし。

その上で、honni110kantanさんのご都合にあわせ、個別にカスタマイズなさった方が良さそうに思います。

 
杞憂でしたらご放念ください。

投稿者:: @honni110kantan

↑

私の使用しているホワイトバナナのスキンにペーストすれば良いという事なのでしょうか？

その場合の挿入場所は・・・？

テーマ修正側の問題だったので、自前での何もしない方が良いかもしれません。

PageSpeed Insights対応版の親テーマと手書きスキンをGitHubにアップしました。よろしければこちらで試してみていただければ幸いです。

------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------

@mk2_mk2 さん

親テーマいじっておりました。。。

皆さんにアドバイス頂いて箇所が子テーマに見当たらなかったため、これが正解の対処法だと思っておりました。

バージョンアップご対応頂けるのを待ち、進めたいと思います。

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

@yhira さん

早速、お手引き通りに進め、手動アップデートが無事完了する事ができました。

この度はご対応頂き、本当にありがとうございました。

ご確認いただきありがとうございます。