前略、うさぎ先生 さん

私もあまり詳しくないので、的が外れている質問かもしれませんが、Cocoon設定の「画像」タブの「サムネイルをRetinaディスプレイ対応にする」のチェックの有無は、どのようになさっていますか？

また、環境情報にプラグインの部分がありませんが、キャッシュ系のプラグインはお使いになられていますか？

リフィトリーさん、早速ありがとうございます。

画像タブは、添付のような状態になっております。

環境設定は途中で切れてしまったようです……お知らせくださりありがとうございます！

どれがキャッシュ系にあてはまるか判断できないので、再度貼らせていただきます。

----------------------------------------------
サイト名：うさぎ先生のひきだし。
サイトURL： https://usagi-artteacher.com
ホームURL： https://usagi-artteacher.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-ganchan13/style.css
WordPressバージョン：5.6
PHPバージョン：7.4.13
ブラウザ：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Safari/605.1.15
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja-jp
----------------------------------------------
テーマ名：Cocoon
バージョン：2.2.5.7
カテゴリ数：14
タグ数：11
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.0
style.cssサイズ：17325バイト
functions.phpサイズ：6391バイト
----------------------------------------------
Gutenberg：1
AMP：1
PWA：0
Font Awesome：4
Auto Post Thumbnail：1
Retina：1
ホームイメージ：/wp-content/uploads/2020/04/usagiartteacher-header-light-6.jpg
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：1
CSS縮小化：1
JavaScript縮小化：1
Lazy Load：1
WEBフォントLazy Load：0
----------------------------------------------
利用中のプラグイン：
AddQuicktag 2.5.3
AdSense Invalid Click Protector 1.2.5.1
Aurora Heatmap 1.4.11
Category Order and Taxonomy Terms Order 1.5.7.4
Contact Form 7 5.3.2
DeMomentSomTres Export 20200610
Enable Media Replace 3.5.0
EWWW Image Optimizer 6.0.0
Google XML Sitemaps 4.1.1
Invisible reCaptcha 1.2.3
Marker Animation 4.1.1
Optimize Database after Deleting Revisions 5.0.3
Phoenix Media Rename 2.3.0
Regenerate Thumbnails 3.1.4
UpdraftPlus - Backup/Restore 1.16.46
WP Multibyte Patch 2.9
Yoast Duplicate Post 4.0.2
----------------------------------------------

これで途切れずに貼れているかと思います。

よろしくお願いいたします。

うさぎ先生 さん

前述させていただきましたとおり、あまり詳しくないのですが、「Retinaディスプレイ」は、通常の２倍の解像度を表現できるディスプレイだったと記憶しています。

と、いうことは、通常のサムネイル画像の２倍の画像のサイズが必要だということになるのだろうと推測します。

なので、試してみることとしては、

1．「サムネイルをRetinaディスプレイ対応にする」のチェックを外して、「変更をまとめて保存」のボタンをクリックして、変更を確定して、スマホ表示と、「Page Speed Insights」の計測を行ってみる。

2.　それでも、改善しないときは、「サムネイルをRetinaディスプレイ対応にする」のチェックを外した状態で「Regenerate Thumbnails」でサムネイル画像の再生成を行って、「Page Speed Insights」の計測を行ってみる。

という感じでしょうか。

小さなサイズのサムネイル画像がもともと生成されていない場合は、１.の作業だけでは、改善しないかもしれません。

ただ、サムネイル画像の再生成は、全ての画像が意図したとおりにならないケースも過去のトピックを読んでいるとあるみたいです。

また、時間を経てから、適用されるケースもありました。

ですので、サムネイル画像の再生成を行うときは、自己責任にてお願いいたします。

また、上記の作業で改善する保証をする訳ではありません。もちろん、別の原因という可能性もない訳ではありません。

そんな感じです。すみません。

あ、キャッシュ系のプラグインはちょっと見た感じでは、お使いになっていないようです。

うさぎ先生 さん

私の環境のFirefoxのデベロッパーツールで見てみると、モバイル表示のエントリーカードのサムネイル画像は、367×206 px のものを読み込んでいるみたいです。

