[試] サイト表示速度を高速化する方法 | アイコンフォント(Webフォント)による表示速度改善

[試] サイト表示速度を高速化する方法 | アイコンフォント(Webフォント)による表示速度改善

Webサイトの表示速度を高速化する手法の一つにアイコンフォント(Webフォント)の利用があります。

このエントリでは、ただ利用するのではなく、表示速度改善の観点でアイコンフォントのメリットを最大限に活かすための方法を紹介します。

SPONSORED LINK

アウトライン

アイコンフォントとは

Webフォントは、Webサーバー上にフォントファイルを置き、そのフォントをページのテキストに利用できるようにした技術です。

アイコンフォントはアイコン形式のWebフォントのことで、テキストフォントの代わりにアイコンのフォントデータを表示させます。

アイコンフォントを利用するメリット

HTTPリクエスト数を削減可能
アイコンを複数の画像ではなく一つのファイルとしてまとめることができるため、HTTPリクエストを削減できます。サーバとの往復を削減できるため表示速度の改善が期待できます。
CSSによる色、サイズの変更や影、アニメーション等の付加が容易
画像だと元々作成したパターンのみしか表示できませんが、Webフォントはその名の通りフォントなのでCSSのfont-sizeやcolor等を使用して柔軟にカスタマイズできます。
高解像度のデバイスでもきれいに表示される(拡大しても表示がキレイ)
ラスタ形式のjpegやpngと異なりベクター形式なので、拡大してもぼやけることなくくっきり綺麗です。Retina対応のために2倍の解像度の画像を個別に用意することがありますが、Webフォントの場合は、単体で様々な解像度に対応できます。
読み込むデータ容量を削減可能
画像を使用するよりもデータ容量が軽くなります。画像アイコンを使用する場合、一般的にRetina対応やマウスオーバー用等、用途ごとの画像を準備する必要があります。そのため用途の数だけ画像が増え、読込データ量の増大につながります。一方でWebフォントは、一つのファイルで複数の用途に対応できるため、読込データ量を削減することができます。これは使用している画像のパターンが多いサイトほど顕著に効果があらわれます。

アイコンフォントを利用するデメリット

古いブラウザでは対応していないので表示できない
MS IE6やIE7、Mozilla Firefox 3等、古いブラウザは、Webフォントに対応していないため表示できません。

アイコンフォントは本当に軽いのか

念のための補足です。Retinaの様な高解像度デバイス対応が必要なく、画像のサイズが小さく、パターンも少ない場合においては、画像を使用した方が読込データ量が小さくなります。

サイトの特性に合わせてどちらを使用するか検討する必要があります。

画像を使用する場合は、表示速度を改善するためにCSSスプライトの適用をおススメします。使用する画像を結合することで、HTTPリクエストを削減することができます。

[試] サイト表示速度を高速化する方法 | CSS Sprite(CSSスプライト)による表示速度改善

アイコンフォントを使用する方法

アイコンフォントの効果的な使い方

Web上で提供されているアイコンフォントは多数のアイコンがまとめられていて利用しやすいのですが、使用しないアイコンまでダウンロードするため、サイトの表示高速化の観点では望ましくありません。

そこでおススメしたいのが、必要なアイコンフォントのみを選択して使用する方法です。

サーバーからダウンロードする容量を最小限にできるため、上述した表示速度を改善する観点でのアイコンフォントの特性を最大限に活かすことができます。

必要なアイコンフォントのみを抽出して使用するIcoMoon App

必要なアイコンフォントのみを抽出して使用するには、以下IcoMoon Appを使用します。

IcoMoon Appは、Web上で好きなアイコンをピックアップしてWebフォントにできるサービスです。選択したアイコンフォントを抽出したフォントファイルと参照するためのCSSを自動生成してくれます。

生成されたフォントファイルをサーバにアップロードし、自動生成されたCSSでアイコンフォントを参照するだけでアイコンを表示させることができます。

IcoMoon App – Icon Font Generator

IconMoon Appの使用方法

ここでは、IconMoon Appを使用してMac、Windows、Linuxのアイコンのみを抽出し、Webフォントとして活用する例を紹介します。

以下は全体のおおまかな流れです。

  1. 使用したいフォントにタグ名を付けます。これがフォントを参照するためのCSSセレクタに使用されます。
  2. 使用したいフォント(タグを付けたフォント)を選択します。
  3. フォントファイルをダウンロードします。
  4. フォントファイルをサーバーにアップロードします。
  5. ダウンロードしたCSSの設定をサイトのCSSに追記します。
  6. HTMLにアイコンを表示するためのコード(CSSセレクタの参照)を追記します。

フォントのタグ付け

画面上部のアイコン編集ボタンを選択した上で、使用したいアイコンをクリックします。編集画面が表示されるので、Tagsの欄にタグ名を記入します。Save Copyボタンをクリックして保存します。

