最近、ある読者から、JavaScriptをWordPressの一番下に移動させ、Googleのページ・スピード・スコアを上げるにはどうしたらいいかという質問を受けた。という質問をいただきました。前回は、WordPressでJavaScriptとCSSスタイルを適切に追加する方法についてお話しました。この投稿では、JavaScriptをWordPressの一番下に移動する方法を紹介します。
JavaScriptを最下部に移動するメリット
JavaScriptはクライアント・サイドのプログラミング言語です。ウェブサーバーではなく、ユーザーのウェブブラウザによって実行されます。JavaScriptを一番上に置くと、ブラウザーはページの残りの部分を読み込む前にJavaScriptを実行したり処理したりする可能性があります。JavaScriptを一番下に置くと、ウェブサーバーが素早くページをレンダリングし、ユーザーのブラウザーがJavaScriptを実行します。サーバー側のレンダリングはすべてすでに行われているため、JavaScript はバックグラウンドで読み込まれ、全体の読み込みが速くなります。
これにより、GoogleページスピードやYslowでテストする際のスピードスコアが向上します。Googleや他の検索エンジンは現在、検索結果を表示する際のパフォーマンスマトリックスの1つとしてページ速度を考慮しています。これは、より速く読み込まれるサイトは、検索結果でより目立つように表示されることを意味します。
WordPressでスクリプトを追加する正しい方法
WordPressには、テーマやプラグイン開発者がスクリプトをキューに追加し、必要に応じてロードできる強力なエンキューイングシステムがあります。スクリプトやスタイルを適切にエンキューすることで、ページの読み込み速度を大幅に向上させることができます。
基本的な例として、WordPressテーマにJavaScriptを追加してみましょう。JavaScriptを.jsファイルに保存し、その.js ファイルをテーマのjsディレクトリに置きます。あなたのテーマにJavaScripts用のディレクトリがない場合は、作成してください。スクリプトファイルを配置したら、テーマのfunctions.phpファイルを編集し、次のコードを追加します：
[cbk1］
このコードでは、wp_register_script()関数を使用しています。この関数には以下のパラメータがあります：
[cbk2］
WordPressページのフッターまたは下部にスクリプトを追加するには、$in_footerパラメータをtrueに設定するだけです。
また、テンプレートディレクトリのURLを返す関数get_template_directory_uri()も使用しています。この関数は、WordPressテーマでスクリプトやスタイルをエンキューしたり登録したりする際に使用します。プラグインにはplugins_url()関数を使用します。
問題点
問題は、WordPressプラグインが<head>内やページ本文内に独自のJavaScriptを追加してしまうことです。これらのスクリプトを最下部に移動させるには、プラグインファイルを編集してスクリプトを適切に最下部に移動させる必要があります。
JavaScriptソースを見つける
ウェブブラウザでサイトを開き、ページソースを表示します。JavaScriptファイルへのリンクが表示され、ファイルの場所とソースがわかります。例えば、下のスクリーンショットは、私たちのスクリプトが’test-plugin101’というプラグインに属していることを示しています。スクリプトファイルはjsディレクトリにあります。
時々、JavaScriptが直接ページに追加され、区切りの.jsファイルを通してリンクされていないことがあります。その場合は、すべてのプラグインをひとつずつ無効化する必要があります。それぞれのプラグインを無効化した後、ページにスクリプトを追加しているプラグインを見つけるまで、ページを更新してください。プラグインをすべて無効化してもJavaScriptが消えない場合は、別のテーマに切り替えてみて、JavaScriptがテーマによって追加されているかどうかを確認してください。
スクリプトの登録とエンキュー
ヘッダーセクションにJavaScriptを追加しているプラグインまたはテーマを見つけたら、次のステップは、プラグインがファイルを呼び出している場所を見つけることです。テーマまたはプラグインのPHPファイルの1つに、特定の.jsファイルへの呼び出しがあります。
プラグインやテーマがすでにJavaScriptファイルを追加するためにenqueuingを使用している場合は、プラグインやテーマのwp_register_script関数を変更し、$in_footerパラメータにtrueを追加するだけです。このように：
[cbk3］
プラグインやテーマがヘッダーやコンテンツの間に生のJavaScriptを追加していると仮定してみましょう。プラグインやテーマのファイルから生のJavaScriptコードを見つけ、JavaScriptをコピーして.jsファイルに保存します。次に、上記のようにwp_register_script() 関数を使用して、JavaScriptを一番下に移動させます。
エディター注：コアファイルに変更を加えてプラグインを更新しても、その変更は上書きされないことを理解しておくことが重要です。これを行うより良い方法は、スクリプトの登録を解除し、テーマのfunctions.phpファイルから再登録することです。このチュートリアルを参照してください。
スクリプトをフッターに移動させる以外に、より高速なソーシャルメディアプラグインや 遅延ロード画像の使用も検討すべきです。さらに、W3 Total CacheとMaxCDNを使用してサイトスピードを向上させましょう。
この投稿が、WordPressでJavaScriptを最下部に移動し、ページ速度を改善するのにお役に立てば幸いです。ご質問やご意見は以下にコメントを残してください。
Ravi
Will my plugins update normally when i move their js to single file? I am a newbie.
WPBeginner Staff
There are multiple ways to do it. One that is most common is to paste JavaScript files loaded by different sources into one single JS file and then enqueue it.
Catharine
Great, thanks!
Catharine
Hi Syed, thanks for the tutorial. However I am a complete noob and have a very basic question. For that piece of code you posted (the entire function etc), do we need to add that in the functions.php file for every single bit of javascript we want to enqueue? I guess what I’m asking is, how would you format that code if you had more than one piece of javascript that was being loaded in the headers of more than one page?
Your help would be greatly appreciated!
Marc Jacobs
hi, great tutorial. I have a question though. I ran my website through Google Page Speed Insights and got the warning that I had to eliminate render blocking Javascript (and css) to boost my page speed. I read the information on this website (great read!), but I cannot seem to find the php-files where the plugin “calls” for the js-files causing my website to lack speed. I have figured out what plug-in is causing most of the delay (Google-maps-ready), but I have no idea how to precoeed frpm there. I have searched every php-file in the plugin folder, but can’s find a js-file named remotely similar to the files mentioned in the google speed test:
…
How do I figure out what php file to edit? Help wouldbe much appreciated!
greeting,
Marc.
WPBeginner Support
A plugin on your site Google Maps Ready is adding those files.
管理者
Basavaraj Tonagatti
Hi, I recently moved to Genesis Framework+Eleven 40 Child Theme. I am also facing the same problem while I run the Google page speed test. But as I don’t know the exact way of doing, finding it difficult to make changes. Can anyone guide me what is the exact cause on my site and how to remove this Javascript issue? (I don’t know any styling languages and I am totally unware about these code languages.)
Joseph Stanley-Hunt
Thanks heaps, I have been wondering how to do this and some other tricks (which I have also found answers to on here).
One question tho, I see there is no in-head in the paramaters. is that meaning that if the in_footer is set to false, it is registered in the head automatically?
WPBeginner Support
Yes, the default value for in_footer is false. So you need to explicitly add in_footer to true otherwise it will appear in the head.
管理者
Mike
The plugin update immediately came to my mind too. Look forward to more advice on this.
Jason
Great article! I have been asking this questions for a long time because so many themes get penalized in Googls speed test due to java scripts loading first. Maybe others have known how to put these scripts in the footer.
Again, thanks and I will try this out and tell you how it works.
Jeremy Myers
Great tutorial.
But once we update the plugin, we will have to do this again, right? And every time the plugin updates?
Is it possible to deregister the js in functions.php and then simply reregister it in the footer somehow?
adam
Hi, thanks for this useful tips. But, how to move .js of W3 Total Cache minify on head?
That’s js location on cache in wp content, not wp plugin.
Lucca
Thx for valueable knowledge – keep up excellent work.
Raj
Nice and Simple guide. Thanks for posting this article to increase the speed of WordPress
Danyel Perales
Nice tip. Thanks for share !