WEBフォントとアイコンフォント
全てのホームページ訪問者に同じ書体を表示することができるwebフォントやフォントファイルを指定してhtmlコードを入力するだけで様々なアイコンが表示することができるアイコンフォントはとても便利でweb制作にはなくてはならないものになりつつあります。
● Google Fonts
https://fonts.google.com/
● アイコンフォント検索サイト Glyph Search
https://glyphsearch.com/
とても便利ですね。ですが、使用するにあたって一つだけ問題があります。
WEBフォントとアイコンフォントを使用するとページ表示が遅くなる
WEBフォントとアイコンフォントを使用するとページ表示が遅くなります。
Google PageSpeed Insightsでも指摘されていて
これらがあるとGoogle PageSpeed Insightsの点数も少し下がってしまいます。
ちなみに当ブログの点数はこんな感じです。
点数はそれほど悪くはないのですが
このページには、レンダリングをブロックするスクリプト リソース が 9 個、CSS リソースが 5 個あります。これが原因で、ページのレンダリングに遅延が発生しています。
と言われています、
CSS リソースが 5 個 のうち2 個がwebフォントとアイコンフォントなのでこれらを遅延ロードすることによってページ表示速度を上げてみます。
遅延ロードする前のソース
こちらのソースを遅延ロードしてみます。
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="//fonts.googleapis.com/css?family=Roboto:400,300" rel="stylesheet">
1. jquery.delay.load.js をサーバーにアップロード
11行目と12行目に読み込みたい CSS のURL を記述しておきます。
// jquery.delay.load.js
// copyright (c)2019 econosys system
// https://econosys-system.com/
// The MIT License (MIT)
// version 1.01
// load CSS , JavaScript
$(function() {
require_onload(["//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"]);
require_onload(["//fonts.googleapis.com/css?family=Roboto:400,300""]);
});
function require_onload(arg) {
if (is_array(arg)) {
var element = [];
for (var i = 0; i < arg.length; i++) {
if (
arg[i].match(/\.css$/) ||
arg[i].match(/fonts\.googleapis\.com/)
) {
add_child_css(arg[i]);
} else if (arg[i].match(/\.js$/)) {
add_child_js(arg[i]);
} else {
alert("check url : " + arg[i]);
}
}
} else {
if (arg.match(/\.css$/) || arg.match(/fonts\.googleapis\.com/)) {
add_child_css(arg);
} else if (arg.match(/\.js$/)) {
add_child_js(arg);
} else {
alert("check url : " + arg[i]);
}
}
}
function add_child_js(src) {
var element = document.createElement("script");
element.src = src;
document.body.appendChild(element);
}
function add_child_css(src) {
var css_element = document.createElement("link");
css_element.type = "text/css";
css_element.rel = "stylesheet";
css_element.href = src;
document.body.appendChild(css_element);
}
function is_array(obj) {
return Object.prototype.toString.call(obj) === "[object Array]";
}
2. フォントCSS読み込みをやめて、代わりにjquery.delay.load.js を読み込み
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="//fonts.googleapis.com/css?family=Roboto:400,300" rel="stylesheet">
↓
<script src="/blog/js/jquery.delay.load.js" defer></script>
defer をつけて jquery.delay.load.js 自身も遅延読み込みを行っています。
このスクリプトは domready 状態になると指定したcss（やjsも読み込み可）をロードしに行きますので、
ブラウザが画面表示のレンダリングを開始すると同時に読み込みも行われます。
3. 改良後のGoogle PageSpeed Insightsの結果
こうなりました。かなり優秀ですね。
補足：わざわざ javascriptを使わなくとも…。
遅延読込させたいcssファイルを bodyの閉じタグ手前（</body>直前）に置けばいいんじゃね？
と、思われた方。正解です。
javascriptを使用することで、先頭<head>タグ内に書ける（もちろんそこ以外に書いてもOKです）。遅延読込させている css js が一括でリストになっているので見通しが良い。（第三者が見たときにわかりやすい）
というメリットがあります。
使いたい！と思った方はどうぞこのページからコピペしてご使用ください。（ git は用意しておりません。）