レイアウトシフトとは以下のような定義でよろしいでしょうか。

このサイトでも同様のことになっていますね。
https://wp-cocoon.com/downloads/?theme-switch=skin-template

とは言ってもただメディアクエリで読み込んでいるだけなんですけどね…。
https://github.com/xserver-inc/cocoon/blob/cd2d90765a065fa812d0a75a565090763b456b17/style.css#L11294
style.cssの11294行目で書かれているので、トップから読み込まれる時差とかなんですかね。

投稿者:: @his

↑

以前はそのようなことがなかったと思うのですが、何か構造変更によるものでしょうか？

flex-grow: 99;が追加されたのは、5年前なので最近の構造変化ではないような気がします。
https://github.com/xserver-inc/cocoon/commit/c29e6ee9008152bbd8de73ad9393d1fd4077169b#diff-b627632bdd8e8c6e28eec59d575d52e6850d9ec601602d6c460cf071f5ddde6cR99

@yhira 

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

はい、読み込み時に一瞬CSSの反応が遅れてレイアウトがずれるという意味合いで間違い無いです。

定期的にアップデートしサイトに問題ないか確認しているのですが、この現象は少なくとも半年前には見られなかったような気がします。

Wi-Fi以外の環境だと顕著に現れるので、改善を図ろうと追加CSSの方で例えばflex:1と上書きしても改善せずでした。

引き続き原因探ってみます。

すみません。
関係ないかもしれませんが、素朴な疑問ということで。

デベロッパーツールでCocoon公式サイト見ると、以下のような感じなのですけれど。

私の環境（iPhone13/Safari）でもたまにロゴ表示前にサイト名が表示される場合があります。

Chromeだとloading="lazy"はないのですが、Safariだとありますね。

loading="lazy"指定時には、widthとheightが必要だと思っていたもので、少し確認をさせていただきたいなと。
（ファーストビューということもありそうですし、私の認識が違うかもしれませんので）

私が貼りつけたGIFでは、画像が遅延読み込みされて、その後シフトしているように見えたので。

（そういうこともあり、素朴な疑問ということで。）

ウェブ向けのブラウザレベルの画像遅延読み込み
画像にディメンション属性を指定する
https://web.dev/articles/browser-level-image-lazy-loading?hl=ja#dimension-attributes

投稿者:: @mk2_mk2

↑

loading="lazy"属性があるのに、widthとheightがないと、ふと思ったのですけれど。

loading="lazy"属性ついてます？
僕の環境だとないように見えるんですけど。

ソースコードにも入れてないように見えます。
https://github.com/xserver-inc/cocoon/blob/cd2d90765a065fa812d0a75a565090763b456b17/tmp/mobile-logo-button.php#L23

何か挿入される条件とかがあるんですかね。

先程キャプチャしたものには、ついていたんですよね。

デベロッパーツールを起動していない状態でロードして、表示（つまりPC表示）。
その後デベロッパーツールを起動して、モバイル表示を確認すると、loading="lazy"はないです。

最初からデベロッパーツールを起動しておいて、モバイル表示にします。
（つまり上の状態からの続き）
その状態で、リロードして、その後確認すると、loading="lazy"があります。

【追記】

デベロッパーツールを起動していても、いわゆるPC表示の状態でリロードして、その後モバイル表示へ変更した場合、loading="lazy"はないですね。

でも、最初からモバイル表示の状態でリロードすると、loading="lazy"が付いてきます。

ふと思いましたが。

私のローカル環境で、デベロッパーツール上で、なのですけれど。

「Cocoon設定」－「高速化」の「遅延読み込み」が、無効な場合
（2回リロードしています、GIFなのですが、変化ないので止まって見えるかも・・・）

高速化は無効にしてあるのと、PCのChromeでもレイアウトシフトが起きているので、レイジーロードはまた別の問題かと思っております。

モバイルヘッダーは、HTMLの順序的にfooterの下に位置しているので、ブラウザが自動的に判断してloading="lazy"を付与しているんでしょうかね。

his-さん

