ブログ運営

Font Awesomeの使い方【ダウンロードして低速を爆速に】

Font Awesomeの使い方【ダウンロードしてWordPressを爆速に】
Font Awesomeのアイコンを使いたいけど、サイトが重くなっちゃうな。
何かいい方法ないの?

こんな悩みを解決します。

実際に本ブログでもFont Awesomeを使っていますが、速度はほぼ変わっていません。

本記事では、Font Awesomeを速度低下なく使うための方法である「ダウンロードして使う」ための方法について解説します。

解説する方法を実践することで、Font Awesomeの魅力的なアイコンを速度低下なしに使うことができるようになりますよ。

Font Awesomeを使うとなぜ速度が遅くなるのか

Font Awesomeを使うと、さまざまなアイコンが無料で使うことができてとても便利です。

しかし、外部から読み込む処理が入るため、サイトの表示速度が遅くなってしまいます。

通常のページ表示
通常はこのように、サーバ内にあるサイトをそのまま表示しています。
 

外部から読み込んだ場合のページ表示

しかし、Font Awesomeなどで外部からファイルを読み込む必要がある場合は、一旦外部からサーバへ取り込んでから表示させるため、表示が遅くなってしまいます。

Font Awesomeを使ったときと使わなかったときの速度を比較

試しにFont Awesomeを有効化した場合と無効化した場合で速度を比較してみました。

まず、Font Awesomeを無効化した場合。

FontAwesomeを無効化したときのPC速度
FontAwesomeを無効化したときのスマホ速度

上がパソコン、下がスマホです。

これが、Font Awesomeを有効化するとこうなります。

FontAwesomeを有効化したときのPC速度
FontAwesomeを有効化したときのスマホ速度

こちらも上がパソコン、下がスマホです。

あきらかに速度が下がっていることがわかりますね。

Font Awesomeをダウンロードするとどう変わるのか

あらかじめFont Awesomeのアイコンをダウンロードしておくことで、外部から読み込むという処理がなくなります。

その結果、Font Awesomeを使いながらもサイト表示の速度低下を防ぐことができます。

あらかじめダウンロードをしておいた場合
 
あらかじめダウンロードしておくと、サーバがアイコンを持っている状態なので、動作としては1つ目の図と同じ処理と同じになります。

Font Awesomeをダウンロードして使う方法

では、具体的にダウンロードして使う方法について解説していきます。

手順としては、

  1. Font Awesomeをダウンロードする
  2. 必要なファイルをサーバにアップロードする
  3. WordPressで必要な設定を入れる

このような3ステップです。

では、それぞれ解説していきますね。

Font Awesomeをダウンロードする

まず、Font Awesome公式のダウンロードページから必要なファイルをダウンロードします。

FontAwesomeのダウンロード場所

こちらの「Free for Web」をクリックすることで、zipファイルをダウンロードすることができます。

必要なファイルをサーバにアップロードする

Font Awesomeのファイルはzipファイルなので、まずは解凍をします。

解凍したら、必要なファイルをサーバにアップロードします。

必要なファイルは、

  • webfonts
  • all.min.css

この2つだけです。

webfontsは、解凍したファイル直下にあります。

webfontsの場所
 

all.min.cssは、cssフォルダの中にあります。

CSSフォルダがある場所
CSSファイルがある場所
 
これら2つのファイルを、WordPressがインストールされているフォルダにアップロードします。

webfontsは、フォルダごとアップロードしましょう!

サーバへのアップロード方法

VPSを使っている場合は、SFTPを使ってアップロードをします。

FileZillaを使うと、WindowsでもMacでも利用できるのでオススメです。

レンタルサーバを使っている場合は、そのレンタルサーバがサポートしている方法でアップロードしてください。

FTPが使えるところが多いと思いますので、その場合はFileZillaを使うことができます。

WordPressで必要な設定を入れる

Font Awesomeをダウンロードしたら、最後にブログで読み込ませるための設定を入れる必要があります。

<head></head>の間に

<link href="https://ドメイン名/all.min.css" rel="stylesheet">

と入れます。

テーマでJINを使っている人は、「HTMLタグ設定」のhead内に入れればOKです。

他のテーマを使っている方は、Google Analyticsのコードを入れたのと同じ箇所へ入れれば大丈夫です。

これでもうFont Awesomeが使えるようになっています。

使い方は、通常と同じです。

公式で欲しいアイコンを検索して、そのコードを貼り付けるだけでOKです。

Font Awesomeをダウンロードして使う方法まとめ

まとめ
 
Font Awesomeは非常に便利なサービスです。

ただ、そのまま使おうとすると、サイトの表示速度がかなり遅くなってしまい、SEO的に不利です

 
ダウンロードして使うことで、「外部からの読み込む」という手間を省くことができ、速度を低下させることなくFont Awesomeを使うことができます。

ダウンロードして使うためには、

  1. Font Awesomeをダウンロードする
  2. 必要なファイルをサーバにアップロードする
  3. WordPressで必要な設定を入れる

という3つの手順だけでOKです。

ブログの速度低下に悩んでいる方の参考になれば幸いです!

楽天カードで日々の生活をお得に!

買い物をしたときだけでなく、毎月々のスマホ代や電気代などの固定費の支払いでも楽天ポイントが貯まります!

貯まった楽天ポイントは、楽天ショップだけでなく全国の様々なお店で使うこともできますし、クレジットカードの支払いにも使うことができます。

CMでお馴染みの楽天カード、まだお持ちでない方は、これを機に作ってみてはいかがでしょうか?

>>無料で楽天カードに申し込む