Font Awesome の CSS を非同期読み込みにするようにした

どうも、たくチャレ(@takuchalle)です。

Font Awesome って便利ですよね。カッコいいアイコンを簡単に使えるようになりますし。

しかし、サイズが大きいのでサイト表示のブロッキングになりがちです。

そこで、非同期読み込みにしてみました。

<script type="text/javascript">
(function() { var css = document.createElement('link'); css.href = 'https://use.fontawesome.com/releases/v5.1.0/css/all.css'; css.rel = 'stylesheet'; css.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(css); })();
</script>

正直 JavaScript はまだイマイチ分かってないので説明はできないのですが1、検索してそれっぽい実装を探してみました。 体感でしか分からないのですが、表示が速くなりました。

他の CSS も可能な限り非同期読み込みにしたほうが速くなるんだと思うけど、サイズがそこまで大きくないので今回は Font Awesome だけにしました。

参考サイト


  1. いずれ勉強します…必要になった時に

同じカテゴリの記事