WordPressヘッダーでレンダリングブロックしているJavascriptをフッターで読み込むカスタマイズ方法

WordPressデフォルトでは、ヘッダーでjquery.jsやjquery-migrate.min.jsが読み込まれます。

また、テーマやプラグインによっては、ヘッダーでJavaScriptファイルを読み込むものも多いです。

こういったJavaScriptファイルをヘッダーで読み込んでいる場合、読み込みが終了するまでブラウザ上で描画がされず処理が止まってしまいます。これが、レンダリングブロックです。

なので、レンダリングブロックが起こるJavaScriptファイルは、なるべくサイト描画は終わったあとのフッターで読み込むことが好ましいです。

というわけで、今回はヘッダーで読み込まれるJavaScriptファイルを、フッターで後から読み込ませるようにするためのWordpressカスタマイズ方法の紹介です。

ヘッダー部分に書かれたCSSファイルでもレンダリングブロックはおきますが、回避するための対処方法が変わってくるため、今回はJavaScriptファイルのみのカスタマイズ方法の紹介です。
スポンサーリンク
レクタングル(大)広告

主な手順

今回のWordpressカスタマイズでやることは、以下の手順のみになります。

  1. functions.phpにコードをコピペ

数行のコードをコピペするだけの簡単な作業になります。

以下で、詳しい内容について説明します。

functions.phpにコードをコピペ

使用中のテーマのfunctions.phpに以下のコードを貼り付けてください。