私も知らなかったのですが、「Page Speed Insights」って、リアルタイム反映ではないみたいです。

よくある質問

ですので、結果は しばらくお預けでしょうか。

うさぎ先生さん

ちなみに、Cocoonのサムネイル画像の生成はPHPで制御されているようなので、CSSでのサイズ指定は、生成されるサムネイル画像のサイズとは、直接の関係は無いみたいです。

カスタマイズする際のヒントをテーマ作者様がご提示くださっていますが、PHPでのカスタマイズなので、サポートの対象には入らないようです。

自己責任にて、ということみたいですね。

Cocoon各部分のサムネイルサイズを変更するカスタマイズサンプル集

リフィトリーさん、いろいろと詳しく教えてくださりありがとうございます！

Retinaのチェックを入れる→大きな画像を使わざるを得ない（＝重くなる）、ってことなんですね。

そして、Page Speed Insightsには時差もあるんですね！

カルーセルの付け外しをした時にはCLSにすぐ反映されていたので、画像などもすぐに反映されると思い込んでしまいました。

CSSでサイズ調整できたように見えているのは仮の姿というか、大きな画像を無理に小さくしている（？）ってだけで、本来はPHPでのカスタマイズ→再生成が必要なのですね。

そもそも「モバイルだと1024pxになる」のが普通のことなのか、おかしいのか、どっちなのかが分からないっていうのも思っています。サイズ調整しないデフォルトのエントリーカードの状態で1024pxのサイズが出ているっていうことは、もしかしてこれ（モバイルのサムネが1024px）が普通なのかも？！という気もしてきて……

みんながみんなPHPでサイズ調整をして軽くしている、ということはないんだろうしという(^_^;)

うさぎ先生 さん

Retinaのチェックを入れる→大きな画像を使わざるを得ない（＝重くなる）、ってことなんですね。

私も大雑把な理解しかないのですが、それはそのとおりなのだろうと思います。

そして、Page Speed Insightsには時差もあるんですね！

カルーセルの付け外しをした時にはCLSにすぐ反映されていたので、画像などもすぐに反映されると思い込んでしまいました。

すみません。「Page Speed Insights」については、該当ページに書いてあること以外は、私もよくわかりません。

ただ、「Page Speed Insights」にしてもサーチコンソールにしても、何かしらのプログラムで結果を判定しているはずなので、そのプログラムによる判定結果になるのだろうと思います。

プログラムである以上は、長所や欠点もあるはずなので、大きな会社が提供しているから、と言って、全てが正確であるとは限らないと考えた方が良いと、私は思います。（もちろん、重要な指標であり、ありがたい指標でもあるとは思いますが・・）

大きな会社が提供していると、なんだか物凄く信頼を寄せても良いような雰囲気になってしまいがちですが、その辺りは、冷静にみないといけないところもあるのかと思います。

CSSでサイズ調整できたように見えているのは仮の姿というか、大きな画像を無理に小さくしている（？）ってだけで、本来はPHPでのカスタマイズ→再生成が必要なのですね。

これも、あまり詳しくはないのですが、CSSで表示サイズを変更しても、生成されるサムネイル画像のサイズは変わらないような気がします。

そもそも「モバイルだと1024pxになる」のが普通のことなのか、おかしいのか、どっちなのかが分からないっていうのも思っています。サイズ調整しないデフォルトのエントリーカードの状態で1024pxのサイズが出ているっていうことは、もしかしてこれ（モバイルのサムネが1024px）が普通なのかも？！という気もしてきて……

私のサイトは、サムネイル画像のアスペクト比を正方形にしているので、PC、モバイル表示ともに、320×320pxのサムネイル画像が読み込まれているようです。

また、テストサイトでは、PC、モバイル表示ともに、320×180pxのサムネイル画像が読み込まれているようです。

なので、うさぎ先生さんのサイトのエントリーカードのサムネイル画像がなぜ 367×206 px になっているのかは、私にはちょっとわかりません。

みんながみんなPHPでサイズ調整をして軽くしている、ということはないんだろうしという(^_^;)

PHPでカスタマイズされていらっしゃる方は、少数だと推測します。

