朗報です。サイトが重い原因がやっとわかりました。
通称「Webフォント」と呼ばれるものが原因でした。
僕のサイトでは、M+フォントという、すっきりして見えやすいフォントを使っていたのですが、それが仇となったのです……。
今回は、重さの原因であるWebフォントの導入/導入なしを、Googleの「PageSpeed Insights」を使って比較していきたいと思います。
Webフォントがサイトを重くする原因だった
そもそも、Webページを読み込むときに、文字の字体（フォント）を指定してやる必要があります。
指定するときに、「それぞれの閲覧者のPCに入っているフォント（内蔵フォント）で読み込む」のか「Web上にあるフォントを読み込む（Webフォント）」のか、選ぶことができます。
両者の違いはというと、大体こんな感じです。
内蔵フォントだと、WindowsやMacなどの機種間で表示されるフォントが違うのです。
Webフォントだと、Web上のフォントを読み込んでから表示します。なので、機種間でもフォントが変わらないのです。
実験 Webフォントがある状態とない状態を比べる
まず、百聞は一見に如かず。Webフォントあり/なしでサイトのスコアを測ってしまいましょう。
当サイトでは、Cocoonを使用しています。
Cocoonでは、「Cocoon設定」→「全体」の中の「サイトフォント」から変更できます。
見たところ、ローカルフォントとしてほとんどのパソコンにインストールされている「游ゴシック」や「ヒラギノ角ゴ」（Macのみ）、メイリオ（Windowsのみ）などが選べるようになっています。
その下には、Webフォントである「Noto」系や「M+（ここではMplusと表記）」系が選べるようです。
Webフォントあり
まずは、「Mplus 1p」を使用してみます。僕の大好きなフォントです（笑）。
タブレットから見たサイトのデザインはこのようになりました。
いいですね。これがいい味が出るのです。見えやすいという点においても、僕のお気に入りのフォントです。
サイトのスコアを測ってみます。
まずはスマホから。
うごっ。サイトのスコアが「43」です。これではちょっとまずいですね。特に、インタラクティブになるまでの時間（完全にそのサイトが表示される時間のこと）が、13秒というのはかなりひどいものです。
次に、パソコンのスコアです。
それなりのスコアが出ています。しかし、ここでは90を超えたいものです。
Webフォントなし
次に、設定から「游ゴシック体」と「ヒラギノ角ゴ」を選択してみます。
サイトのデザインはこんな感じになりました。
何やらもの寂しい感じになりました。見慣れた感というか、なんというか……。
特に「ホーム」とその横のアイコンなんかが、合っていないように感じます。
（ちなみに、フォントの太さは同じ「500」です。一時的にわかりやすいように変更しています。同じ500でも、フォントが対応していなければ500にはならないようです。）
さて、気にせずにサイトのスコアを調べてみます。
まずはスマホから。
おお！ 「62」という、比較的高い数字が出ました。大手の会社もこのくらいです。
スコア的には約20ポイントも上がったことになります。インタラクティブになるまでの時間も約4秒改善されています。大きな成果です。
次にパソコンのスコアを見ていきます。
おお！ スコアが緑色になりました。「97」です。文句のない点数ですね。10ポイントも上がりました。
問題もほとんどないようです。
しかし、MplusをはじめとするWebフォントが使えないのは正直ちょっと悲しいですね。
例えるなら、地元のスーパーがなくなってしまうくらい（えぇ……）。
そこで……。
それでもWebフォントを使いたい場合は？
もし、Webフォントを捨てきれない方に朗報です。
解決策の糸口は「フォントの使わない部分を消してやる」という方法です。
例えば、サイトの読みやすさを重視するなら、それほど難しい漢字を使う必要はありませんよね？
むしろ、そういったものを使わないのであれば、削ってしまったほうが軽くなります。
この方法は、以下のサイトが参考になります。
現在のこのサイトでは、これを使ってMplusに対応させています。地元のスーパーが戻ってきた安心感ですね。（←！？！？）
これを使ったときのサイトの点数は、モバイル「63」、パソコン「96」でした。ほとんどWebフォントが影響していないことがわかりますね！
まとめ
Webフォントは重い原因の一つに。
極力読み込まないようにしたり、削ったりすると軽くなるかも！
使っている人は、一度Webフォントについて考えてみるのもありですね。
以上、「Webフォント」と「サイトの軽さ」のお話でした。
コメントを残す