Google fonts を一般的な方法（コードを取得して<head>内に埋め込む）で利用していたら、PageSpeed Insights でレンダリングを妨げるリソースだと指摘されました。
自分が使っているサーバー（エックスサーバー）経由にすれば速くなる？らしいので、やり方を調べて設定してみました。
■環境：WordPress Cocoon / エックスサーバー
- Google fontsでフォントを選び、ファイルをダウンロードして解凍
- エックスサーバーにファイルをアップ
- スタイルシートにコードを書く
エックスサーバーにファイルをUPする
Google Fonts からPCにダウンロードしたフォントデータ(圧縮フォルダ)を解凍し、エックスサーバーにUPします。
- ファイルマネージャーにログイン
- 対象ドメイン名のフォルダを探す
- Public_html 以下にファイルをUP
UP先は「Public_html」以下
ファイルマネージャーにログインし、対象ドメイン名のフォルダを見つけてクリックします。
ドメイン名フォルダの中に「Public_html」があり、それ以下のディレクトリがインターネットに公開する範囲となっています。Public_htmlより下の階層にファイルをUPする必要があります。
ただ、WordPressやテーマによって上書きされるフォルダもありますのでご注意ください。※テーマの下に置いてみたらアップデートで消えました
フォルダ名と403エラーに注意！
分かりやすい名前のフォルダをエックスサーバー側に作り、その中にフォントファイルを入れたのですが、フォルダ名がとある記事のパーマリンクと同じだったみたいで、その記事を開こうとすると「403エラー」でアクセスできませんでした。
レアケースですが、念のためフォルダ名のネーミングにもご注意ください。
※WordPressダッシュボードの投稿一覧から「編集」なら開けます
スタイルシートにコードを書く
WordPressのテーマ（Cocoon）のスタイルシートにコードを書き込みます。
/*WEBフォント*/
@font-face {
font-family: 'baloo thambi 2';/*フォント名*/
src: url('http〜/fonts/BalooThambi2.ttf')/*フォントファイルへのパス*/ format("truetype");/*フォントのタイプ*/
}ファイルへのパス(url)について
urlをプロっぽく省略したかったのですが、どうしても上手くいかなかったので実際はフルパスにしています。
ただ、パスに「public_html」を含めるとフォルダが見つからなかったので省いています。
PageSpeed Insights ラボデータの変化
エックスサーバー経由とGoogle経由、どちらが速いのかPageSpeed Insightsで検証しました。
遅延時間（ラボデータ）の比較
エックスサーバー経由からGoogle経由に戻し、その後もう1度エックスサーバー経由に再設定。LCPとFCPは望んでいた変化ですが・・
| 指標【モバイル】 | Xサーバー | Google Fonts | Xサーバー |
|---|---|---|---|
| FCP | 3.9秒 | 4.0秒 | 3.9秒 |
| SI | 8.4秒 | 10.3秒 | 10.9秒 |
| LCP | 8.5秒 | 12.3秒 | 8.9秒 |
| TTI | 12.1秒 | 12.0秒 | 13.0秒 |
| TBT | 1,740ミリ秒 | 2,090ミリ秒 | 3,290ミリ秒 |
| CLS | 0.335 | 0.293 | 0.313 |
Webフォントどうこうより他の遅延要因が多すぎて、正直よく分かりませんでした。
Webフォントは必要最小限に
Webフォントを初めて設定した時は、嬉しくて無駄に5〜6個くらい使っていました。フォントが変わったそのポイントだけ見るとカッコいいのですが、サイト全体の統一感からは外れていました。
今はフォントも2種類のみで、使う場所も最小限にしています。別に5〜6個使ったから過度の遅延が発生する訳ではありませんが、やはり無駄は省いていかなければなりません。
Comment