りれるです。
今月からアド運用の師匠に弟子入りして、毎日アホみたいに広告作っております。
わかってはいたものの、ブログ・ノウハウとはまったく別モノで、日々「なるほど！」を感じながら修行中。
師匠の元での仕事を最優先にしつつ、メインブログを更新していると、さすがに何もやる気が起きず、これまた久しぶりの執筆となります。
で、今日ご紹介するのは、少しテクニカルな話にはなりますが、CWV（コアウェブバイタル）のチェック項目でエラーが出やすい「Ensure text remains visible during webfont load（ウェブフォントの読み込み中のテキストの表示）」の改善方法です。
どうやったら改善できるのか？お悩み中の方は参考にしてください。
Ensure text remains visible during webfont load（ウェブフォントの読み込み中のテキストの表示）
これ、Google翻訳で訳してみると「Webフォントの読み込み中にテキストが表示されたままになるようにしましょう」と書かれてます。
で、この項目なんですが、SWELLをデフォルトで使っていると毎回引っかかってしまう項目なんですよ。
もちろん、これを直したからと言って、CWV、及びページスピードが大幅に改善するわけではないですが、最近はCWVの点数が検索順位にかなり影響しているので、直せるなら直しておきたい。
ということで、ほぼコピペでこの項目を改善する方法についてご紹介していきます。
エラーが出ているかどうかの確認方法
CWVの点数を調べる方法は2つあって、1つはChromeアプリの「Lighthouse」をインストールして、該当ページを調べる方法と、もう1つは定番の「PageSpeed Insights」にアクセスして、調べたいページのURLを入力する方法です。
どちらも同じ項目を調べることが出来ますが、Lighthouseのほうが他の項目も調べられることと、PageSpeed Insights自体がLighthouseの数値を元にしていることからLighthouseを利用されることをオススメします。
若干、内訳内の指標の数値が違いますが、ページスピードは計測する度に変わるので気にしないで下さい。
で、この画面を下にスクロールしていくと、どこの項目がダメだったのかが記載さているんです。
監査項目に引っ掛かった部分
余談ですが、次の段落で派手に遅延の原因（6261ms）となってる「First Contentful paint(3G)」は、サーバーの応答時間や不要なファイルの読み込み（WEBフォント含む）、サイズの大きな画像などを配置していると悪化する項目。
りれるブログの場合は動画を入れちゃってるので仕方ない部分なんで、今回はこの項目には触れずに進めさせて頂きますのであしからず。
CSSを使ってWEBフォント読み込み中でもテキストが読めるようにする
さて、話を戻して「Ensure text remains visible during webfont load」項目のエラーをなくすには、見出しに書いたように、CSSでWEBフォントを遅延読み込みさせて、その間でもちゃんと字が読めるようにすればいいってこと。
それには、＠font-faceで該当のWEBフォントを定義してあげればOK。
だいぶ前置きが長くなりましたが、要はこの記述の仕方を紹介します！というのが本記事のメインテーマです。
そんなに難しくはないですが、FTPを使えることが前提となりますので、予めご了承ください。
ソースコード例を載せておきますので、それを自分用に書き換える、というのが流れとなります。
@font-faceのソースコード
SWELLでとりあえず毎回引っかかるのが、
…fonts/icomoon.ttf?7ojy2d
icomoonとは、Webフォントとして使えるアイコンを配布していたり、自作のアイコンなどをWebフォント化することができるサービスのこと。
SWELLの標準アイコンはすべてicomoonで作成されている為、コイツが毎回引っ掛かってしまうというわけ。
ですので、別のWEBフォントなどを使っていなければicomoonだけが引っ掛かっているはずなので、コレの改善策を紹介しておきます。
@font-face {
font-family: 'icomoon';
src:url('hogehoge.com/xxxxxxxx/themes/swell/assets/fonts/icomoon.ttf?7ojy2d') format('embedded-truetype'),
url('hogehoge.com/xxxxxxxx/themes/swell/assets/fonts/icomoon.ttf') format('truetype'),
url('hogehoge.com/xxxxxxxx/themes/swell/assets/fonts/icomoon.woff') format('woff'),
url('hogehoge.com/xxxxxxxx/themes/swell/assets/fonts/icomoon.svg') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
add_filter( 'swell_pickup_banner_lazy_type', function() {
return 'none';
} );上記ソースで変更箇所は「hogehoge.com/xxxxxxxx」の部分。
ここをご自身のドメインとディレクトリに変更して、子テーマのCSSやダッシュボード＞カスタマイズ＞追加CSSに記述すればOKです。
変更箇所の記述例
エックスサーバー、mixhost、ラッコサーバーを利用の方で、ドメイン直下で運用している方であれば以下のように記述すればOK。
ドメイン名/wp-content
ドメイン直下ではなく、サブディレクトリ（ドメイン名/wp/）のような場合
ドメイン名/wp/wp-content
その他のサーバーは現在使っていないので、どんな感じか忘れちゃいましたのでわからないです。
ですが、どんなサーバーでも、ワードプレスのディレクトリ構造は同じなので、最初の部分さえわかれば記述できると思います。
変更箇所をご自身のドメインに併せて変更したら、あとはCSSに書き加えるだけです。
子テーマでも追加CSSでも、好きなほうに書き加えてください。
@font-faceを記述したら再度チェック
全体としては全く数値は改善されてませんでしたが、少なくともWEBフォントに関する改善項目は解消されたことがお解り頂けたかと思います。
ハッキリ言って数値はそんなに変わらないですが、ただ記述するだけで済みますので、気になっていた方は是非やってみてください。
さて、今の時間は深夜3時半、さすがに子供達も完全に寝たと思いますので、これからサンタさんをして寝ようと思います。
それでは！
コメント