フォーラム上部の案内の通り、環境情報をご提示いただけないでしょうか。

公開できないなら、URLは削除していただいて構いません。

あまりにも情報がないです。

こちらから、実際の状況が確認できない以上、抽象的な話をしても、話は進まないです。

推測にも限界があります。

何か別のきっかけがないと、おそらくこれ以上進まないです。

高速化が無効とは、Cocoonの遅延読み込みが無効ということで良いのですよね。

曖昧にではなく、具体的に会話しないと、認識齟齬や誤解が生じます。

ブラウザが自動的にloading属性をつけることってあるんですか？

あまりにも情報がないです。

こちらから、実際の状況が確認できない以上、抽象的な話をしても、話は進まないです。

推測にも限界があります。

ご自身でも、公式サイトでも再現できているのであれば検証は可能かと思いますが…。

----------------------------------------------
サイト名：demo
コンテンツ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
WordPressバージョン：6.5
PHPバージョン：8.2.9
ブラウザ：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4.1 Safari/605.1.15
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja
----------------------------------------------
テーマ名：Cocoon
バージョン：2.7.2.3
カテゴリー数：1
タグ数：1
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：845 バイト
functions.phpサイズ：5826 バイト
----------------------------------------------
Gutenberg：1
Font Awesome：5
Auto Post Thumbnail：1
Retina：1
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------

投稿者:: @his

↑

ご自身でも、公式サイトでも再現できているのであれば検証は可能かと思いますが…。

これは、Cocoonの遅延読み込みが有効であるために、loading="lazy"が指定されています。

しかし、widthとheightの指定がないために、発生しています。

ですので、私の再現通り、Cocoonの遅延読み込みを無効にすると、解消します。

先に書いた通りです。

投稿者:: @mk2_mk2

↑

loading="lazy"属性があるのに、widthとheightがない

投稿者:: @mk2_mk2

↑

「Cocoon設定」－「高速化」の「遅延読み込み」が、無効な場合
（2回リロードしています、GIFなのですが、変化ないので止まって見えるかも・・・）

 

 

「Cocoon設定」－「高速化」の「遅延読み込み」が、有効な場合
（同様に2回リロードしています）

 

上記のように、私の環境ではCocoonの遅延読み込みが無効の場合は、動かないです。

（静止画ではなく、どちらもGIF動画を貼り付けています。）

このCocoon公式サイトも、遅延読み込みが有効だと思います。

his-さんは、Cocoonの遅延読み込みを無効になさっているとのこと。

この状態で、事象の再現はできていないです。

よって、検証も難しいと思います。まずは再現させるところからだと思います。

環境情報には、プラグインの情報がないようですが。

環境情報には、プラグインの情報がないようですが。

さすがに揚げ足取りをしているようにしか見えません。

• 高速化無効
• プラグイン全て無効
• 独自CSS削除
• キャッシュ削除

投稿者:: @his

↑

さすがに揚げ足取りをしているようにしか見えません。

そんなつもりもないですし、そんなことに時間を使う気もないです。

無効化してあるということですね。

見落としていました、申し訳ないです。

残念ながら、その状態で私の環境では、本事象は今のところ再現できません。

時間を使い真摯に取り組んでいるつもりですが、お気に触るようですので、撤退させていただこうと思います。

今のところ再現ができず、検証も難しいです。（再現のきっかけがあれば・・・。テーマに不具合があるなら解消はしたいです）

@mk2_mk2 

時間を使い真摯に取り組んでいるのは私も同様です。
（少なくとも私独自の問題ではないので）

改善されたというご自身の環境も記載されないと、こちらも比較検証できないのも同様です。

まだこちらで検証していない事といえばサーバー側のキャッシュ辺りですかね…。

Safariではloading属性がついていたのに、Chromeではついていなかったのも気になります。

WordPress側で何らかのフィルタリングでつけているのかもしれませんがこのあたりは不明確です。

