広告 WordPress

【WordPress】CLS値の悪化は画像のWidth,Height設定だけではなかった件

2022年8月27日

いつ頃からかCLS(Cumulative Layout Shift)の値が0.1を超えるのが常態化していました。それまで0.1を上回ることがほとんどなかったです。

「CLS 改善」で検索しても「画像のWidthとHeightの数値を記入しましょう」の類の検索結果ばかりでした。Lighthouseでも画像の指摘はほとんどありません。

ただ、気になったのがUnsupported CSS Propertyが多発していることでした。右端にfont-sizeやline-heightと書かれています。

unsupported CSS Property
unsupported CSS Property

ふと「そう言えば、数か月前にSimple Custom CSS and JSプラグインを使ってカスタマイズしたっけ」と思い当たり、設定を見直しました。

そう、わかりました!

記事全体の文字を大きく、行間を空けるように設定していました。これ自体は問題ありませんが、これを<head>要素内の最終段に記述するようにしていました。これを下図のように<head>要素内の最上段へ持っていくことによってCLSの値は再び0.1を切るようになりました。

cssコードの編集
cssコードの編集

反省

サイトの描画速度改善を試みた際に「JavaScriptやCSSがレンダリングブロックするので、読み込みを後方に持って行けるならそうした方がいい」ということから、様々なCSSを<head>の最終段の設定にしていました。それにより、最初に描画した記事がフォントサイズと行間の変化により描画がずれていきCLS悪化へと繋がっていたのですね。勉強になりました。

フォントサイズや行間など、レイアウトに係るCSS Propertyを何らかの方法で後方に持って行ってCLSが悪化した方は前方に戻した方がよいようです。

誰かの参考になれば幸いです。

-WordPress
-, ,

Please disable your adblocker or whitelist this site!