うさぎ先生 さん

Firefoxのデベロッパーツールで見てみるとPC表示ではエントリーカードのサムネイル画像は640×360pxのものを読み込んでいるみたいです。（デフォルトだと320×180pxのような気もします。）

これも、なぜなのかちょっと私にはわかりません。

もしかしたら、以前お使いになられていたCocoonのオプションのレイアウトのとき、生成されたサムネイル画像を読み込んでいるのか、はたまた、プラグインが影響しているのか・・

わいひらさん、もしくは、詳しい方が何か書きこんでくださると良いなと思います。

うさぎ先生 さん

ちなみに、Regenerate Thumbnails の画面に 320×180 のサイズの登録はありますか？

リフィトリーさん、ありがとうございます。

確認したところ、320×180pxは一覧に入っていました。

1024×576pxはありませんでしたが、largeの1024×1024がこれにあたるのですかね……？

367×206pxもありませんが、これがどれにあたるのか……

Page Speed Insightsのスコア自体は逐一気にしすぎず、あくまでも参考にするのが良いかもしれませんね。

90-100の緑スコアにはとても出来る気がしないですが、黄色ならまぁ悪くはないのかな？みたいな……。

今回こうしてたまたま画像サイズに目が行ってしまって混乱していますが、読者さんの表示に苦がなければ今のままでも良いと言えば良いのかもですが(^_^;)

うさぎ先生 さん

確認したところ、320×180pxは一覧に入っていました。

そうなのですね。

ちょっと、私には、やはり、大きなサイズが読み込まれる理由がわかりません。

ちなみに、「サムネイルをRetinaディスプレイ対応にする」のチェックを外した後、「Regenerate Thumbnails」でサムネイル画像の再生成は行われましたか？

90-100の緑スコアにはとても出来る気がしないですが、黄色ならまぁ悪くはないのかな？みたいな……。

私のサイトは、高速化設定を利用していないためもあってか、モバイルは、赤表示です。

でも、おすすめの修正内容を見てみても、どれも外せないものばかりで・・。

リフィトリーさん、度々ありがとうございます。

Page Speed Insightsの時差があるかもとのことでしたので、今のところRetinaを外して…の方法はまだ試していない状態（トピックを立てたときと同じ状態）です。

軽くするって、なかなか難しいですよね……

うさぎ先生 さん

わいひらさんが何か書きこんでくださると良いのですが、もしかしたら、サムネイル画像の再生成を行えば、改善する可能性もなくはないのかもしれません。（320×180pxのサムネイル画像が読み込まれるようになる？かどうかはわかりませんが・・）

私は、「Local 」というサービスを利用して、PC上のローカル環境のテストサイトを使って、いろいろ試しているのですが、そうすると、運用サイトと違って、リスクもないので、オススメです。

「Local」は旧名「Local by flywheel」という名前だったので、そちらで検索した方が、使い方等ヒットするかもしれません。

この頃、「Local」の起動直後に操作すると、応答せずに勝手に終了したりすることもありますが、おおむねちゃんと使えています。（あと、頻繁にアップデートがあります。自動アップデートではありません。）

投稿者:: @leafytree

わいひらさんが何か書きこんでくださると良いのですが、もしかしたら、サムネイル画像の再生成を行えば、改善する可能性もなくはないのかもしれません。（320×180pxのサムネイル画像が読み込まれるようになる？かどうかはわかりませんが・・）

こちらの画像1024サイズのものがあるので、画像再生成しても画像自体は表示されるかもしれません。

画像タグのsrcset属性を見ると、値として1024画像が出力されているので、モバイルではそれが最適として出力されているのかもしれません。

僕の環境だとsrcset属性に大きなものはありません。
https://wp-cocoon.com/category/theme/

僕の環境ではRegenerate Thumbnailsの設定は以下のようになっています。
添付画像のように縦のサイズをゼロにすると、もしかしたら出力されなくなるかもしれません。
ただし、Regenerate Thumbnailsですべての画像の再生成が必要になります。
※画像の再生成は大丈夫とは思いますが多少のリスクはあるかもしれませんので、バックアップを撮ってからの方もいるかもしれません。あくまで自己責任でになります。