ここで記入したタグ名がアイコンを参照するためのCSSセレクタに使用されるので、わかりやすい名前が良いでしょう。

これを使用対象アイコン全てに対して行います。

method-speed-up-display-of-web-site-with-web-font-02

使用したいフォントの選択

編集しSave Copyボタンをクリックして保存したアイコンは、Your Custom Icons欄のトップに別アイコンとして追加表示されます。使用対象のフォントを選択します。データ量を最小限にするため、極力使用するフォントのみを選択します。

Fontボタンをクリックして、ダウンロード画面に移動します。

method-speed-up-display-of-web-site-with-web-font-03

フォントファイルのダウンロード

選択したアイコンが全て表示されていることを確認して、Downloadボタンをクリックします。

アイコンのフォントファイルとCSSが圧縮されたファイルがダウンロードされます。

method-speed-up-display-of-web-site-with-web-font-04

ダウンロードしたファイルを解凍すると以下の様な構成になっています。

style.cssには、アイコンフォントを参照するためのCSS設定が記載されています。fontsフォルダには、アイコンフォントファイルが格納されています。

method-speed-up-display-of-web-site-with-web-font-05

fontsフォルダの中は以下の通りです。

method-speed-up-display-of-web-site-with-web-font-06

フォントファイルのサーバへのアップロード

FTP等を使用してサーバに上記fonts以下のファイルを全てアップロードします。

CSSの設定追記

アイコンフォントを参照するためのCSS設定(ダウンロードしたstyle.cssの内容)を追記します。WordPressであれば、使用中のテーマのstyle.cssに追記します。

その際、以下font-faceのurlの部分(フォントファイルのパス)をアップロードしたパスに合わせて修正する必要があります。

以下のコードは、私が今回アップロードしたパスに合わせて修正した例です。

そして、以下CSSセレクタ部分を追記します。この部分が個別にフォントアイコンを参照するためのIDの役割をはたします。

HTMLへアイコンを参照するコードを追記

表示させるためにHTMLにアイコンを参照するためのコードを追記します。上記CSSセレクタ(icon-linux、icon-windows、icon-mac)を使用して参照します。

以下の様にアイコンフォントが表示されます。

フォントなので、CSSのcolorやfont-size等を使用してカスタマイズも簡単です。
色とサイズを変更した例を紹介します。

以下が、色とサイズを変更するためのCSSコードです。

上記のクラスを追加して色とサイズを変更したコードが以下です。

以下の様に表示されます。見ての通り、拡大表示してもぼけることなく綺麗です。

おススメの外部アイコンフォント

IcoMoon Appは、単体でもIcoMoonのアイコンを利用できますが、外部のアイコンフォントを読み込んで、組み合わせて使用することができます。

そこでおススメしたいアイコンが以下です。IcoMoonと以下のアイコンセットを組み合わせることで、ほぼ使用したいアイコンは見つかると思います。

尚、外部アイコンフォントを読み込めるということは、自作のアイコンも読み込んで組み合わせることが可能ということです。

本筋から離れますが、外部Webフォントと自作フォントを別々に読み込んで使用していた方は、IconMoon Appを使用してまとめると表示速度改善の観点で幸せになるかもしれません。自作アイコンは、読み込むためにベクター形式(SVG形式)にする必要があります。

WebHostingHub Glyphs

2075種類(執筆時点)のアイコンがフリー(商用利用も可)で利用できます。

WebHostingHub Glyphs

Font Awesome

361種類(執筆時点)のアイコンをフリー(商用利用も可)で利用できます。

Font Awesome Icons

Flaticon

8857種類(執筆時点)のアイコンをフリー(商用利用も可)で利用できます。

Free vectors icons for download and Icon font | Flaticon

IcoMoon Appで外部アイコンフォントを読み込む方法

IcoMoon Appで外部アイコンフォントを読み込む方法を補足しておきます。

IcoMoon Appにインポートボタンがあるので、インポート対象として.svg形式のフォントファイルを選択してアップロードします。

IconMoon Appの上部にある[Import Icons]ボタンを選択する。

method-speed-up-display-of-web-site-with-web-font-07

読み込みたいアイコンファイル(拡張子がsvgのもの)を選択します。

method-speed-up-display-of-web-site-with-web-font-08

読込が開始されます。

method-speed-up-display-of-web-site-with-web-font-09

Your Custom Iconsの欄に読み込んだアイコンが表示されます。これで外部アイコンフォントの読み込みは完了なので、使用したいアイコンを選択して利用することができます。

method-speed-up-display-of-web-site-with-web-font-10

まとめ

Webサイトの表示速度を高速化する方法として、Webフォント(アイコンフォント)の効果的な活用方法について紹介しました。