FC2ブログテンプレート「La_Vita」で脱 FontAwesome5 してみました

2018年07月25日
2
0
Topics

さて、前回記事で、弊ブログで利用しているアイコンフォントの「 Font Awesome 5 は重すぎる! 」とChromeのモバイルエミュレーターで分析をしておりましたが、改めてその画像を載せてみますね。

要は、Font Awesome 5 は、パソコンでの閲覧であればあまり気にならない程度のブログ表示速度の負荷なんですが、スマホやタブレットでかつモバイル回線での閲覧時にはかなりの負荷要素(契約データ量を食いまくる)になっていることが解りまして、筆者はこのような具体的数値を目にしちゃうと「こりゃなんとかせにゃあかん!」って思ってしまうのです、要はテクニカル的凝り性らしいです、問題解消せねばならぬ!って感じに(でも使命感や強迫観念はまったくありません(爆))

他のブロガーさんでしたら「_(‥ )フーン それが何か?」ってくらいに無関心なことかもしれません (^_^; アハハ…

ですから、筆者は矢も立ても射られず、早速、利用中のレスポンシブテンプレート「La_Vita」にデフォルトで設定されている Font Awesome 5 の読み込みを除外して、ブログ表示にあまり負荷を与えない見た目に同じようなアイコンフォントである 「 Icongram 」 と入れ替えることを考えました ^^

まぁ、以前からこの Icongram には少なからず関心はあったんですが、、、

早速に、いま利用中のレスポンシブテンプレート「La_Vita」のHTMLソースに設定されている Font Awesome 5 のアイコンフォントを全て抜き出して、それに見た目に対応する Icongram の個々のアイコンのURLを抽出してリストに並べてみました。

要は Font Awesome 5 は辞めて、テンプレートや記事に必要な Icongram のみを設定する訳で、使わないものはブログに読み込まないという次第です ^^


Font Awesome 5 Icongram
<i class="far fa-comment-alt"></i> https://icongr.am/material/comment-outline.svg
<i class="far fa-flag"></i> https://icongr.am/fontawesome/flag-o.svg
<i class="fas fa-sync-alt"></i> https://icongr.am/material/sync.svg
<i class="fas fa-caret-right"></i> https://icongr.am/fontawesome/caret-right.svg
<i class="fas fa-caret-left"></i> https://icongr.am/fontawesome/caret-left.svg
<i class="fas fa-times-circle"></i> https://icongr.am/fontawesome/times-circle-o.svg
<i class="fas fa-comment"></i> https://icongr.am/fontawesome/comment.svg
<i class="fas fa-pencil-alt"></i> https://icongr.am/fontawesome/pencil.svg
<i class="fas fa-user"></i> https://icongr.am/fontawesome/user-o.svg
<i class="fas fa-link"></i> https://icongr.am/jam/link.svg
<i class="fas fa-arrow-up"></i> https://icongr.am/feather/arrow-up.svg
<i class="fas fa-arrow-down"></i> https://icongr.am/feather/arrow-down.svg
<i class="fas fa-home"></i> https://icongr.am/fontawesome/home.svg
<i class="fas fa-angle-up"></i> https://icongr.am/fontawesome/angle-up.svg
<i class="fas fa-angle-down"></i> https://icongr.am/fontawesome/angle-down.svg

そうそう、Icongram はアイコン個々が .svgファイル でして、要は一種の画像ですから、ブログ等でそのアイコンを表示するには一般的画像と同じ表示方法になります、つまり、、、

Icongram の表示方法
<img src="https://icongr.am/feather/external-link.svg" alt="">

これを実際のブログ表示にしますと このようになります ^^

サイズと色を調整する
<img src="https://icongr.am/feather/external-link.svg?size=16&amp;color=3b7fdf" alt="">

サイズと色を設定すると このような表示になるんです。

おやまぁ、テキストとアイコンが上下に位置ズレしちゃってますから、CSSでこれを直しましょう (^_^; アハハ…

位置ズレ調整用CSS(テンプレート編集のCSS欄末尾に追加)
/* Icongram がテキストの下へズレる調整 */
img.icongram {
vertical-align: middle;
}

先ほどのブログ内へのアイコン表示の書き方にクラスを与えます。

位置ズレ修正用クラスを付記する
<img class="icongram" src="https://icongr.am/feather/external-link.svg?size=16&amp;color=3b7fdf" alt="">

位置ズレ調整をすると このようにテキストと並びます ヽ(^^ ) ヨシヨシ

このように Icongram ってけっこう楽しく扱えるんです(笑)

ただ、先ほどもチラっと書きましたが、Icongram の表示方法は画像と同じってことは、表示させる為にその都度HTTPリクエストが発生してしまってまたブログ表示の遅延に繋がってしまう要素はあるんですが、実はアイコンそのもののファイル容量は微々たるものでして、同一記事内に山ほどの Icongram を表示するのでなければ何も問題にはなりません (^^ゞポリポリ

それは、Font Awesome 5 の大きな読み込み負荷を排除したことで、HTTPリクエスト分の軽微な負荷は吸収されてしまいます(笑)

もし気になるのでしたら、画像読み込み遅延 LazyLoad を当てれば良いですし ^^

この結果、弊ブログのモバイル回線での表示はなんと 1.2秒 も速くなりました! 「 えっえっ? たったの 1.2秒だけ?(笑) 」 と笑う方達が多いんでしょうけど、ブログの表示速度改善努力ってこんなものなんですよ~ このような種々の努力の積み重ねがブログ表示高速化に繋がるのです ^^

「オラ、そんな面倒くさいことなんてやってらんね!」ってことでも良いんです、マニアックな世界のことですから (≧ω≦。)プププ

Font Awesome 5 から Icongram へと変更したんですけど、漏れちゃってるアイコンがないことを祈る (^_^; アハハ…
そうそう、過去記事で表示出来なくなってしまってます Font Awesome 5 は放置します~ (^^ゞポリポリ


あなたのブログはモバイルフレンドリーですか?
Google モバイルフレンドリーテスト

あなたのブログ内分析はGTmetrixが強力です!
GTmetrix


検索からの方はトップページへもどうぞ



関連記事
ぼっちん

Comments 2

There are no comments yet.

mochi  

なるほどSVGファイル利用ですか。勉強になります。

こんにちは。ぼっちんさん。

地道な作業による挑戦ご苦労様です。(^▽^;)
SVGファイルってこういう使い方もできるんですね。
うん。これはとても勉強になりました。
FontAwesome5もSVGファイルをダウンロードしてくることで同じような応用ができそうですね。

SVGについて先程ちょっと調べてみましたが、インラインで書いたり1つの外部ファイルにまとめたりと利用方法もいくつかあるようなので、暇を見て僕もマニアックな挑戦をしてみたいと思います。

2018/07/25 (Wed) 22:08
ぼっちん

ぼっちん  

To mochiさん

mochiさん、こんばんは コメントをありがとうございます ^^

地道な作業による挑戦ご苦労様です。(^▽^;)
mochiさんの先日のコメントに触発されて(笑)私もちょっとばかり頑張ってみました(笑)

FontAwesome5もSVGファイルをダウンロードしてくることで同じような応用ができそうですね。
SVGについて先程ちょっと調べてみましたが、インラインで書いたり1つの外部ファイルにまとめたりと利用方法もいくつかあるようなので、暇を見て僕もマニアックな挑戦をしてみたいと思います。

えっえっ? 個々のsvgファイルを「外部ファイル1つにまとめる」なんて出来るんですかぁ? そりゃ楽しいですねぇ、それが出来たら複数作ってしまったHTTPリクエストを1個で済ませられるじゃないですか (^-^)//""パチパチパチ
いやいや、そりゃ私も興味津々になっちゃいましたよ。
もの凄い情報をありがとうございます、なんかo(^-^)oワクワクしてきちゃいました (^^ゞポリポリ

いやぁ、私もちょっと真剣にもっといろいろと研究してみますね~♪

2018/07/25 (Wed) 22:21

Leave a reply