このブログのタイトル見出し部分を Google Web Fonts を利用して表示しているのですが、これまではhead内でフォントの指定とCSSの font-family での指定を入れていました。そのようにしていたところ、Googleのツールで、遅延して読み込ませるなど工夫しなさいと Warning が出てしまっていたので、ちょっとだけ改善を試みることにした。
Google Web Fonts は遅い？
フォントを選択する際に、スピードメーターのような表示の部分は赤いところを指し示していたことは事実だけど、体感的にはそれほど遅いと感じていませんでした。
Google Web Fonts の利用自体が遅いための警告かと思っていたのですが、今回指摘されたのは、ファーストビューでの表示が遅い・見えててほしい部分が見えないよということの様子。 Chrome で確認してみたところ、Fontをしていしていところは、なんだか初期読み込み時は表示がでない。どうやらfont-familyでGoogle Web Fontsの指定をしていると、読み込み完了まで表示されないらしい。
改善方法は？
では、表示させるためにはどうしたらいいか？
調べていると、Web Font Loader というJSが提供されているらしい。
参照先を読んでみるとそれほど難しくなく遅延読み込みはできそうということはわかったのですが、もっと何か簡単にできる方法がないかと調べると、どうやら今回の問題は、Google Web Fontsを非同期で読み込ませたら解決するらしい。
Webフォントの非同期読み込み - Weblog - Hail2u.net
方法は２つ掲載されていたのですが、そのうちの動的なlink要素の追加の方法だと、JSで要素を生成してから読み込ませる分、毎回表示にラグが発生するようになってしまった。
一方のrel="stylesheet"の後付けという方法では、一度ページ全体を読み込ませておけば、ページ遷移後はそれほどラグを気にしなくてもいいくらいの表示になりました。
link要素を読み込みを rel="stylesheet" を抜いて、後から追加するだけで改善されるなんて！
利用したソース
このブログでは利用箇所が１カ所のみだったので、シンプルに指定してみました
HTML
<link href="http://fonts.googleapis.com/css?family=Fredericka+the+Great&text=HAMEDIO" id="gwebfont" />linkの指定で rel="stylesheet" を抜いて idを何か指定しただけです。
JavaScript
(function () {
var webfonts = document.getElementById('gwebfont');
webfonts.rel = 'stylesheet';
})();HTMLで指定したlink要素のidを指定しただけ。
これで表示遅い！のWarningはとりあえず消えてくれました。
