※この記事にはプロモーションが含まれています
近年、ウェブサイトのパフォーマンスは重要なランキング要因となり、ユーザーエクスペリエンスとSEOに大きな影響を与える要素となっています。特に、JavaScriptファイルの読み込みはページのロード速度に大きく影響するため、効果的な遅延読み込み手法をワードプレスで実践することは重要です。
この記事では、JavaScriptの読み込みを遅くする方法について、解説しますが、そもそも使用していないJavaScriptのコードは削除すべきです。以下の記事については不要なJavaScriptコードのあぶり出し方と削除方法を解説していますので、こちらもご参考ください。
あわせて読みたい
使用していない JavaScript と CSS の最適化方法 サイトの表示速度が遅い原因のひとつに、不要な”Java Script”や”CSS”の記述がたまっているケースがあります。「画像は軽量化しているのにおかしいな…」と思ったら、それ…
目次
ワードプレスでJavaScriptの読み込みを遅らせる理由と重要性
JavaScriptはウェブサイトのインタラクティブな要素に欠かせないものですが、大きなファイルサイズや複雑な処理が含まれる場合、ページの読み込みを遅らせる原因となります。遅延読み込みを行うことで、ページの表示速度を向上させ、ユーザーがサイトを快適に閲覧できるようにすることが目的です。
遅延読み込みのメリットとデメリット
メリット
- 高速なページ表示: JavaScriptの遅延読み込みにより、ページの表示速度が向上し、ユーザーはより迅速にコンテンツにアクセスできます。
- 低い離脱率: ページのロード時間が短くなるため、ユーザーはサイトを離れる可能性が減少します。
- モバイルフレンドリー: モバイルデバイスでのページ読み込みが高速化され、モバイルフレンドリー性が向上します。
デメリット
- 一部の機能への影響: JavaScriptを遅延させることで、ページの一部の機能が遅れて表示される可能性があるため、適切なバランスを見極める必要があります。
ワードプレスでJavaScriptの読み込みを遅くする方法
1. Lazy Loadを利用する
Lazy Loadは、画面上に表示されるまで画像やJavaScriptを読み込まない技術です。ユーザーがページをスクロールするまでJavaScriptファイルの読み込みを遅らせ、ページのロード時間を短縮します。これにより、初期表示が高速化され、ユーザーエクスペリエンスが向上します。
2. 非同期読み込みを実装する
非同期読み込みは、ページのロード中にJavaScriptを並列でダウンロードする方法です。これにより、他の要素の読み込みをブロックせずにJavaScriptの遅延を最小限に抑えられます。ワードプレスのテーマやプラグインのコード内に、async属性を追加することで簡単に実装できます。
プラグインを使用して手軽にJavaScriptの読み込みを遅くする
ワードプレスでJavaScriptの読み込みを遅くする方法は、プラグインを利用することで簡単に実装できます。以下は、いくつか有名なプラグインの例です。
Async JavaScript
Async JavaScriptは、ワードプレスサイトのJavaScriptファイルを非同期または遅延読み込みに変更するプラグインです。非常に使いやすく、設定を変更するだけで簡単にページの読み込みを高速化できます。
WP Rocket:
WP Rocketは、キャッシュや最適化に特化したワードプレスのパフォーマンス最適化プラグインです。このプラグインは、JavaScriptファイルを遅延読み込みする機能を備えており、パフォーマンス向上を狙う際に便利です。
Autoptimize
Autoptimizeは、CSSやJavaScriptなどのファイルを自動的に最適化するプラグインです。このプラグインは、JavaScriptファイルを結合して最小化し、遅延読み込みを行うことができます。
Perfmatters
Perfmattersは、ページの読み込み速度を向上させるための様々な最適化機能を提供するプラグインです。遅延読み込みだけでなく、さまざまな最適化機能を備えているので、ワードプレスサイトのパフォーマンス向上に役立ちます。
Flying Scripts
Flying Scriptsは、ページの読み込みを高速化するためのJavaScriptファイルの遅延読み込みを行うプラグインです。必要なJavaScriptファイルの遅延読み込みを手軽に実現できます。
これらのプラグインは、ワードプレスサイトのパフォーマンス最適化を簡単に行いたい場合に便利です。ただし、プラグインを導入する前に、必ずサイトのバックアップを取得するなど、注意深く設定を行いましょう。また、複数のプラグインを同時に使用する場合は、相互に干渉しないように注意することも重要です。
プラグインを使用せずにJavaScriptの読み込みを遅くする
プラグインがテーマと相性がよくない場合、もしくはプラグインをできるだけ使いたくないという方は、直接ファイルに書き込む方法もあります。
functions.phpへの書き込み
- WordPress管理画面の左メニュー「外観」＞「テーマエディター」を選択
- 右メニュー「テーマファイル」＞「functions.php」を選択
- 一番下の行に、下記のコードをコピペ
function move_scripts(){
remove_action(‘wp_head’, ‘wp_print_scripts’);
remove_action(‘wp_head’, ‘wp_print_head_scripts’, 9);
remove_action(‘wp_head’, ‘wp_enqueue_scripts’, 1);
add_action(‘wp_footer’, ‘wp_print_scripts’, 5);
add_action(‘wp_footer’, ‘wp_print_head_scripts’, 5);
add_action(‘wp_footer’, ‘wp_enqueue_scripts’, 5);
}
add_action( ‘wp_enqueue_scripts’, ‘move_scripts’ );
注意点とベストプラクティス
必要なファイルの選別: 遅延読み込みを実施するJavaScriptファイルは必要最小限に絞り込みましょう。遅延させるべきでない重要な機能には注意してください。
テストとモニタリング: 変更を加える前に、遅延読み込みの影響をテストして評価し、パフォーマンスの変化をモニタリングしましょう。
フォールバック処理の実装: JavaScriptの遅延読み込みがブラウザによってサポートされない場合に備えて、フォールバック処理を実装しておくと安心です。
まとめ
ワードプレスでJavaScriptの読み込みを遅くすることは、ウェブサイトのパフォーマンスを向上させるために重要な手法です。遅延読み込みの手法を適切に実装することで、高速なページ表示と良好なユーザーエクスペリエンスを提供できるようになります。ただし、重要な機能には影響を与えないよう注意しつつ、ベストプラクティスを守りながら実践してください。