//レンダリングブロックしているJavascriptの読み込みを遅らせる
function move_scripts_head_to_footer_ex(){
  //ヘッダーのスクリプトを取り除く
  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_head_to_footer_ex' );

上記のコード内でやっていることを簡単に説明すると、まず、スクリプトファイル読み込みのwp_enqueue_scriptsをフックします。

そのフック関数内で、ヘッダーで読み込まれる「wp_print_scripts」、「wp_print_head_scripts」、「wp_enqueue_scripts」をremove_actionでキャンセルし、その後フッターでadd_actionにて読み込むようにしているだけです。

要は、「ヘッダーで読み込まれているスクリプトファイルをフッターで読み込め」と書いてある感じです。

今回のコードは、プラグインのコードを参考にさせていただきました。

参考 Speed Up – JavaScript To Footer — WordPress Plugins

注意点

上記のfunctions.phpに記入するコードは、wp_enqueue_script関数を用いて読み込まれているスクリプトファイルのみに有効です。

ですので、サイトの<head></head>内で直接<script>タグを用いて読み込んでいるプラグインや、テーマを利用している場合は、エラーが出ることがあるかと思います。

この方法を用いることにより、動作しなくなるプラグインやスクリプトもあるかと思います。エラーが出たり、スクリプトが正常動作しなくなる場合は、カスタマイズを元に戻してください。

jQueryが読み込まれていないので出るエラーの例

例えば、<head></head>内で、jQueryを利用するコードが直接書き込まれていた場合は、jQueryがフッターで読み込まれるため、利用できないので以下のようなコンソールエラーが出たりします。

Chromeの場合

ChromeでのjQueryエラー

Uncaught ReferenceError: jQuery is not defined

Firefoxの場合

FirefoxのjQueryエラー

ReferenceError: jQuery is not defined

動作確認

このようにカスタマイズすることで、Wordpressデフォルトでは<head></head>内で読み込まれていた以下のようなscriptタグがフッター部分に移動しているはずです。

<script src='https://xxxx.com/wp-includes/js/jquery/jquery.js'></script>
<script src='https://xxxx.com/wp-includes/js/jquery/jquery-migrate.min.js'></script>

ソースコードをなどから確認してみると、移動しているのがわかるかと思います。

ちなみに、フッターに移動する場所は、テンプレートファイル内のwp_footer関数が読み込まれている場所です。

wp_footer();

まとめ

こんな感じで、wp_enqueue_script関数を用いて読み込まれているスクリプトファイルは、結構簡単にフッターに移動することができます。

ただ、<script>タグで直接読み込まれているスクリプトファイルには適用されないので、テーマやプラグイン利用時にデベロッパーツール等のコンソールを開いてエラーが出ていないかチェックする必要があります。

そんなわけで、「jquery.jsやjquery-migrate.min.jsをフッターに移動したい」なんて場合には、結構手軽かもしれません(要エラーチェック)。

『WordPressヘッダーでレンダリングブロックしているJavascriptをフッターで読み込むカスタマイズ方法』へのコメント

  1. 名前:shiritai 投稿日:2017/08/27(日) 12:25:30 ID:270a93c01

    わいひらさん、はじめまして。
    記事を拝見しまして、コメントします。
    functions.phpで、JavaScriptファイルをフッターに移動させると、スマホ時に、フッターかヘッダーにボタンを固定で表示した場合、「メニュー、サイドバー」が動きません。
    Speed Up – JavaScript To Footerを使った場合ももちろん同様です。
    そもそも自分の場合は、プラグインを入れておかしくなり、検索したらわいひらさんのこちらの記事を見つけ、念のため手動方法として試しました。
    自分のサイトはちょっとカスタマイズしてしまっているし、プラグインもいくつかいれているので、念のため
    新しいwordpressをサーバーにあげ(4.8.1)
    プラグインは、デフォルトのみ、記事はHello world!のみの状態、
    テーマは最新のsimplicity2.6.0.4+子テーマ
    で確認してみましたが、やはり動きません。
    Chromeによるとjquery.sidr.min.jsのエラーかなと。

    レスポンシブにしている場合は、そもそも
    [モバイルメニュータイプ]→[スライドイン・・・]は選択できないと思いますので、問題なくて、気付かない部分だと思います。
    (レスポンシブ時の右上のハンバーガーは大丈夫ですので)
    お忙しいとは思いますが、よろしければ確認していただけたら嬉しいです。

    トピックスのほうでも同様の話がないか検索しましたが、CSS関係の読み込みの話は出てきましたが、Speed Up – JavaScript To Footerが原因でのボタンが機能しないという話はありませんでした。
    速度アップの目的でこのプラグインを入れている方もいるのではと思います。
    ただ自分の環境だけで起きている不具合の可能性もあるかもしれませんので、わいひらさんのほうでこの現象が確認できないようでしたら、このコメントは削除してくださってかまいません。
    またはすでに解決している話でしたら、自分がその記事を探せなかったので、余計なことを書き、すみませんでした。

    最近は突然の雨も多いし、暑かったり涼しかったりもありで体調を崩しやすいと思います。
    無理せずゆっくり休んでくださいね。
    体調が良くなってから見ていただけたら幸いです。

  2. アバター画像 名前:わいひら 投稿日:2017/08/27(日) 17:31:15 ID:5100d0f8d

    はじめまして。

    本文中にもあるように、このカスタマイズをすることで、動作しなくなるプラグインや、スクリプトもあると思います。
    スクリプトは、呼び出し順が変わってしまうと、動作しなくなるものも多々あります。
    この記事に関しても、あくまで「フッターにスクリプトを移動する方法」を記してあるだけで、Simplicityや他のプラグインの動作保証をしているわけではありません。
    なので、動作しない場合は、カスタマイズを元に戻すことをおすすめします。

    僕も元々、Simplicityにこのカスタマイズを適用しようと思って、調べたは良いものの、いろいろ試行錯誤しても、正常動作しなかったので、この機能は採用しなかったと記憶しています。

    記事の方にも、その旨を書いておこうと思います。

  3. 名前:shiritai 投稿日:2017/08/28(月) 01:00:10 ID:a5da7e7dd

    わいひらさん
    早々にお返事くださりありがとうございます。

    >Simplicityや他のプラグインの動作保証をしているわけではありません。

    そうですよね。寝ログもSimplicityサイトもヘッダーにありますものネ!
    だから一般的な方法として記しているだけなんだと思いました。
    でももしかしたら、自分の環境だけかもしれないし、Simplicityのわいひらさんが書かれているから、Simplicityではフッターでいけるのではと一瞬思ったりもしました。

    レンダリングブロックはGooglePageSpeed Insightsでチェックすると提案されるので、普通に対応してしまい、あとからなんでボタンが動かないのか、理由が全くわかりませんという人もいるかもしれない?と思い、そんなことも含めコメントとして残してみようかなと思いました。

    このわいひらさんの回答で、あっもしかして?と気づいて解決する人がいるといいなと思います。
    案外スマホのほうを全くチェックしていなくて、今も気づいていない人がいたりしてねw
    いつもいろんな方からの質問への丁寧な回答、Simplicityのアップデートありがとうございます。多機能で便利すぎてすごいな~と感心するばかりです。
    素敵なテーマを無料で公開してくださり、本当にありがとうございます!

  4. アバター画像 名前:わいひら 投稿日:2017/08/29(火) 08:42:50 ID:66254a76c

    確かに、高速化プラグインなどを利用しているサイトなどでは、動作不良が起きているサイトも多いようです。
    Simplicityフォーラムの方にも、結構プラグインが原因の問い合わせが多いです。
    一番多いのが、Header cleaner、Autoptimizeとかですね。
    やっぱ、JavaScriptコードをいじると、コードの呼び出し順が変わる可能性があるので、どうしても完全に不具合を無くすことは出来ないのかもしれません。
    僕も、お試しで設定してみて、後から気づくということが結構あります(笑)

  5. 名前:転職キャンパス 投稿日:2018/03/05(月) 12:08:00 ID:bcd5a8195

    こんにちわ。いつも参考にさせて頂き、ずっと悩んでいた速度表示が59%から79%に格段にアップしました!
    しかしながらTOPページに書き込んだコードが表示されてしまうのですが何か対処法がございませんでしょうか。

  6. アバター画像 名前:わいひら 投稿日:2018/03/07(水) 00:08:02 ID:1054f2bf1

    こんにちは。
    申し訳ないですが、上記の書き込みだけでは、どういった状態なのか、ちょっと判断しかねます。
    サイトを拝見しても、表示されてしまったコードというのが、どの部分かわからないので、ちょっとわからないです。