最近、読者の一人から、Googleのページスピードスコアを上げるためにWordPressでJavaScriptを一番下に移動する方法を尋ねられました。彼らが尋ねてくれたことを嬉しく思います。なぜなら、正直なところ、私たちはこれについて書きたかったからです。以前は、WordPressでJavaScriptとCSSスタイルを正しく追加する方法について話しました。この記事では、WordPressでJavaScriptを一番下に移動して、サイトの読み込み時間とGoogleのページスピードスコアを改善する方法を説明します。
JavaScriptを一番下に移動するメリット
JavaScriptはクライアントサイドのプログラミング言語です。これはユーザーのWebブラウザによって実行および実行され、Webサーバーでは実行されません。JavaScriptを上部に配置すると、ブラウザはページの残りの部分を読み込む前にJavaScriptを実行または処理する場合があります。JavaScriptを下部に移動すると、Webサーバーはページをすぐにレンダリングし、その後ユーザーのブラウザがJavaScriptを実行します。サーバーサイドのレンダリングはすべて完了しているため、JavaScriptはバックグラウンドでロードされ、全体のロードが速くなります。
これにより、Google Page Speed や Yslow でテストする際の速度スコアが向上します。Googleなどの検索エンジンは、検索結果を表示する際のパフォーマンス指標の1つとしてページ速度を考慮するようになりました。これは、読み込みが速いウェブサイトが検索結果でより目立つように表示されることを意味します。
WordPressでスクリプトを追加する正しい方法
WordPressには強力なエンキューシステムがあり、テーマやプラグインの開発者はスクリプトをキューに追加して必要に応じてロードできます。スクリプトやスタイルを適切にエンキューすることで、ページの読み込み速度を大幅に向上させることができます。
基本的な例を示すために、WordPressテーマに少しJavaScriptを追加します。JavaScriptを .js ファイルに保存し、その .js ファイルをテーマの js ディレクトリに配置します。JavaScript用のディレクトリがテーマにない場合は、作成してください。スクリプトファイルを配置した後、テーマの functions.php ファイルを編集し、このコードを追加します。
function wpb_adding_scripts() {
wp_register_script('my-amazing-script', get_template_directory_uri() . '/js/my-amazing-script.js','','1.1', true);
wp_enqueue_script('my-amazing-script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
このコードでは、wp_register_script() 関数を使用しました。この関数には以下のパラメータがあります。
<?php wp_register_script( $handle, $src, $deps, $ver, $in_footer ); ?>
スクリプトをWordPressページのフッターまたは下部に追加するには、$in_footer パラメータを true に設定するだけです。
また、テンプレートディレクトリのURLを返す関数 get_template_directory_uri() も使用しました。この関数は、WordPressテーマでスクリプトやスタイルをエンキューおよび登録するために使用する必要があります。プラグインの場合は、plugins_url() 関数を使用します。
問題点：
問題は、WordPress プラグインが <head> 内またはページ本文内に独自の JavaScript を追加することがあることです。これらのスクリプトを一番下に移動するには、プラグインファイルを編集してスクリプトを正しく一番下に移動する必要があります。
JavaScriptソースの見つけ方
Webブラウザでサイトを開き、ページソースを表示します。JavaScriptファイルへのリンクが表示され、ファイルの場所とソースが示されます。たとえば、以下のスクリーンショットは、スクリプトが「test-plugin101」というプラグインに属していることを示しています。スクリプトファイルはjsディレクトリにあります。
時々、JavaScript が個別の .js ファイルを通じてリンクされるのではなく、ページに直接追加されているのを見かけることがあります。その場合、すべてのプラグインを一つずつ無効にする必要があります。各プラグインを無効にした後、ページをリフレッシュして、スクリプトを追加しているプラグインを見つけてください。すべてのプラグインを無効にしても JavaScript が消えない場合は、別のテーマに切り替えて、JavaScript がテーマによって追加されているかどうかを確認してみてください。
スクリプトの登録とエンキュー
ヘッダーセクションにJavaScriptを追加しているプラグインまたはテーマを見つけたら、次のステップは、そのプラグインがファイルを呼び出している場所を見つけることです。テーマまたはプラグインのPHPファイルのいずれかで、その特定の .js ファイルへの呼び出しが表示されます。
プラグインまたはテーマが既にJavaScriptファイルをエンキューしている場合は、プラグインまたはテーマのwp_register_script関数を変更し、$in_footerパラメータにtrueを追加するだけで済みます。たとえば次のようになります。
wp_register_script('script-handle', plugins_url('js/script.js' , __FILE__ ),'','1.0',true);
プラグインまたはテーマがヘッダーまたはコンテンツ間に生のJavaScriptを追加していると仮定します。プラグインまたはテーマファイルで生のJavaScriptコードを見つけ、JavaScriptをコピーして.jsファイルに保存します。次に、上記のwp_register_script()関数を使用して、JavaScriptを一番下に移動します。
編集者注：コアファイルに変更を加え、プラグインを更新した場合、その変更は上書きされないことを理解することが重要です。より良い方法は、スクリプトを登録解除し、テーマの functions.php ファイルから再登録することです。こちらのチュートリアルをご覧ください：このチュートリアル。
スクリプトをフッターに移動させる以外にも、より高速な ソーシャルメディアプラグイン や 画像の遅延読み込み を検討すべきです。それに加えて、サイトの速度を向上させるために W3 Total CacheとMaxCDN も使用する必要があります。
この記事がWordPressでJavaScriptを一番下に移動し、ページの速度を向上させるのに役立ったことを願っています。質問やフィードバックがあれば、以下のコメント欄に書き込んでください。
Ravi
プラグインの js を単一ファイルに移動しても、プラグインは通常通り更新されますか？初心者です。
WPBeginnerスタッフ
これを行う方法は複数あります。最も一般的な方法の1つは、さまざまなソースから読み込まれるJavaScriptファイルを1つのJSファイルにまとめてから、それをエンキューすることです。
Catharine
素晴らしい、ありがとう！
Catharine
サイードさん、チュートリアルをありがとうございます。しかし、私は全くの初心者で、非常に基本的な質問があります。あなたが投稿したコード（関数全体など）について、エンキューしたいJavaScriptのすべての部分に対して、functions.phpファイルに追加する必要がありますか？つまり、複数のページでヘッダーに読み込まれる複数のJavaScriptがある場合、そのコードをどのようにフォーマットしますか？
ご協力いただけると幸いです！
マーク ジェイコブス
こんにちは、素晴らしいチュートリアルです。しかし、質問があります。Google Page Speed Insightsでウェブサイトを実行したところ、ページ速度を向上させるためにレンダリングをブロックするJavaScript（およびCSS）を削除する必要があるという警告が表示されました。このウェブサイトの情報（素晴らしい記事です！）を読みましたが、プラグインが速度不足の原因となっているjsファイルを「呼び出す」phpファイルが見つかりません。遅延の大部分を引き起こしているプラグイン（Google-maps-ready）を特定できましたが、そこからどう進めばよいかわかりません。プラグインフォルダ内のすべてのphpファイルを検索しましたが、Googleスピードテストで言及されているファイルに似た名前のjsファイルは見つかりませんでした。
…
どの PHP ファイルを編集すればよいか、どうすればわかりますか？助けていただけると幸いです！
こんにちは、
Marc.
WPBeginnerサポート
あなたのサイトにある Google Maps Ready というプラグインがこれらのファイルを追加しています。
管理者
Basavaraj Tonagatti
こんにちは、最近Genesis FrameworkとEleven 40 Child Themeに移行しました。Google PageSpeedテストを実行しているときも同じ問題に直面しています。しかし、正確な方法がわからないため、変更を加えるのが難しいです。私のサイトの正確な原因と、このJavaScriptの問題をどのように削除できるか、誰か教えていただけますか？（私はスタイリング言語を知らず、これらのコード言語については全く知りません。）
ジョセフ・スタンレー＝ハント
たくさんありがとう。これをどのように行うか、そして他のいくつかのトリック（ここでも答えを見つけました）について疑問に思っていました。
1つ質問があります。パラメータに in-head がないようですが、これは in_footer が false に設定されている場合、自動的にヘッダーに登録されるという意味ですか？
WPBeginnerサポート
はい、in_footer のデフォルト値は false です。そのため、明示的に in_footer を true に設定しないと、ヘッダーに表示されます。
管理者
マイク
プラグインの更新もすぐに思い浮かびました。これに関するさらなるアドバイスを楽しみにしています。
ジェイソン
素晴らしい記事です！多くのテーマがJavaScriptの読み込みが先になることでGoogleのスピードテストでペナルティを受けているため、長い間この質問をしていました。おそらく、他の人もこれらのスクリプトをフッターに入れる方法を知っているでしょう。
再度、ありがとうございます。試してみて、どうなるかお伝えします。
Jeremy Myers
素晴らしいチュートリアルです。
しかし、プラグインを更新したら、またこれをやり直す必要がありますよね？プラグインが更新されるたびにですか？
functions.phpでjsの登録を解除し、フッターで何らかの方法で再登録することは可能ですか？
adam
こんにちは、この役立つヒントをありがとうございます。しかし、W3 Total Cache のミニファイされた .js をヘッダーに移動するにはどうすればよいですか？
それは wp-content 内のキャッシュにある js の場所であり、wp-plugin ではありません。
ルッカ
貴重な知識をありがとうございます。素晴らしい仕事を続けてください。
Raj
Nice and Simple guide. Thanks for posting this article to increase the speed of WordPress
ダニエル・ペラレス
ナイスなヒントです。共有ありがとうございます！