モバイルヘッダーがレイアウトシフトする不具合修正を行いました。
flex-grow: 99;が原因っぽくはなく、ここのwidth: 100%;が曖昧だったのが良くなかったっぽい。
https://github.com/xserver-inc/cocoon/commit/fbf7b9f5c24a7c4bf7d2caefb1e96418b9b88fdc#diff-bb896ccee9074e1be5039e21374049db27dcbee4e691c7d16e419c49c4f6c268L38
あらかじめ値をwidth: 70px;と決め打ちすることで、僕の環境では解消されたっぽい？です。
https://github.com/xserver-inc/cocoon/commit/fbf7b9f5c24a7c4bf7d2caefb1e96418b9b88fdc#diff-bb896ccee9074e1be5039e21374049db27dcbee4e691c7d16e419c49c4f6c268R39

モバイルサイトロゴにレイジーロードを適用しないように修正しました。
https://github.com/xserver-inc/cocoon/commit/e9c31d20563ccd495ebd30db6b8e8c3ff56d1c2b
あとこれは効果があるかはわからないけど（基本的に大きな画像が設定されるので）、モバイルロゴ属性にwidthとheight属性を付加しました。
https://github.com/xserver-inc/cocoon/commit/36923388e10dd8f4dd2728c932fe730656c66046
あとこれも効果というのはあまりないんですけど、「上にあるものは、上で読み込んだ方がいいのかな」と思いmp/mobile-header-menu-buttons.phpテンプレートの場所ヘッダー付近に移動しました。
https://github.com/xserver-inc/cocoon/commit/a07045800b100ba25d4f381804eb26b10e8cd3d8
↑はテンプレートをカスタマイズしている人には影響が出るので、元に戻すかもしれません。

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

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

確認用に当サイトにも適用しておきました。
https://wp-cocoon.com/?theme-switch=skin-colors-blue

ご対応いただき、ありがとうございます。

私の環境では、「Cocoon設定」の「遅延読み込み」が「無効」の状態では、なかなか発生しなかったのですが・・・。
（ロゴが小さいのかしら？）

今やっと、発生させることができました。
画面をタブレットサイズ（添付はiPad miniのサイズ）にして、発生させることができました。
（それでも、毎回は発生しませんので、何かリロードして試す感じです）

• 「Cocoon設定」の「遅延読み込み」が「無効」の状態
• 今回の、複数ある対応は、それぞれ「対象のソースだけを入れ替える」

上記の形で、確認させていただきました。

①

投稿者:: @yhira

↑

あらかじめ値をwidth: 70px;と決め打ちすることで、僕の環境では解消されたっぽい？です。
https://github.com/xserver-inc/cocoon/commit/fbf7b9f5c24a7c4bf7d2caefb1e96418b9b88fdc#diff-bb896ccee9074e1be5039e21374049db27dcbee4e691c7d16e419c49c4f6c268R39

私の環境でも、この対応（だけ）で、今回の事象は発生しなくなりました。

②

投稿者:: @yhira

↑

モバイルサイトロゴにレイジーロードを適用しないように修正しました。
https://github.com/xserver-inc/cocoon/commit/e9c31d20563ccd495ebd30db6b8e8c3ff56d1c2b

こちらは、「Cocoon設定」の「遅延読み込み」を「有効」にして、HTMLソースに介入がないことを確認させていただきました。

以下は、「Cocoon設定」の「遅延読み込み」が「有効」な状態です。

ふと思ったのですけれど。

以下の対応は、あった方が良いのかもしれないですね。

投稿者:: @yhira

↑

あとこれは効果があるかはわからないけど（基本的に大きな画像が設定されるので）、モバイルロゴ属性にwidthとheight属性を付加しました。
https://github.com/xserver-inc/cocoon/commit/36923388e10dd8f4dd2728c932fe730656c66046

サーバー側の高速化機能の1つとして、画像の遅延読み込みの機能を提供するところが、増えてきているように思います。

例えば、ConoHa WINGは「WEXAL」で、一部かもしれませんが、画像の遅延読み込みができるようです。

WEXALについて
https://support.conoha.jp/w/wexal/#05

