ロフトワークの今を伝えるブログメディア

Webフォントは悪なのか? ブログの表示速度をTestMySiteで4秒までに改善したTips

テクニカル・ディレクターの安藤です。

今年のCMS大阪夏祭りからというもの、個人的にCraftCMSがアツくなっています。

先月CraftCMSを使い、自分のブログをリニューアルしました。

編集画面はこんな感じ。
ほぼまっさらな状態からカスタムフィールドで編集画面をカスタマイズしていくような作りなので、デフォルトの機能を殺すような無駄がありません。
カスタムフィールド職人には嬉しいCMSです。

おかげで快適に記事を執筆しているのですが、1つ問題がありました。
画像は都度pngoutなどで圧縮してからアップしているのに、表示がとても遅いんです。

Test My Siteでは「12秒」、GTMetrixでは「F/E」という真っ赤な評価

これはいかん!ということで主催という特権を使い、『Japan CraftCMS Meetup』で速度改善のワークを行いました。

とはいえ今回はCraftCMSやインフラのチューニングではなく、「サイト全体の速度改善」なのでCraft以外のCMSにもこれらのTipsは役立ちます。

元々のスペック

  • 動作環境:Xサーバー X10プラン
  • PHP:v7.1.4
  • mod_pagespeed設定:ON
  • Fast CGI:有効
  • OPcache:ON
  • ページ容量:6.6MB
  • Test My Siteでの評価:12秒
  • GTMetrixでの評価:F/E

アイディアを出しながらその場で実装し、これがどう変化するかを検証しました。

一度Noto Sansを外してみる。

僕のブログでは、GoogleとAdobeが共同開発したWebフォント『Noto Sans Japanese(源ノ明朝)』を使っています。ソースは『Google Fonts + 日本語 早期アクセス』から拝借。

Chromeの検証ツールで見たところ、このWebフォントがページサイズ全体の半分以上を占めていました。

素の状態で表示速度はどれくらいなのかを見るために、一回外すことに。

結果は・・・

嘘だろ・・・。

Webフォントを外しただけで、「12秒」から「6秒」にアップ

容量も2MB弱に。

源、お前だったのか・・・。表示速度を遅くしていたのは・・・。

表示速度的には、広告位置は「ページ下部」がベター

Webフォントの次に読み込みに時間がかかっていたのが、広告でした。

特にヘッダーにあった広告。
そこで躓き、以降のメインコンテンツを読み込むまでに時間がかかっていたようです。

というわけで、ヘッダー広告を無しに、サイドバーの広告も下の方に移動させました。

すると・・・

「6秒」から「4秒」にアップ!

今のところ、「速さは正義」と言っているGoogle先生のサービスを無効化して速くなっており、世の中の矛盾を考えずにはいられません。

越えられぬ「4秒」の壁…

しかしこれ以降、静的キャッシュや、画像リサイズのプラグインを導入してみましたが、Test My Siteでは大きな変化はありませんでした。

画像は元々圧縮してるはずなので、あんまり意味は無いのですが(笑

ということで、他の計測ツールも見てみます。

PageSpeed Insightsの「ブラウザのキャッシュを活用する」への対応

PageSpeed Insightsを見ると「ブラウザキャッシュを活用する」が目立ちました。

ドキュメントによると、「1週間以上、できれば最大で1年間先に設定する」のがGoogle先生の推奨のようです。

.htaccessに下記記述を加えました。

ExpiresActive On
ExpiresByType text/css "access plus 1 week"
ExpiresByType image/gif "access plus 1 week"
ExpiresByType image/jpg "access plus 1 week"
ExpiresByType image/jpeg "access plus 1 week"
ExpiresByType image/png "access plus 1 week"
ExpiresByType image/svg+xml "access plus 1 week"
ExpiresByType application/x-javascript "access plus 1 week"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType application/font-woff "access plus 1 week"

ExpiresByType MIMEタイプ "access plus 期間"といった感じに指定します。

このファイルはどうMIMEタイプを書いたらいいの?というときは、「MIMEタイプ svg」など、ファイル形式と一緒にggるとでてきます。

結果、少し評価があがりました。

  • Page Insight:ちょっと点数あがる。
  • GTMetrix:F/E→D/E

問題だったNoto Sansをサブセット化

さきほどWebフォントを全て外すと一気に6秒減!!でした。

とはいいつつ、どのデバイスでも読みやすいフォントでページコンテンツをユーザーに提供したいものです。

Noto Sansを第二水準文字までをカバーしてサブセット化してみました。
フォントファイルを自サーバーにアップして読み込ませます。

  • Test My Site:4~5秒
  • GTMetrix:D/E
  • 容量:3MB弱

Test My Siteがちょっとマシになりました。
しかしまだ開いた一瞬は文字が表示されず、「このページ重いのかな・・・?」と思ってしまう動きを見せます。

CDNの利用

「いっそここでCDN使っちゃう?」という流れで後日導入。

CraftCMSではFastlyが良いらしいのですが有料なので、今回は無料プランで設定が容易な「CloudFlare」にしました。

すると、GTMetrixで「D/E」→「B/D」にアップ!

グッと評価があがりました。

Googleフォントは、『日本語早期アクセス』ではなく『Google Fonts』から読み込むのがベスト

調べてみると、「結局自サーバーにフォントファイルを置くより、GoogleのCDN経由で利用したほうが速い」という記事も。

「やっぱりGoogleフォントをもう少し信じてもいいのでは?」と、もう一回見直すことに。

最初は『Google Fonts + 日本語 早期アクセス』のソースを拝借してましたが、実はGoogle FontsからでもNoto Sansは利用できます。今度はGoogle Fontsから読み込む方法をとりました。

STANDARD、@importの二種類方法はありますが、今回は@importにしました。

STANDARD(<head>にCSSのリンク1行追加する)だと、Pagespeed Insightの「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」で、自分がホストしてるCSSファイルなのに指摘するのがちょっと煩わしいので(笑

で、両者を比較したところ・・・大きな違いがでました

1.Google Fonts + 日本語 早期アクセス

2.Google Fonts(@import)

「1.日本語早期アクセス」はフォントファイルまで読みにいってますが、「2.Google Fonts」はcssファイルを読むだけでフォントに関わる部分の処理は終了しています。

わずか100ミリ秒〜200ミリ秒!感覚的には、開いたのとほぼ同時に文字が表示されました。

自分の環境では、サブセット化よりも超速いです。

この違いは、ホストしているフォントウェイトの差にあるのかもしれません。
「日本語早期アクセス」では8ウェイト対応していますが、「Google Fonts」では400か700の2ウェイトのみ。

「日本語早期アクセス」で全8ウェイトの中から、CSSで指定している必要なウェイトのフォントファイルを都度見に行っている…という感じなのでしょうか。

Googleフォントの場合、使うウェイトが標準と太字だけだったら、Google FontのCDN経由からの利用が一番速いようです。

現状

めっちゃ速くなりました!!笑

  • 容量:6.6MB→1.8MB
  • TestMySite:12秒→4~5秒
  • GTMetrix:F/E→C~B/D

関連リンク

日本語早期アクセス:https://googlefonts.github.io/japanese/
Google Fonts:https://fonts.google.com/
ブログ:https://andreport.net
Japan CraftCMS Meetup:https://www.meetup.com/ja-JP/Japan-Craft-CMS-Meetup/

安藤 大海 安藤 大海

ロフトワークの日本神話オタク。
2016年にロフトワーク入社。
前職でサイト制作をおこなってきたスキルを活かし、主にWordPress案件における技術面のサポートを行う。

関連記事