ブロックテーマを使用したサイトでCLSの問題が発生するときの確認と対処例

久々にPageSpeed Insightsでいくつかのページを確認したら指摘されたCLSの問題。

結構昔から、PageSpeed Insightsで計測した時にこの要素でズレが生じてますよ！といわれる要素よりも上の部分で実は発生していたということが多くて、今回もアイキャッチ画像がと言われていたので、いやいやfigureで埋め込んでるから多分出ないだろうと勘ぐって「Layout Shift GIF Generator」というオンラインツールで視覚的にズレの部分を表示してもらったら、それは何とサイトタイトルの部分であったことが判明しました。

そのサイトはブロックテーマを使用していて、theme.json上でGoogle Fontsを読み込ませて表示させていて、どうやらそこにズレの原因があったようです。

原因をさらっと解説すれば、ページ読み込みの間にウェブフォントの読み込みを待つ前に他の要素が読み込まれ、後にウェブフォントに入れ替わることでズレが生じるということのようです。

これを解消するには、そもそもウェブフォントの読み込みと置き換えをページがすべて読み込まれた後にするという方法が効果的のようです。

この対処は以下のいずれかで比較的簡単に実装でき、どちらも同じことをするのでやりやすい方法で対処するとよいでしょう。

ただし、サイトによって他の要素の問題であったり、以下の方法で解決しない場合もあるのでご容赦を。

ウェブフォントが原因で発生するCLSの問題を解決する方法

テーマのstyle.cssへ追記する方法

以下のコードを有効化しているブロックテーマのstyle.cssへ追加して、問題が解消するかを確認してください。

@font-face {
	font-display: swap; 
}

style.cssがない場合や、別の場所でフォントに関するスタイルを指定するのが嫌（まとめておきたい）方は次項のtheme.jsonへ記述する方法がおすすめです。

theme.jsonへ追記する方法

theme.jsonを開くと結構上部の方に以下のような記述があると思います。

					"fontFace": [
						{
							"fontDisplay": "block",
							"fontFamily": "'Noto Sans JP'",
							"fontStretch": "normal",
							"fontStyle": "normal",
							"fontWeight": "400",
							"fontDisplay": "swap",
							"src": [
								"file:./assets/fonts/noto-sans-jp/NotoSansJP-HAver.woff2"
							]
						}
					],

恐らくこの中の「”fontDisplay”: “swap”,」という行が、多くのブロックテーマでは指定されていないと思います（少なくともTwenty Twenty-Threeテーマでは存在しませんでした）。これを追加することで、CSSに書くのと同じ処理をしてくれます。

CLSの問題は今回のような単純なものではなく、画像のサイズ指定がされていなかったり、時には自動で入る広告の要素が問題だったりすることがあるので一概には言えませんが、そんなはずないのに．．という方はやってみるといいかも知れません。

ちなみに、この要素が適用されているかどうかは、ページを開き、デベロッパーツールの「ソース」タブを開いてリロードすると出てくるスタイルコード上でCtrl+Fをクリックし、「font-face」と入れるとこの要素を含めたfont-faceに指定されている部分が確認できます。