＼合格！／ルクセリタスのCLS問題をついに解決した

2021年5月13日2021年5月29日

WordPressの神テーマLuxeritas（ルクセリタス）。るなさんめっちゃお世話になってます、もう他のテーマ使えません。

ルクセリタスは光速で表示される上にPageSpeed Insightsのスコア１００点も叩き出せる数少ない神テーマ。だけどずっとウェブに関する主な指標でCLS「合格していません。」問題だけが解決できずにいた。

ルクセリタスのCLS問題をついに解決した

↓

久しぶりに「合格しています。」って緑色で書いてる。長らく悩んでいた問題をやっと解決できたこのうれしさ…！

ファーストビューのフォントアイコンを削除

結論から言うと、

で解決した。

公開とか更新のアイコンとかパンくずリストのフォルダアイコンとか、モバイルでもPCでもファーストビューで表示されるfontawesomeアイコンをゼロにする。

フォントアイコンってあるとないじゃサイトの見た目が全然違う気がするけど、読者側からしたら結構どうでもいいポイントだと思う。

変更してからもっと時間かかると思ってたけど、意外と早く数日～１週間くらいで合格に変わった。

あとがき：fontawesome側で対処してほしい

画像遅延読み込みのLazyloadをオフにしてみたりアイキャッチ画像のwidthとheight指定してみたり色々やって全然ダメだったCLS問題。コアウェブバイタルがSEOに影響するようになるって聞いてビビりながら長い間戦ってきたけどやっと解決した。

ルクセリタス使ってる人めっちゃ多いし同じ問題で困ってた人も多いはず。この記事が誰かの問題解決の役に立てばいいな。

てかfontawesome側で対処して！＼(^o^)／「font-display:swap;」も効かないしただの「□（←四角）」とかでいいからどうにかして代替フォント表示させといてくださいお願いします…。

あとPageSpeed Insights（Lighthouse）のラボデータでは「Cumulative Layout Shift（CLS）」の数値ずっと「０（ゼロ）」だったのに、つまり画面は全く動いてないのに「CLS合格していません」って言われるのほんと納得できない。

そもそもCLSって「表示が遅れた要素が画面動かしちゃって全然違うとこタップさせちゃう」みたいな事故をなくすための指標だと思うんだけど、こんなアイコンフォントが１～２ピクセル動かすやつまで不合格にしなくても…。