「WEXAL」は、ConoHa WING以外にも、導入しているところがあるみたいです。

エックスサーバーも、XPageSpeedという機能で、画像の遅延読み込みの設定ができるみたいです。

XPageSpeed設定について
https://www.xserver.ne.jp/manual/man_server_xpagespeed.php#link-b

サーバー側の機能の場合、実際に、どういう対応で実現するのかは確認ができませんので、分からないのですけれど。
サーバー側でHTMLに介入するのであれば、widthとheightを追加してくれないこともあるかもしれないな・・・という気はしました。
（確認した訳ではありませんので分かりませんので、そういうことはないのかもしれないですけれど）

@yhira 

ご対応ありがとうございます。

モバイルヘッダーメニューの項目が「ロゴ」「アイコン」の２つの場合、もしくは「ロゴ」「アイコン」「アイコン」の順となっている場合はいかがでしょうか。

私の環境では右端以外が動いているようです。

左右にアイコンがある場合はうまくいっているように見えます。

投稿者:: @his

↑

モバイルヘッダーメニューの項目が「ロゴ」「アイコン」の２つの場合、もしくは「ロゴ」「アイコン」「アイコン」の順となっている場合はいかがでしょうか。

僕の環境では駄目ですね。
一旦元の環境に戻しました。
今日何時間か試行錯誤してみたんですが、結局

• ロゴメニュー：引き伸ばす
• その他のメニュー：70px

みたいに、メニューの幅に違いがあると必ずレイアウトシフトしますね。
例えば、全てのメニューが均一でwidth:100%;とかwidth:70px;と同じであれば、レイアウトシフトしないようです。

なので、今のCocoonの環境（GitHubの最新版）で言えばここのwidth:70px;を削除もしくはコメントアウトすれば、レイアウトシフトはしなくなります。
https://github.com/xserver-inc/cocoon/blob/e3989f288e7a51cdb368ee95b3377644bcfd0984/style.css#L11318
ただ見た目は、添付画像のように、すべてのモバイルメニューの幅が同じになってしまいます。

今回のレイアウトシフトの原因で言えばサイトロゴ画像が原因の可能性は低いように感じます。
というのもサイトロゴ画像を設定しないで、添付画像のように、サイトロゴ画像を表示しないで文字列を表示させたとしても、レイアウトシフトが起きるからです。

ただあくまで僕の環境ではなので、条件が重なると原因となる可能性もあるのかもしれません。

具体的にどうやったなど例や事象などが分かりませんので、適当にやってみました。

とりあえず、Cocoonを昨日修正いただいたVerにして、以下のような感じにしてみました。

上記で動かなくなるのであれば、個別に（子テーマ等で）対応する分には、できそうな気もしますね。
（アイコンの場所の大きさは、決まっているでしょうから、あとは計算すれば）

メニューに入るボタンの数があらかじめ決まっているのであれば、なんとかなるんですけどね。
不特定数のボタンが入るとなると、ほんとどうしたらいいんだろう。
フレックスボックス以外のアプローチも試してみようと思います。

投稿者:: @yhira

↑

メニューに入るボタンの数があらかじめ決まっているのであれば、なんとかなるんですけどね。

そうですよね。

なので、個別にでないと難しいなと思ったんですよね。

おそらくFontAwesomeが原因なのかなと思ったのですけれど。
再描写に時間が掛かるのかなと思ったのですけれど。
（preloadしても、まだダメなのかという感じですけれど）

投稿者:: @yhira

↑

なので、今のCocoonの環境（GitHubの最新版）で言えばここのwidth:70px;を削除もしくはコメントアウトすれば、レイアウトシフトはしなくなります。
https://github.com/xserver-inc/cocoon/blob/e3989f288e7a51cdb368ee95b3377644bcfd0984/style.css#L11318

ここを削除すると、全くレイアウトシフトが起きないことから、Font Awesomeでもないような気はしています。
レイアウトシフトを起こさないということに重点を当てるのであれば、添付画像のような見た目になりますが、これを良しとするかになりそう。
もしくはPHPで出力されるボタンを解析して、calcで計算しきる方法くらいか僕に思いつきませんでした。

