2026年8月4日

WordPressのFont Awesome最適化方法

SEO・パフォーマンス

はじめに

Font Awesomeは、ウェブサイトのアイコンデザインを一貫性のある高品質なものにするために広く使用されているライブラリです。しかし、多くのアイコンが含まれているため、サイトのパフォーマンスに悪影響を与える可能性があります。この記事では、WordPressでのFont Awesomeの最適化方法を紹介します。

症状・背景

ページ読み込み時間が遅い
スマートフォンやタブレットからのアクセスが重い
Google PageSpeed Insightsで低評価を受けている
Font Awesomeを使用しているが、アイコンの数を絞りたい

手順・設定方法

ステップ1: フォントファイルのカスタマイズ

# Font Awesome CDNから必要なアイコンのみを抽出し、wp-content/themes/your-theme/assets/fontsに保存します。
npm install -g svg-sprite-plugin
npx svg-sprite-plugin --src=fontawesome-free-5.15.4-web/svgs/solid/ --dest=./custom-font-awesome/

ステップ2: フォントのローカル化

# WordPressテーマディレクトリにFont Awesomeフォントを配置します。
mkdir -p wp-content/themes/your-theme/assets/fonts
cp ./custom-font-awesome/* wp-content/themes/your-theme/assets/fonts/

ステップ3: フォントのウェブフォント化

# ウェブフォントとして使用可能なCSSファイルを作成します。
wget https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css -O wp-content/themes/your-theme/assets/fonts/fontawesome.min.css

ステップ4: フォントの読み込み最適化

# WordPressテーマのfunctions.phpでフォントの読み込みを遅延させます。
add_action('wp_enqueue_scripts', 'enqueue_custom_font_awesome');
function enqueue_custom_font_awesome() {
    wp_enqueue_style('custom-font-awesome', get_template_directory_uri().'/assets/fonts/fontawesome.min.css', array(), null, 'defer');
}

注意事項

カスタマイズの際は、Font Awesomeの公式ドキュメントを参照してください。
フォントファイルのダウンロードと保存には十分なディスク容量が必要です。
Google Fontsなどの他のフォントサービスとの併用も考慮してください。

まとめ

1. カスタムアイコン抽出: 必要なアイコンのみを選択して使用することで、サイトのパフォーマンスを向上させます。

2. ローカル化: CDNからの読み込みを減らすことで、ページのロード速度を改善します。

3. ウェブフォント化: ローカルに配置したフォントファイルを使用してCSSを作成し、サイト全体で一貫性のあるデザインを保ちます。

4. 遅延読み込み: スクリプトの読み込みタイミングを調整することで、ページの表示時間を短縮します。

5. 定期点検: 最適化設定が最新の状態であることを確認するために、定期的なチェックが必要です。

Post Views: 4