サイトが重い! もしかしてその原因、Webフォントじゃないですか? PageSpeedで比較してみた!

WordPress
スポンサーリンク

朗報です。サイトが重い原因がやっとわかりました。

通称「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」を使用してみます。僕の大好きなフォントです(笑)。

タブレットから見たサイトのデザインはこのようになりました。

M+フォントを使用したときのサイトデザイン

いいですね。これがいい味が出るのです。見えやすいという点においても、僕のお気に入りのフォントです。

サイトのスコアを測ってみます。

まずはスマホから。

うごっ。サイトのスコアが「43」です。これではちょっとまずいですね。特に、インタラクティブになるまでの時間(完全にそのサイトが表示される時間のこと)が、13秒というのはかなりひどいものです。

次に、パソコンのスコアです。

それなりのスコアが出ています。しかし、ここでは90を超えたいものです。

Webフォントなし

次に、設定から「游ゴシック体」と「ヒラギノ角ゴ」を選択してみます。

サイトのデザインはこんな感じになりました。

游ゴシックを使用したときのサイトデザイン

何やらもの寂しい感じになりました。見慣れた感というか、なんというか……。

特に「ホーム」とその横のアイコンなんかが、合っていないように感じます。

(ちなみに、フォントの太さは同じ「500」です。一時的にわかりやすいように変更しています。同じ500でも、フォントが対応していなければ500にはならないようです。)

さて、気にせずにサイトのスコアを調べてみます。

まずはスマホから。

おお! 「62」という、比較的高い数字が出ました。大手の会社もこのくらいです。

スコア的には約20ポイントも上がったことになります。インタラクティブになるまでの時間も約4秒改善されています。大きな成果です。

次にパソコンのスコアを見ていきます。

おお! スコアが緑色になりました。「97」です。文句のない点数ですね。10ポイントも上がりました。

問題もほとんどないようです。

しかし、MplusをはじめとするWebフォントが使えないのは正直ちょっと悲しいですね。

例えるなら、地元のスーパーがなくなってしまうくらい(えぇ……)。

 

そこで……。

スポンサーリンク

それでもWebフォントを使いたい場合は?

もし、Webフォントを捨てきれない方に朗報です。

解決策の糸口は「フォントの使わない部分を消してやる」という方法です。

例えば、サイトの読みやすさを重視するなら、それほど難しい漢字を使う必要はありませんよね?

むしろ、そういったものを使わないのであれば、削ってしまったほうが軽くなります。

この方法は、以下のサイトが参考になります。

サイトの高速化、軽量化をするために行った事 | 株式会社 エヴォワークス -EVOWORX-
先日某案件でペライチのコーディングを担当しました。ある程度完成したところでサーバーにアップしました。しかし読み込み終わるのに5秒以上かかりすごく重い。。。パッと見て負荷かかっていそうな部分を修正してもまだ動作がおかしい...

現在のこのサイトでは、これを使ってMplusに対応させています。地元のスーパーが戻ってきた安心感ですね。(←!?!?)

これを使ったときのサイトの点数は、モバイル「63」、パソコン「96」でした。ほとんどWebフォントが影響していないことがわかりますね!

まとめ

Webフォントは重い原因の一つに。

極力読み込まないようにしたり、削ったりすると軽くなるかも!

使っている人は、一度Webフォントについて考えてみるのもありですね。

 

以上、「Webフォント」と「サイトの軽さ」のお話でした。

コメントを残す

タイトルとURLをコピーしました