投稿者:: @yhira

↑

ここを削除すると、全くレイアウトシフトが起きないことから、Font Awesomeでもないような気はしています。

確かに、私の環境でも止まりました。

ちょっと訳が分からなくなってきましたが・・・。

今、親テーマでボタンは、70pxが指定されていて。

ロゴの部分は、width: calc(100vw - 140px)を子テーマで指定してみたのですけれど。

以下のように止まらなくて・・・。

どちらも親テーマで試してみたのですが、フォントサイズの違いで、動きが大きく見えるのでしょうか。

Cocoon 2.6.9

投稿者:: @mk2_mk2

↑

ロゴの部分は、width: calc(100vw - 140px)を子テーマで指定してみたのですけれど。

以下のように止まらなくて・・・。

本当だ。モバイルボタンに適用されているwidth:100%とかは全て取り去って、最終的な.logo-menu-button幅をwidth:244pxみたいに決め打ちで入力してもレイアウトシフト起きちゃいますね。
ちょっとお手上げ状態です。

投稿者:: @mk2_mk2

↑

親テーマの設定は変えていないと思いますが。

2.6.9は19px、2.7.2.8は16pxが適用されているようですね。

最近レイアウトシフトが起きるようになったというのは、これのせいだったのかもしれませんね。

投稿者:: @yhira

↑

最近レイアウトシフトが起きるようになったというのは、これのせいだったのかもしれませんね。

https://wp-cocoon.com/community/postid/77854/

バージョン：2.7.1.7に戻してみましたが、チラツキは発生します。
結果、上記は直接的原因ではないです。

「レイアウトシフト」何言っているか全く分からず。

モバイル表示した際、一瞬、ヘッダーモバイルボタンの配置が動きチラついて表示される、ですよね？
現象は、簡単な言葉で、動作を丁寧に書かないと、第三者には分かりません。

以下で改善しませんか？

以下をwidth:70px;に変更

https://github.com/xserver-inc/cocoon/blob/915e874d80a94b95891b512a27432c79f0a1a47d/style.css#L7803

以下を削除

https://github.com/xserver-inc/cocoon/blob/915e874d80a94b95891b512a27432c79f0a1a47d/style.css#L11357

https://github.com/xserver-inc/cocoon/blob/915e874d80a94b95891b512a27432c79f0a1a47d/style.css#L11361-L11366

以下にjustify-content: space-between;を追加

https://github.com/xserver-inc/cocoon/blob/915e874d80a94b95891b512a27432c79f0a1a47d/style.css#L11353

以下を追加

.logo-menu-button {
  flex:1;
}

@yhira さん

●補足

上記に投稿した、改善コードのみ抜粋。

以下のCSSを、追加するだけで解決すると思います。

.logo-menu-button {
  flex: 1;
}
.mobile-menu-buttons .menu-button {
  width: 70px;
}
.mobile-menu-buttons {
  justify-content: space-between;
}

ありがとうございます。
修正させていただきました。
https://github.com/xserver-inc/cocoon/commit/cdb363ac7b56fb802e33471f67f62e76a3e6a9ab

@yhira さん

見たら、らちが明かないと思え、助け舟です。

display:flexを用いているので要素が可変となり。
この為、ボタン幅を固定にする必要があります。
また、ボタンを配置した際、残りの余白をロゴに割り当てる為、flex:1とします。

修正後僕の環境では、意図通りに動作してますけどどこかおかしかったですか？
flex: 1;はflex: 1 1 0;のことだから、明示的にするためにflex-grow: 1;でもいいかとそのようにしたんですけど。

投稿者:: @yhira

↑

修正後僕の環境では、意図通りに動作してますけどどこかおかしかったですか？

わいひらさんの変更でも、問題ないです。

見たら、らちが明かないと思え、助け舟です。

上記を書いたのは、私がコードを書いた理由と、書いたコードの補足です。
現象となる原因何か？分かっているのかな？と思ったからです。