はじめに
WordPressサイトのパフォーマンスを向上させるためには、JavaScriptファイルサイズの削減が重要な手段の一つです。この記事では、具体的な手順と設定方法を紹介し、JavaScriptサイズを効果的に縮小する方法をお伝えします。
症状・背景
- ページ読み込み時間が遅い
- Google Lighthouseのパフォーマンススコアが低い
- ユーザーからのページ読み込みに関するフィードバックが多い
- CDNを活用しているものの、JavaScriptファイルサイズが大きい
手順・設定方法
ステップ1: GZIP圧縮を有効化する
# WordPressサイトの.htaccessファイルを開く
nano .htaccess
# 次の行を追加してGZIP圧縮を有効にする
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/javascript
</IfModule>ステップ2: プラグインを使用する
# WordPressのプラグインページを開く
wp plugin install wp-minify --activate
# WP Minify設定画面に移動し、JavaScriptとCSSファイルを圧縮および結合するオプションを選択するステップ3: カスタムスクリプトを削減する
# テーマディレクトリ内のfunctions.phpファイルを開く
nano wp-content/themes/your-theme/functions.php
# 必要のないJavaScript読み込みコードを削除またはコメントアウトする
remove_action( 'wp_enqueue_scripts', 'theme_js' );ステップ4: CDNを使用して外部リソースをリンクする
# テーマディレクトリ内のfunctions.phpファイルを開く
nano wp-content/themes/your-theme/functions.php
# カスタム関数を追加してjQueryのCDNリンクを設定する
function my_theme_enqueue_scripts() {
wp_deregister_script('jquery');
wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js', false, null);
wp_enqueue_script('jquery');
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );注意事項
- すべてのプラグインとテーマが最新であることを確認してください。
- GZIP圧縮設定は、サーバーによって異なる場合がありますので、正しい設定を適用する必要があります。
- CDNを使用する際には、外部ソースへの依存性を理解し、信頼性を確保することが重要です。
- JavaScriptファイルサイズの削減とパフォーマンス最適化は継続的なプロセスであり、定期的にモニタリングが必要です。
まとめ
1. GZIP圧縮: ファイルサイズを大幅に縮小し、読み込み時間を短縮します。
2. プラグインの活用: 複数のJavaScriptファイルを結合し、圧縮することができます。
3. カスタムスクリプトの削減: 不要なJavaScriptの読み込みを避けることでパフォーマンスが向上します。
4. CDNの利用: ファイルのロード時間を短縮し、ユーザー体験を改善します。
5. 定期的なモニタリングと更新: サイトのパフォーマンスは常に見直すことが大切です。
関連記事: