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

M

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

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ページ・サイトのスピードをアップするために知っておくべき知識とテクニックを徹底的に解説しています。



スポンサードリンク

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

 シェア
FC2ブログFontAwesomeインラインSVG化WebフォントWebデザインページ読み込み速度ブログ運営カスタマイズ
関連記事

Comments 0

There are no comments yet.

コメントする

未分類 (0)
胃がん(ブログ、闘病記録、胃癌ニュース、私の症状など胃ガン情報全般) (5826)
胃がんブログ (247)
よりぬき 胃がんブログ (16)
胃がん闘病記・日記 (5514)
胃がん手術後の食事記録 (6)
胃切除後の料理など (33)
がん治療のクラウドファンディング (10)
胃がん History (83)
ステージ3B 多発性高度リンパ節転移胃癌 (57)
胃がん再発「転移性肝がん」で余命宣告 (25)
がん のこと(ガン情報全般) (432)
がんブログ (243)
がんニュース (189)
胃がん 障害年金ブログ (71)
障害年金 - 準備編 (23)
障害年金 - 審査から年金受給まで (12)
障害年金 - 審査請求・不服申立 (26)
障害年金 - 再審査請求 (10)
Amazon (ニュース、お得なセール情報など) (129)
Amazonセール (2)
📱kindleセール (126)
今日のエッセイ (63)
ニュース・芸能・話題 (639)
恋愛・人間関係 (20)
終活ブログ (10)
グルメ (44)
胃切除後の食事・レシピ (669)
ご飯・おかゆ・和食 (174)
おかず (138)
味噌汁・スープ (73)
カレー関係 (66)
パン・洋食 (63)
麺類 (113)
その他、簡単レシピなど (39)
ブログ (217)
FC2ブログ・便利ワザ・アイテム・HTML・SEO対策など (182)
Google Adsense (アドセンス) (8)
趣味や将棋のこと (26)
ファッション (1)
司法書士 (26)
仕事・実務や登記のこと (1)
事件ファイル (25)
COLLECTION (28)
家電 (13)
ホーム&キッチン (4)
ビューティー&ケア (4)
QOLの改善&ヘルスケア (2)
お酒 (5)