最終回の今日は、Web フォントを導入してもブログの表示速度にできるだけ影響を出さないようにする方法について書きたいと思います。
Web フォントを使うと表示が遅くなる？
Web フォントは大きいファイルになるので、そのデータが転送するまでは適用されません。フォントが適用されないということは、それまでの間はブログが表示されないということになります。先日も書きましたが、今回使った Web フォント Rounded M+ の場合、サイズが 1.5MB 〜 3.2MBにもなります。
| rounded-mplus-1c-medium.ttf | 3198380 |
| rounded-mplus-1c-medium.ttf.gz | 1536334 |
| rounded-mplus-1c-medium.woff | 1528824 |
| rounded-mplus-1c-medium.woff.gz | 1528825 |
これだけのデータを落とすのにどのくらいかかるのでしょうか。通信環境にもよりますが 1MB で数秒程度はかかります。それだけの時間、画面に文字が表示されないのはちょっと困りますし、そもそも 3.2MB のデータはもっと小さくしたいものです。
ということで、今回は Web フォントを使いつつ、読者の方の負担を少しでも減らすために次の 3 つの対策をやってみたいと思います。
- できるだけ小さいファイルを使えるようにする
- フォントファイルをキャッシュする(してもらう)
- Web フォントのロードを遅らせる
できるだけ小さいファイルを使えるようにする
フォントファイルは利用するブラウザの環境によって使われる形式が変わります。最新のフォーマットである WOFF 形式の場合は 1.5MB ですが、互換性が最も高い TTF ファイルは 3.2MB もあります。
そこで TTF 形式の場合は、圧縮ファイルも事前に準備することにしました。WOFF 形式の場合は、圧縮効果が無いので圧縮ファイルは使わないことにします。
WOFF が使えれば WOFF を、WOFF が使えない環境で圧縮転送ができるなら TTF の gz 圧縮を、それでもダメなら TTF 形式を使うことにします。
すでに前回まででこれらのファイルを Web サーバに設定しています WOFF 形式を使うか TTF 形式を使うかも設定済みなので、今回は TTF の gz 圧縮ファイルを送るための設定をします。
設定は .htaccess ファイルに記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<IfModule mod_rewrite.c> RewriteCond %{HTTP:Accept-Encoding} gzip RewriteCond %{REQUEST_FILENAME} !.gz$ RewriteCond %{REQUEST_FILENAME}.gz -s RewriteRule .+ %{REQUEST_URI}.gz <FilesMatch ".ttf.gz$"> ForceType font/truetype AddEncoding x-gzip .gz </FilesMatch> </IfModule> |
Apache の Mod Rewrite という機能を使って、gzip を使えて、gz ファイルが存在していた時にだけ gz圧縮ファイルを返却するようにして、かつ、ttf.gz という名前のファイルが返却された時に、そのファイルが font/truetype という種類だという設定をする、という内容になっています。
これで、圧縮された TTF 形式を送り出すことができるようになりました。
本当に圧縮ファイルが渡ってきているかを調べるのは少し難しいのですが、 WireShark というツールを使ってネットワークの状態を確認すると見ることができます。
ここでは詳細は割愛しますが、データを見ると圧縮されていることが分かります。
Content-Encoding: gzip となっています。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
GET /data/webfont/rounded-mplus-1c-medium.ttf HTTP/1.1 Host: azur256.com Connection: keep-alive Cache-Control: max-age=0 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.149 Safari/537.36 Accept: */* Referer: http://azur256.com/ Accept-Encoding: gzip,deflate,sdch Accept-Language: ja,en-US;q=0.8,en;q=0.6 HTTP/1.1 200 OK Date: Sat, 15 Mar 2014 13:03:43 GMT Server: Apache Last-Modified: Tue, 07 Jan 2014 04:31:58 GMT Accept-Ranges: bytes Content-Length: 1536334 Cache-Control: max-age=0 Expires: Sat, 15 Mar 2014 13:03:43 GMT Keep-Alive: timeout=2, max=12 Connection: Keep-Alive Content-Type: font/truetype Content-Encoding: gzip |
これで TTF しか読めない環境でも若干は速度が改善されると思います。
フォントファイルをキャッシュする(してもらう)
ブラウザには自動で色々なファイルをキャッシュする仕組みがあります。Web フォントファイルも自動でキャッシュされるのですが、そのファイルが変更されていないかを Web サーバに確認しています。変更されていたら、改めてダウンロードするような仕組みなのです。
しかし、このようなフォントファイルはめったなことでは変更しないファイルです。変更しないと分かっているなら、Web サーバに確認にいかないようにした方がもっと速くなります。
Web サーバの設定でキャッシュの有効期限を設定することで、ブラウザはその有効期限のうちは Web サーバに確認しなくなります。これも .htaccess に設定します。
|
1 2 3 4 5 6 7 8 9 10 |
<IfModule mod_expires.c> ExpiresActive On ExpiresDefault A0 <FilesMatch "\.(otf|ttf|eot|woff)$"> ExpiresDefault A2592000 Header append Cache-Control "public" </FilesMatch> </IfModule> |
otfやttf、eot、woffという拡張子の場合、キャッシュを 2592000 秒間(30日間)の間、Web サーバに確認しない、という設定です。数字の前についている “A” は、ブラウザが最後にアクセスしてからの時間、という意味になります。
詳細を Google Chrome のデベロッパーツールを使ってみてみます。Chrome のメニュー「表示」→「開発/管理」→「デベロッパーツール」で表示します。ネットワークの状態を見るので「Network」を選びます。
デベロッパーツールを表示した状態で、自分のブログにアクセスするとブラウザとブログの間のデータのやり取りを見ることができます。色々なファイルの情報が出てくるので、フィルタでフォントファイル名を設定すると簡単に見ることができます。
これがキャッシュがない状態の通信です。1.5MB のデータを落としてきています。この環境ではダウンロードに 3 秒掛かっています。
こちらがブラウザのキャッシュにファイルが存在していて、ブラウザが Web サーバに変更されているかを確認に行っている状態です。Web サーバからキャッシュファイルは最新なのでキャッシュを使うように、というレスポンス (Status 304) が返却されています。
通信状態が悪い環境で取った情報なので、この確認だけでも 1 秒も掛かっています。しかし、このような環境で通信することもあると思うので、この最新確認さえも出さない方が望ましいです。
そこで、先ほどの設定をしてからの状態を確認してみます。ブラウザから最新確認の要求が出ていないので、何も表示されません。これで大分良くなるはずです。
今回はフォントファイルのみの話をしていますが、画像なども同じように設定することで表示性能は格段に向上しますので、一緒に設定されることをお勧めします。
Web フォントのロードを遅らせる
Web フォントを設定するとフォントがロードされるまで、その文字が表示されません。今までの設定でできるだけ速くロードされるようにはしてきましたが、初めて訪問していただいた方々は Web フォントがダウンロードされるまでは文字が表示されなくなってしまいます。
そうするとこんなイメージになってしまいます。
記事タイトルに Web フォントを設定しているので、これが表示されないのは辛いです。そこで、 Web フォントのロードを遅らせて、Web フォントがロードされるまでは標準のフォントで表示するように設定します。Web フォントがロードされるまではこういう表示になります。
そして、Web フォントのロードが終わると、Web フォントが適用されてこのような表示になります。
遅延ロードには色々なやり方があるようなのですが、なかなか上手く行かなかったので、今回は スタイルシート設定を遅らせる方法でやりました。
具体的には CSS ファイルに設定していた font-face の設定を外出しにして、そのファイルが スタイルシートファイルだということを遅らせて設定することで、設定されたタイミングまで Web フォントの適用を遅らせます。
まず CSS ファイルに設定していた font-face の設定だけを独立した別ファイルにします。今回は、このような内容を記入したファイルを
/data/fonts.css というファイルを作ります。この時に元々のスタイルシートから指定を削除することを忘れないようにしてください。|
1 2 3 4 5 6 7 8 9 |
charset "utf-8"; @font-face { font-family: 'rounded-mplus-1c-m'; src: url('/data/webfont/rounded-mplus-1c-medium.eot'); src: url('/data/webfont/rounded-mplus-1c-medium.eot?#iefix') format('embedded-opentype'), url('/data/webfont/rounded-mplus-1c-medium.woff') format('woff'), url('/data/webfont/rounded-mplus-1c-medium.ttf') format('truetype'); } |
このファイルをブログのヘッダ部分で link として読み込みます。この行を読み込んだ時点では、まだスタイルシートとしては判定されていない状態になります。この時に id を指定しておきます。
|
1 |
<link href="/data/fonts.css" id="webfonts" /> |
フッタ部分で先ほどの link をスタイルシートとして指定します。link で指定した id を使ってスタイルシートとして指定します。
|
1 2 3 4 5 6 |
<script type="text/javascript"> (function () { var webfonts = document.getElementById('webfonts'); webfonts.rel = 'stylesheet'; })(); </script> |
これでフッタを読み込むまで Web フォントが適用されるのを遅らせることが出来ます。遅らせる幅を調整したい場合にはタイムアウトを使って延長する方法などもあります。
今回、一つ一つの技術としては知っていたものをまとめて使ったことにより色々と勉強になりました。Web フォントを使ってみようという軽い気持ちで始めたものの、今回もまたちょっと濃い内容になってしまいました。相変わらず分かりにくい説明で、すみません。
今回参考にした記事を載せておきますので、更に詳しく知りたい方は参照してみてください。
- Webフォントをできるだけ軽く表示する圧縮の.htaccessや遅延ロードJSを作ってみた | Web担当者Forum
- Google Web Fonts を非同期で読み込みをして表示改善する方法 – HAM MEDIA MEMO
- typekit/webfontloader
最後まで読んでいただきありがとうございます。
左のアイコンをクリックして、このブログを Feedly に登録していただけると嬉しいですFacebook ページでも情報を発信していますのでよろしかったら「いいね！」をお願いします
RSSリーダへの登録は こちら からどうぞ。
コメントを残す