リフィトリーさん、ありがとうございます。

「Local」もテストサイトというものも、初めて聞きました！一度設定しておけばテストサイトでいろいろ試せるのですね。

ローカルから本番への移行方法の部分はちょっと難しそうに感じましたが、安全にテストができるだけでもすごいですね。

わいひらさん、ありがとうございます。

バックアップを取った後メディアで幅1024・高さ0に設定して、画像再生成をしてみました。

Page Speed Insightsへの反映は即時ではないようなので今はまだ1024×576が表示されていますが、この後小さいサイズが出力されるようになる（可能性がある）ということですね。

私の知識不足で的外れであったら申し訳ないのですが、

https://wp-cocoon.com/thumbnail-size-custom/

たとえばこちらの方法でPHPを編集してサイズを指定して変更+画像再生成をするとしたら、srcsetなる部分も意図したサイズになるということなのでしょうか？

今のところパソコン表示のほうの表示は特に問題に思っておらず、モバイル表示のほうだけ小さく（軽く）なってくれればいいので、モバイル表示の場合だけのPHP編集ってできるのかなとか初歩的な疑問もあり……慣れないPHP編集は避けられるなら避けたいとは思っています(>_<)

うさぎ先生 さん

「Local」旧名「Local by flywheel」のおかげで、簡単に仮想テストができるので、とても重宝しています。

サムネイル画像の再生成などは、運用サイトでは躊躇することもありますが、テストサイトなら、リスクを考えずに試せます。

たとえばこちらの方法でPHPを編集してサイズを指定して変更+画像再生成をするとしたら、srcsetなる部分も意図したサイズになるということなのでしょうか？

多分これはできないと思います。
srcset自体は、テーマの機能ではなくてWordPressの機能なので、出力はWordPressがしています。

昨日、幅1024高さ0に設定し直したあと再生成し、キャッシュを削除して、さきほどPage Speed Insightsを使ってみました。

添付のように、今も1024×576を読み込んでしまっているようでした。

昨日の再生成後に新しく更新した記事が反映されているので、タイミングのことだけで考えれば、再生成が影響してくれるかなと思ったのですが……

うさぎ先生 さん

どうも上手くいきませんね。

Firefoxのページ情報では、640×360pxを読み込んでいるようなのですが、320×180pxにならないのも、どうもスッキリしないような気もしますし・・

ちょっと私ではお役にたてそうにないかもしれません。

昨日、幅1024高さ0に設定し直したあと再生成し、キャッシュを削除して、さきほどPage Speed Insightsを使ってみました。

この記事で良いですか。
https://usagi-artteacher.com/art-materials-to-teach-history-art-of-europe/

デフォルトのアイキャッチ画像はどのような縦横サイズで生成していますか。

投稿者:: @leafytree

Firefoxのページ情報では、640×360pxを読み込んでいるようなのですが、320×180pxにならないのも、どうもスッキリしないような気もしますし・・

 

ちょっと私ではお役にたてそうにないかもしれません。

（なるほど、こうやって引用できるのですね！）

いえいえ、とんでもないです！色々とアドバイスありがとうございました！

このブログはかれこれ立ち上げて一年近いのですが、先日までカルーセルを入れていたこともあり、重いなぁ程度にしか思っていなくて……サイズのことは盲点でした…

投稿者:: @yhira

この記事で良いですか。
https://usagi-artteacher.com/art-materials-to-teach-history-art-of-europe/

デフォルトのアイキャッチ画像はどのような縦横サイズで生成していますか。

はい、その記事が再生成後にアップしたものです。

アイキャッチに使用している画像はもともと1600×900で、他の記事のアイキャッチも同様です。

いつも投稿画面の右側に出る「アイキャッチ画像」を押して、メディアライブラリから画像を選択して、アイキャッチにしています。

メディアの画面（添付）を見る限り、様々なサイズが生成されているように見えます。

メディアにある、「サムネイル再生成」や「再最適化」をするとよいでしょうか。

アイキャッチに使用している画像はもともと1600×900で、他の記事のアイキャッチも同様です。

