皆さんこんにちはGB350.comです。今回はCloudFlareの新機能であるCloudflareFontsを使ったサイトスピード向上を図っていこうと思います。
そもそもCloudflare Fontsとは
Cloudflare Fontsベータ版
フォントの読み込みを最適化します。Cloudflare Fonts は、サードパーティのフォントに対する外部リクエストを削減し、プライバシーとパフォーマンスを向上させ、ページの読み込みを高速化します。
https://www.cloudflare.com/ja-jp/
CloudFlareダッシュボードからの引用です。
つまり、Cloudflare FontsはCloudflareサーバーからフォントを配信するサービスではなく、GoogleFontsから配信されているフォントを自分のサーバーから配信することでサイトのパフォーマンスを向上させる事ができるという無料のサービスです。
現状(2024/5/7現在)はGoogleFontsからのフォント配信にしか対応していませんが十分だと思います。
詳しい情報は公式サイトを御覧ください。
サイトに表示したいフォントをみつける
すでにフォントの導入が済んでいる方は読み飛ばしてください。
まず、GoogleFontsのサイトにアクセスします。
サイトが開けたらフォントの検索をします。
導入したいフォントが決まっているのであれば「Search fonts」の検索バーでフォントを検索してください。
決まっていなかったらFiltersで
言語(Language)を選択したり装飾の種類を選択してお好みのフォントを見つけてみてください。
ちなみに当サイトで設定しているフォントは、Zen Kaku Gothic Newです。
Zenシリーズのフォントはデザインがとても良くおすすめです。
使用するフォントが決定したら、右上のGetFontでバッグに追加します。
選択したらページが移動します。もし移動しなかったら右上のバッグのマークをクリックしてください。
移動した先のページでGet embed codeをクリックします。
コードが表示されているページが出てきます。
Change styleでお好みの文字サイズを選択してください。一番上を選択するとすべて選択されます。
いい感じに選択できたらコードをコピーしていきます。
一番上のHTMLコードのみコピーします。
下記はコピーしたHTMLコードです。選んだフォントによって内容が異なります。
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New&display=swap" rel="stylesheet">
HTMLに直接記述
HTMLに直接記述する場合は、下図のように<head>内に記述してください。
CSSはHTMLの下のこのコードの
.zen-kaku-gothic-new-regular {
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 400;
font-style: normal;
}
font-familyの部分のみコピーします。
font-family: "Zen Kaku Gothic New", sans-serif;
コピーできたらstyle.cssの中のbodyの中にペーストします。
これで完了です。
WordPressの場合
はじめにHTML記述
コピーができたらWordPressの管理画面に移っていきます。
外観→テーマファイルエディタ→テーマヘッダ(header.php)の<head>内に1つ目にコピーしたものをペーストしてください。
ペーストできました。
できたら下の方にあるファイルを更新をクリックして保存を忘れずにしてください。
CSS記述
外観→カスタマイズを選択します。
開けたら追加CSSを選択します。
選択したら下の入力欄に入力をしていくのですが、このとき、CSSコードの記述が少し特殊なのでよく注意して記入してください。
GoogleFontsに戻り、下記CSSコードを表示します。
.zen-kaku-gothic-new-regular {
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 400;
font-style: normal;
}
font-familyの部分のみコピーします。
font-family: "Zen Kaku Gothic New", sans-serif;
コピーできたらWodPressにもどり、
body{
font-family: "Zen Kaku Gothic New", sans-serif;
}
このように.body{}の間に先程コピーしたものを記述します。
ペーストできたら保存を押してください。
これでリロードしたらフォントが変更できていると思います!
どうでしょうか?フォントが変わることでデザインが大幅に変わったことがわかります!
Cloudflare Fonts
さて、ここからが本題です。
フォントを設定したはいいが、サイトのパフォーマンスが落ちてしまってはどうしようもありません。
上の画像はフォントを設定したあとのパフォーマンスです。
早速Cloudflare Fontsを設定していきます。
Cloudflareのダッシュボードにログインします。
https://dash.cloudflare.com
アカウントをお持ちでない方はこの機会に作成してみてください。Cloudflare、結構使えます。
https://dash.cloudflare.com/sign-up
ログインできたらCloudflareFontsを設定したいドメインを選択します。
選択したら、サイドバー内のSpeedタブから最適化を選択します。
最適化の中の「コンテンツを最適化」を選択します。
コンテンツの最適化タブの上から2つ目のCloudfalre Fontsの右側のボタンをクリックします。
ボタンをクリックしたあとはもう何も操作は必要ありません。これで完了です。
サイトスピードを測ってみます。
どうでしょうか?大幅にパフォーマンスが上がっています。
おわりに
ボタン一つでサイトスピードが向上したため、Cloudflare Fontsはやらない手はないですね。
この機会にサイトパフォーマンスのために敬遠していたWebフォントを設定してみてはいかがでしょうか?
それでは、また!
コメント