Font Awesome の「インラインSVG化」をご報告、効果や導入方法など

2019年03月22日
0
0
FC2ブログ・便利ワザ・アイテム・HTML・SEO対策など

FC2ブログゆうらり Happy Smile」を運営するブロガーMです。

当ブログをお読み下さる方に快適な閲覧環境をご提供するため、Webページ読み込み速度の改善、ひいては、ブログ全体の軽量化につながるよう、昼夜を問わずに試行錯誤を繰り返し、メンテナンスに励んでいる次第です。

ブログやWebサイトの閲覧環境を最適化させる方法は、まず何よりも「無駄を削る」ことが先決だと思います。ボク自身、これまで実装してきた重いJSなどの排除を決行し、可能な限りの洗練化に臨んできたつもりです。

その結果、あの「阿部寛のホームページ」並みの爆速ぶりに少しでも近づけたような気がします。

今回は、その一環として、ボクにとってはかねてからの懸案材料で、「ブログが重くなる原因」のひとつだった『Font Awesome』のJS読み込みを廃止。全面的なインラインSVG化が終了したので、そのご報告になります。

イイね!

スポンサードリンク

Font Awesomeはブログのページ読み込みを遅延させる弊害のひとつだった

Webフォントのひとつとしてあまりにも有名な「Font Awesome」。ご自身で導入されたブロガーさんも数多くいらっしゃるはずです。

ちなみに、ボクのブログに貼ってあるFacebookのシェアボタンがFont Awesomeの一例です。

FacebookのWebフォント

しかし、現在のバージョン5はとても重く、ページ読み込みにおける弊害のひとつでした。

重いFont Awesomeを読み込まずに表示させる「インラインSVG化」という方法

だからといって、Font Awesomeを全面的にやめてしまうと、SNSボタンをどのように表示させるのかを悩まなければいけません。

そこで、重いFont Awesomeは読み込まないけど、Font Awesome自体は表示させちゃうよ、という方法を採用することにしたんです。それが、Font AwesomeのインラインSVG化という方法です。

この方法自体は前から知っていましたが、何だか取っつきにくい気がしまして(汗)だから、「他に改善できることから進めよう」と、いつも後回しにしてきたんです。

ボクが使用するFC2ブログのテンプレートは、デフォルトがすでにインラインSVG化されてました。しかし、上に書いた事情から、自分が使う新たなWebフォントについては、さらにFont Awesomeを追加でJS読み込みさせたうえで表示させるという、無駄なことをやっていたのです。

「インラインSVG化」を導入するうえで参考になるFont Awesomeの記事はこちらです。

Font Awesomeのことは後回しにして、他の改善策を進めてきたボクですが、ほとんどの事をやり終えたので、結局、Font Awesomeのところに戻ってきました(^_^;)

よし、もう逃げるのはやめるぞ!!と考え、インラインSVG化の勉強をはじめました。そんな中でずいぶんと参考になった記事がありましたのでご紹介します。

脱Font Awesomeを目指す方へ修正方法や提案など

Font Awesomeのバージョン5重たいですよね (´・ω・`)
(以下 FA と称す)


2018年現在で推奨は JS + SVG での表示です。
もうひとつ CSS + webアイコンフォント も残されています。
CSSの方をFAがいつまでサポートしてくれるか不明ですが、初心者にとってはCSSの方が扱いやすいと思います。


FC2はHTTP/2が利用できますので並列リクエストが可能とはいえ、ページの(htmlの)レンダリングは CSSのパースが終わらなければ始...

Font AwesomeのインラインSVG化を果たした結果、ページ読み込み速度がさらに改善!!

何とか足りない頭を使い、Font AwesomeのインラインSVG化のことを理解しました。そして、さっそく自身のブログテンプレートを全面修正したのです。

全面的なインラインSVG化が終了したところで、やっとFont Awesomeの読み込みJSコードを削除!!このあと、PageSpeed Insightsに採点してもらいました。

ページ読み込み速度の点数

結果的に、5ポイントほど評価がアップしましたヨ(^^)めでたしめでたし。

Jeremy L. Wagner (著), 武舎 広幸 (監修, 翻訳), 阿部 和也 (監修, 翻訳), 上西 昌弘 (監修, 翻訳)
内容紹介
Webパフォーマンスの基礎知識から最適化テクニックまで!

本書はWebパフォーマンスの実践書『Web Performance in Action』の日本語版です。Webサイトをより速くするためのテクニックを網羅的に、かつ丁寧に解説した一冊です。
Webパフォーマンスの基礎知識から、CSSの最適化、クリティカルCSS、画像のレスポンシブ化・最適化、フォント、JavaScriptの高速化、サービスワーカーを使ったパフォーマンス向上、データ転送の効率化、HTTP/2、gulpを使った自動化まで、Webページ・サイトのスピードをアップするために知っておくべき知識とテクニックを徹底的に解説しています。



関連記事

この記事が気に入ったら
シェア!

 シェア
M
Posted by M
FC2ブロガー/ファッション研究家/企業家/投資家/不動産コンサルタント/会社経営/将棋六段/おうちごはん男子部/料理を悪戦苦闘修行中/ヘッドスパとスイーツをこよなく愛する46歳/2011年38歳の若さでほぼ末期の胃がん宣告/奇跡的に生還!/人生なんて気持ち次第!!きっとなんくるないさ~
FC2ブログオフィシャルおすすめブログ認定バナー

Comment 0

There are no comments yet.

コメントする