笑顔計画|デザイナー's WEB SITE

サイトの軽量化:Webフォント

2019.07.19

この記事は約4分で読めます。

2018年3月27日にGoogleがモバイルファーストインデックスを本格導入してから、より気にするようになったサイトの軽量化ですが、先日GoogleからTest My siteのメールが来ました。元々PageSpeed Insightsでお仕事も含め見てきたのですが、Test My siteは見てこなかったので試しにこのサイトで見てみました。


Test My Site

 

基本、入力したサイトの表示速度を確認することができます。このサイトは2.3秒でした。評価的には普通ですが、ダウンロードできるレポートを見ると改善の余地はまだあります。

  1. ウェブフォントの読み込み中もテキストを表示する
  2. 次世代フォーマットで画像を配信する
  3. CSSを軽量化する
  4. レンダリングを妨げるリソースを削除する
  5. 適切なサイズの画像を用意する
  6. テキストの圧縮を有効にする
  7. 不要なCSSを削除する
  8. 画像を効率的にエンコードする
  9. ネットワーク ペイロードを過度に大きくしない
  10. 合理的なキャッシュポリシーで静的アセットを配信する


これらの中でいくつか改善していきたいと思います。今回はWebフォント。


 

Webフォント|目次

 

Webフォントは便利だけれど読み込みにちょっと時間がいる

Webフォントとは、サーバ上にあるフォントやインターネットで提供されているフォントを読み込んで表示させる技術ですが、実際意図する書体で表示されるまでにちょっと時間がかかるものがあります。このサイトではGoogleフォントとFontawesomeを使っています。Googleフォントは以前に比べ早くなったように思いますが、Fontawesomeは少しかかる印象です。それでも閲覧環境に影響されず意図したフォントでWebサイトが表示されるので使わない手はありませんよね。

解決はCSSの記述

さて今回指摘された

「ウェブフォントの読み込み中もテキストを表示する」

これについて解決していきます。その方法はCSSへの記述。font-display: swap;という記述を使います。

@font-face { 
font-family: 'フォントの名前';
font-display: swap;
src: url(フォントファイルまでのパス) format('フォーマットの種類');
}

フォントのソースは複数でもOKです。

@font-face { 
font-family: 'フォントの名前';
font-display: swap;
src: url(フォントファイルまでのパス) format('フォーマットの種類'),
url(フォントファイルまでのパス) format('フォーマットの種類');
}

このサイトでは利用していませんが、有料フォントなどをご利用の場合、この記述があるといいのではと思います。

Googleフォントの場合

Googleフォントの場合は上記のような記述は必要ありません。<head>~</head>に読み込むだけで大丈夫になってます。現在Googleフォントを選ぶとリンクソースに&display=swapが付随しているんですね。これは便利です。ありがたい。

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">

 

Fontawesomeの場合

これはいろいろ探してみました。そして見つけたのがこちらです。

Font-Awesome 5を使うときのPageSpeed Insights「ウェブフォント読み込み中の全テキストの表示」対策

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

上記のように書いて読み込んでいたので記事を参考に記述を加えてみました。
CSSに以下を追加しています。

@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
src:url("https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-regular-400.woff2") format("woff2"),
url("https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-solid-900.woff2") format("woff2");
font-display: swap;
}

 

修正後、再度Test My siteで確認

「ウェブフォントの読み込み中もテキストを表示する」

見事この指摘はなくなりました。ほかの要素を直していないので表示速度は変わりませんが、ひとまず1つ解決!

こんな記事もあります

カテゴリ一覧へ戻る

コメントをどうぞ

メールアドレスは非公開です。お気軽にコメントください。全項目入力必須項目です。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

プライバシーポリシー

Copyright© 笑顔計画 All rights reserved.