320×180も640×360も1600×900も縦横比率は0.5265です。
画像のアスペクト比率が同じなので、srcsetで採用されるのかもしれません。
試しに1度だけ、1600×1000サイズの画像を作成して、アイキャッチ画像に指定してみていただいてよろしいでしょうか。
それで、srcsetが消えるかどうか。
※テスト後は元に戻しいただければと思います。

ただ、アイキャッチサイズを1600×900で指定したい場合の解決にはならないんですよね。
とりあえず、サイズを変更してsrcsetなどのようになるかの確認です。

投稿者:: @yhira

試しに1度だけ、1600×1000サイズの画像を作成して、アイキャッチ画像に指定してみていただいてよろしいでしょうか。
それで、srcsetが消えるかどうか。
※テスト後は元に戻しいただければと思います。

ありがとうございます、実験してみました。

テスト投稿のURLはこちらです。（まだ消してないです）　 https://usagi-artteacher.com/gazoutest/

画面上では16:9（上下がトリミングされた感じ）に見えていて、Page Speed Insightsを使ってみると、添付のように640×360.jpgが採用されていました！

ちなみにパソコン版はこれまでのものもテスト用サイズも、640×360.jpgでした（つまり今までと同じ）。

16:9の比率自体は一般的なものかなとは思っています。

他にもこの比率を使用していらっしゃる方は多いでしょうし、そんなみなさんが同様の状態だとも思えなくて……。私が何らかの設定を誤っている可能性が高いとは思うのですが……

できればパソコンでもモバイルでも、内部ブログカードなどでも、アイキャッチ画像については16:9のままで使えることが希望ではあります。しかし現状では「重いままにする」か「元画像の比率を変える」かの二択になりそうでしょうか。

ちなみに、全く関係ないかもしれないのですが、一応……

https://wp-cocoon.com/front-page-type/

今回の件とは別に、こちらのいわゆるサイト型表示のフロントページにするのもいいなぁと考えています。

もし、現在の一覧＆エントリーカードの組み合わせから何か表示方法を変更することで、モバイル表示が軽くなる可能性がある……という感じなら早めに取り掛かろうと思います。

あまり関係なさそうでしょうか(^_^;)

やっぱそうなんですね。
WordPress自体も当然嫌がらせで重い画像を表示しているわけではなくて、モバイルでも高画質の画像を表示するために、そのような仕様になっていると思います。多分。
訪問者に対して、「美しい見た目」を提供するか「表示の早さ」をとるかのトレードオフみたいな感じ。

できればパソコンでもモバイルでも、内部ブログカードなどでも、アイキャッチ画像については16:9のままで使えることが希望ではあります。しかし現状では「重いままにする」か「元画像の比率を変える」かの二択になりそうでしょうか。

もう一つの選択肢として、こちらのlargeサイズを最大限譲歩出来るサイズにするという方法もあるかと思います（+Regenerate Thumbnailsで再生成）。

ただ、SEO的な目的でそのような変更するのであれば、あまり意味がある変更ではないとは個人的に思います。
その他に何か目的があるのであれば別ですが。

投稿者:: @yhira

訪問者に対して、「美しい見た目」を提供するか「表示の早さ」をとるかのトレードオフみたいな感じ。

なるほど、そして今のところは「美しい見た目」が優先されている感じですね。

投稿者:: @yhira

もう一つの選択肢として、こちらのlargeサイズを最大限譲歩出来るサイズにするという方法もあるかと思います（+Regenerate Thumbnailsで再生成）。

largeの幅を、たとえば800×450に設定する（+再生成する）、ということですね。

その場合、PCで見たときの記事のトップ部分に表示されるアイキャッチも、おそらくlargeに設定した画像になりますよね。もしやるなら、それも踏まえてサイズを検討せねばですね。

美術系の要素もあるブログなので美しいのは嬉しいのですが、大体130KBの画像が一気に10件表示されるって、結構重い（表示が遅い）ことなのかなぁ？とスコアを見て思って……。

いまどきよほど低スペックのマシンでなければそれほど影響しないってことなのかもしれませんが、どれぐらいでどう重く（遅く）なるのかっていうのがよく分からなくて、軽い画像にできるならそれがいいよなぁという状態です。

