THORテーマはアイコンフォントでCLSが起きやすい
THORテーマは有名テーマなので使っている人も多いのではないでしょうか？
今回はサーチコンソール上でCLSが起きているとお客様から相談を受けて対応したノウハウを記事にしました。
もちろんこれ以外にもCLSが発生する要素はございますが１つのノウハウとして共有します。
どうもTHORテーマではアイコンフォントでCLSが起きやすいようです。
今回はそちら解説と改善していきます。
Webラボ
CLSが起きる場所はパンくずリスト
CLSが起きる場所はパンくずリストの部分です。
パンくずリストにアイコンフォントが使用されているためです。
アイコンフォントが表示されるまでに時間がかかってしまい、その部分がズレることでCLSが発生していました。
ちなみにアイコンフォントはFontawesomeのことです。
Fontawesomeはさまざまなサイトで使われているため、他のテーマでも同様なことが起きることはあります。
THORテーマでのCLS改善方法
非同期読み込みをオフにする
今回はアイコンフォントの非同期読み込みをオフにしてください。
チェックをつけない＝オフになります。
テーマの注意書きにも下記のように書かれていますね。
今回は一瞬のデザイン崩れによるCLS発生のようです。
特にパンくずリストがある画面上部だとCLSの判定も大きくなるため十分注意しましょう。
さらにリソース事前読み込みをする
今回はアイコンフォントの非同期読み込みのオフだけである程度、CLS改善されました。
それでも時々CLSが発生しているようなので、それに加えてicon.min.cssファイルのリソースの事前読み込みを実施しました。
これで完璧にCLSの発生がすることがなくなりました！
少しの設定変更だけで改善できているように思えますが、分析と解決方法を導くためにはそれなりに時間のかかるものです。
何かお困りごとがあればお気軽にWebラボまでご相談頂けると嬉しいです。
