Lighthouse点数を上げるためのWebフォント利用方法

Webフォントと言っても、この記事でご紹介するのはGoogleフォントに限られるかもしれませんが、20点ほど点数が上がった方法をご紹介します。

Lighthouseとは

Lighthouse

LighthouseはGoogleが提供するホームページの品質チェックツールです。
「パフォーマンス」「アクセシビリティ」「ベストプラクティス」「SEO」のカテゴリーごとに点数が示され、このうち「パフォーマンス」はPageSpeed Insightと同じ採点基準です。
「パフォーマンス」はLighthouseの場合、実行環境のネットワーク速度にも依存して点数が決まるため実行するたびに点数が違いますが、数回実行すれば大体そのページの点数は見えてくると思います。

パフォーマンスの点数とSEOの関係について

ページの表示速度はUX（ユーザーエクスペリエンス）に関わるため、Googleの検索結果表示順位に影響します。ページの読み込み速度を影響する要素として採用することをGoogleは明言しています。Googleが具体的に何をもってそこを判断しているかは分かりませんが、Lighthouseの点数は気にすべきと言えます。

パフォーマンスの点数に大きく影響すること

パフォーマンスの点数に大きく影響するのは、読み込んでいるファイルサイズです。なので、画像を多く使っているページはいかに効果的にファイルを圧縮していようが、やはり点数が下がります。次の画像は当サイトで比較的画像が少ない事業者概要（About）のページの点数と、画像が多いトップページの点数です。

パフォーマンス以外が全て100点というさりげなくもないアピールはさておき、パフォーマンスは事業者概要（About）のページが80点、トップページが51点です。

実はトップページの点数は、以前は50～60点だったのがここしばらく30点ぐらいをさまよっていました。さすがに気にしていたのですが、先日、ちょっと仕事が落ち着いたときに色々試した中で、Googleフォントの読み込み方法で20点も向上したのです。

なお、ファイルサイズ以外では、次にパフォーマンスへの影響が挙げられるのはJavaScriptの利用だと思います。jQueryの利用有無で10点ぐらい違ったという記事もあります。jQueryはプログラミング量が膨大ですからねえ。当サイトはそれも見越して最初からjQuery使ってないので、jQuery利用有無による差は検証していません。

パフォーマンスの点数を上げたGoogleフォント読み込み方法について

元々、パフォーマンスのために良かれと思って、ダウンロードしたファイルを変換後レンタルサーバーにアップし、そこから読み込んでいたのですが、CDNを使って読み込む方法に変えてみたところ、20点ぐらいアップしました。

ユーザーの体感速度としてはレンタルサーバーから読み込む方が早いことが多いと思ってるんですけどね。キャッシュはどちらも働くはずですが、GoogleのCDNの方がキャッシュの性能が良いということなんでしょうか？

20点上がったことによる検索結果順位への影響

今のところ、この20点の差が理由で順位が上がったような感じはしていません。順位への影響があるのはユーザーがかなり遅いと感じるようなページのみということをGoogleは提示しているのと、そのようなページでもコンテンツによっては上位に表示されることもある、と提示しているので、この結果だけでは何とも言えませんが。

まとめ

Lighthouseのパフォーマンスの点数を意識する場合、Googleフォントはダウンロードして利用するのではなく、CDNで利用した方が現時点良さそうです。