レ点腫瘍学ノート

2021-05-30

Webフォントを使う時にサイトが重くならないようにする

Top > pukiwikiカスタマイズ箇所 > 2021 > Webフォントを使う時にサイトが重くならないようにする

Google Webフォントなどを使うとサイトのデザインのカスタマイズ性が向上しますが、どうしてもフォントダウンロードのためのタイムラグが生じてしまい、これによりPagespeed Insightのスコアが低下してしまいます。スコアを落とさないように工夫しながらのWebフォントの利用法を考えます。

今回実施した対応策

今回使用したWebフォントはGoogleのM PLUS 1pです。無料で使えて利用者も多いフォントです。

Google Fonts
Making the web more beautiful, fast, and open through great typography
https://fonts.google.com/specimen/M+PLUS+1p?subset=japanese

Googleのサイトでの手順を普通に踏めば、下記のようなコードが吐き出されます。

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;700&display=swap" rel="stylesheet"> 

あるいはimportを使う場合は下記のようなコードでもかまいません。

<style>
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;700&display=swap');
</style> 

しかしこれをそのまま使うと、CSSの読み込み、フォントの読み込みでPagespeed Insightが99点付近から一気に60点付近まで低下してしまいました。どうもWebからフォントを読み込むのはイマイチのようです。

このCSSをpreloadで先読みしても、結局CSSがフォントを読み込みに行くところまでは先読みできないのでpreloadしても効果が乏しい。そこでフォントファイル自体をローカルのサーバーに設置する方法を考えました。

フォントをローカルサーバーに置く

フォントファイル自体をローカルサーバーに置く方法はこちらのサイトが詳しい。

AMP にも対応!Google Fonts を preload で先読みし最適化
Google Fonts を preload で先読みし、サイトを高速化する方法の紹介です。レンダリングをブロックせず、フォントを読み込めます。また、FOUT や FOIT (文字のちらつき)が発生しにくいのもメリットです。さらに、AMP ページでも導入できます。
https://firstlayout.net/optimize-google-fonts-with-preload/

このサイトによるとgoogle-webfonts-helperを利用するのが最も確実・簡潔なようです。ここのサイトで必要な項目を入力しておき、必要な@font-faceの記述とフォントのファイルをダウンロードします。ダウンロードしたフォントファイルは今回はサーバーのskin/fonts/のフォルダに配置しました。

google webfonts helper
A Hassle-Free Way to Self-Host Google Fonts. Get eot, ttf, svg, woff and woff2 files + CSS snippets!
https://google-webfonts-helper.herokuapp.com/fonts

今回の@font-faceは次のようになりました。フォントファイルはwoff2しか置いていませんが、これでスマホを含めてほとんどのモダンブラウザはカバーするはずです。一方でIE11はwoff2をカバーしませんし、かなり古いFirefoxやSafariも対応しませんので、このような古いブラウザまでカバーする必要がある場合はwoff2以外のフォントファイルも記述が必要です(woff2ではなくwoffにすればIEも対応します→参考サイト)。

@font-face {
font-display: swap;
font-family: 'M PLUS 1p';
font-style: normal;
font-weight: 400;
src: url('skin/fonts/m-plus-1p-v19-latin_japanese-regular.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'M PLUS 1p';
font-style: normal;
font-weight: 700;
src: url('skin/fonts/m-plus-1p-v19-latin_japanese-700.woff2') format('woff2');
}

.htaccessの設定

すでに設定済みの方も少なくないと思いますが、このwoff2ファイルをしっかりキャッシュの対象になるように.htaccessの設定もしておきます。

# プロクシキャッシュの設定
<IfModule mod_headers.c>
<FilesMatch "\.(ico|jpe?g|png|gif|webp|img|js|svg|woff2)$">
    Header set Cache-Control "max-age=604800, public"
</FilesMatch>
</IfModule>

# ブラウザキャッシュの設定
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif "access plus 30 days" 
ExpiresByType image/jpeg "access plus 30 days" 
ExpiresByType image/png "access plus 30 days"
ExpiresByType image/webp "access plus 30 days"
ExpiresByType image/img "access plus 30 days"
ExpiresByType application/x-font-woff2 "access plus 6 months"
</IfModule>

preloadの設定

最後にフォントをpreloadで読み込む設定もしておきます。このときcrossoriginを忘れないように。(実際にはこのpreloadを入れるか入れないかではほとんどPagespeed Insightのスコアには差はありませんでした。)

<link rel="preload" as="font" href="<?php echo get_script_uri() ?>skin/fonts/m-plus-1p-v19-latin_japanese-regular.woff2" crossorigin>
<link rel="preload" as="font" href="<?php echo get_script_uri() ?>skin/fonts/m-plus-1p-v19-latin_japanese-700.woff2" crossorigin>
google fonts preload でちゃんと読み込み - Qiita
そうだ。Google fonts を preload しよう。 参考 https://firstlayout.net/optimize-google-fonts-with-preload/ ・今回は Kosugi Maru をダウ...
https://qiita.com/ma7ma7pipipi/items/38435209740a27722eb4

プロポーショナルフォントにする方法

今回のようなWebフォントを使う場合に限りませんが、CSSでフォントをプロポーショナルにしたり句読点の感覚を調製することができます。Google Webフォントで入手できるNoto Sansなどは等幅フォントになっていますが、この設定でプロポーショナルにしたり字間を詰めたりできるようになります。

font-feature-settings: "pwid";
font-feature-settings の文字詰めを考察する | スープアップデザインズ株式会社 | デザイン・制作会社 東京都(中央区)
Web担当の浮貝です。制作中に調査、考察したことなど、こちらに覚え書きしていこうと思います。今回のネタはCSS […]
https://souped-up.jp/2017/09/10/font-feature-settings-%E3%81%AE%E6%96%87%E5%AD%97%E8%A9%B0%E3%82%81%E3%82%92%E8%80%83%E5%AF%9F%E3%81%99%E3%82%8B/