ですので検索の順位？みたいなのことは全然考えていなくて（というか影響があるのですね…！）、「モバイルで見たサムネが130KB程度で、それが1ページに10件ぐらいあるのは別に、ままあることで気にするほどではないですよ」ってことであれば、現状のまま行こうと思います。

PageSpeed Insightsの項目は、「ここを修正すると、読み込みが快適になるよ」程度の指標で、影響がゼロとは言いませんが、よほど表示が遅くなければ、SEO的には効果が少ないと思います。

5Gサービスも開始され、スマホであろうと今後より通信は高速化が見込まれますが、MVNOの格安SIMで格安な代わりに最大通信速度が相当抑えられているプランもありますので、閲覧者への影響がゼロとも言い難いです。

（そのような方は慣れていらっしゃり、よほど重いサイトでない限りは気にしないでしょうが）

私であれば、JPEGやPNGでそのまま配信させるのではなく、WebP対応にさせるでしょうか。対応ブラウザもだいぶ増えました。

https://caniuse.com/?search=webp

EWWW Image Optimizerをお使いのようですので、WebPへの変換も簡単かと。

それで検索の順位に影響があるのかと言われると、これも「ほぼない、というかよほど遅くなければゼロレベル」と考えつつ、少しでも軽くして読み込みを高速化させる（モバイルユーザーには少しでもギガ死回避に役立ちつつ、高速に読み込んでもらう）ほうが、WordPressの仕様にも左右されにくく、良好な結果を得られる気がします。

largeの幅を、たとえば800×450に設定する（+再生成する）、ということですね。

自分が許容できるサイズにする感じです。

美術系の要素もあるブログなので美しいのは嬉しいのですが、大体130KBの画像が一気に10件表示されるって、結構重い（表示が遅い）ことなのかなぁ？とスコアを見て思って……。

現在WordPressのデフォルトの仕様として、Lazy Loadという機能があって、基本的には画像が画面内に入ってから読み込まれる仕様になっているので、不都合を感じる遅さにはなりづらいようには思います。
よほどネットワーク環境が悪くない限りは。

投稿者:: @jamkun

私であれば、JPEGやPNGでそのまま配信させるのではなく、WebP対応にさせるでしょうか。対応ブラウザもだいぶ増えました。

https://caniuse.com/?search=webp

EWWW Image Optimizerをお使いのようですので、WebPへの変換も簡単かと。

WebPという拡張子は、初めて知りました！ウェッピーと読むのですね。

よく見たら、「次世代フォーマットでの画像配信を推奨」のところで出てくる拡張子の一つですね。

従来画像との共存など少々ハードルがありそうですが、今後の参考にさせていただきます。

投稿者:: @yhira

現在WordPressのデフォルトの仕様として、Lazy Loadという機能があって、基本的には画像が画面内に入ってから読み込まれる仕様になっているので、不都合を感じる遅さにはなりづらいようには思います。
よほどネットワーク環境が悪くない限りは。

いろいろとお聞きして、スキルがない私にとってやりやすい方法は、largeのサムネサイズを許容できる範囲で小さくすることだと思いました。

こちらの記事を読ませていただいて、1024はあったほうがいいのだという気もしているので大きさは悩ましいですが……。

https://wp-cocoon.com/retina-thumbnail/

リフィトリーさん、ジャム君さん、わいひらさん、お忙しい中いろいろと教えてくださりありがとうございました。

しばらく運用してみて、また迷ったときにはご相談させていただくかもしれませんが、何卒よろしくお願いいたします。

余談(?)ですがもうひとつブログがありまして、そちらのモバイルスコアはなんと26でした……。

赤いゲージ＝低速度のユーザーだとすると、ざっくり5%程度のユーザーにとっては重くなっている可能性があるということなのですね。

今回ご相談させていただいたブログの方が全体的に画像は軽いので、ユーザー層の違いはありますが、5%よりは少ないだろうという気持ちで進めていこうと思いました。

より多くの人に見やすくなるようにと配慮を考えることと運用のしやすさのバランスについて、考えるきっかけになりました。

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