WEBサイトのページスピードを上げると様々なメリットがあります。
ユーザーの離脱率を下げたりユーザビリティの向上など、SEO対策としての優先度は高いと言えます。
ページスピード改善施策の1つである「Google Fontsの遅延読み込み」について解説していきます。
比較的簡単に導入できる対策なので、必須レベルで取り入れることをおすすめします。
ページスピードとは
WEB制作におけるページスピードとは、「WEBページが表示されるまでの速度」を指します。
ページスピードが遅いとユーザーの離脱に影響するため、SEOの対策として重要な項目の1つに挙げられます。
ユーザーは2秒以上経過すると離脱する可能性が高くなり、3秒以上経過すると40%が離脱してしまうとも言われています。
それほどWEBサイトのページスピードは重要なのです。
ページスピードが速いことによるデメリットはなく、メリットは多々ありますので優先的に対策しておくと良いでしょう。
PageSpeed Insightsとは
ではページスピードはどのように調べれば良いのか。
Googleが提供している「PageSpeed Insights」という、ページスピードを計測するためのツールがあります。
他にも計測ツールは存在しますが、性能はほとんど変わりませんのでPageSpeed Insightsの計測結果を基に改善を行なっていけば問題ありません。
ページスピードを向上するための施策は様々な方法がありますので、今回ご紹介する「Google Fontsの遅延読み込み」は数ある施策の中の1つです。
WEBサイト全体のページスピードを向上させたい場合は、対策する項目が多くなります。
遅延読み込みをした方が良い理由
PageSpeed InsightsでWEBサイトを診断すると、「レンダリングを妨げるリソースの除外」という項目が高確率で表示されます。
何も対策していなければほぼ必ずと言っていいほど表示されます。
中でも該当する項目は多々ありますが、「Google Fontsの遅延読み込み」はページスピードの改善に大きく影響します。
そのため、Google Fontsの遅延読み込みをするだけで数点～数十点の改善が見込めます。
数ある対策の中でも比較的簡単に改善できる項目なので、Google Fontsを利用している場合は是非取り入れることをおすすめします。
Google Fontsを遅延読み込みする方法
それでは実際のコードをご紹介します。
遅延読み込みをしないコード（デフォルト）
Google Fontsの公式ページから埋め込みコードを取得すると、以下のようなコードになります（例はNoto Sans JP）。
このままでは遅延読み込みされません。
<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=Noto+Sans+JP" rel="stylesheet">遅延読み込みをするコード（改造後）
完成形のコード
完成形のコードを先に紹介します。
このように書くことで、Google Fontsが遅延読み込みされるようになります。
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" media="print" onload="this.media='all'">コードのテンプレート
遅延読み込みのテンプレートです。
以下コードの「（CSSのURL）」部分を、CSSのURLに書き換えて使用してください。
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style" href="（CSSのURL）&display=swap">
<link rel="stylesheet" href="（CSSのURL）&display=swap" media="print" onload="this.media='all'">media="print"上記の記述によってブラウザ側に印刷用のCSSと認識させることで、サイトの表示とは関係ないコードであると判断させ、レンダリングに影響しないようになっています。
ファーストビューの表示に必要な他の要素を読み込んだ後に、Google Fontsの読み込みを始める、といった仕様です。