メニュー

WEBMEMOする。とあるクリエイターの個人的な備忘録。

ページの読み込み速度を早くするため、scriptなどの外部ファイルの読み込みは</body>の直前がいいとされています。

外部ファイルを読み込む間、ページのレンダリングがストップされてしまうからです。これをレンダリングブロックというそうですが、この時間をできるだけ短くさせることが望ましい。

そこで、WordPressでの外部ファイルの読み込みを</body>直前、つまりwp_footer()で行うための方法をメモしていきます。

目次

    自分の今までの記述例

    WordPressで外部ファイルを読み込む時はwp_enqueue_script()や、wp_enqueue_style()を使用します。

    私はいつも何も考えずに勤務先での記述をコピペして使っていました。その記述が次のコード。

    function add_files(){
      $dir = get_bloginfo('template_directory');
      wp_enqueue_script('mainscript',$dir.'/js/script.js');
      wp_enqueue_style('reset_style',$dir.'/style.css');
      //その他外部ファイルの読み込み…
    }
    add_action('wp_enqueue_scripts', 'add_files');
    

    wp_enqueue_scriptsにフックさせて、各自ファイルの読み込みを追加しているのですが、このように、そのまま使うと全てwp_head()で読み込まれてしまいます。

    スクリプトをwp_footer()で読み込む

    先ほど出てきたスクリプトを読み込むためのwp_enqueue_script()は、引数でwp_head()かwp_footerのどちらで読み込むかを指定できます。

    引数をまとめると以下の通りです。

    引数 説明 初期値
    $handle スクリプトを区別するハンドル名を指定。必須 なし
    $src スクリプトへのパスを指定。 false
    $deps 依存スクリプトをハンドル名の配列で指定。
    jQuery依存系のファイルなどを読み込む時にこの引数で読み込み順を制御する。
    array()
    $ver 任意のバージョンを指定。
    バージョン情報はスクリプトURLにパラメータとして追加され、ブラウザキャッシュ対策になる。
    false
    $in_footer スクリプトの読み込み位置を指定。trueにするとwp_footer()で読み込める。 false

    この5つ目の引数$in_footerをtrueに指定するだけで、wp_enqueue_script()でのスクリプトの読み込みはwp_footerで行われるようになります。

    ということで、trueに変えていこう。と思って私は少しつまづきました。第3、第4引数を特に指定したくない場合はどうすればいいのかと。

    上の表では先にまとめてあるのでもう答えはでているのですが、そんな場合は初期値をそのまま指定あげると何も問題なく動作します。

    wp_enqueue_script('ハンドル名','スクリプトへのパス', array(), false, true);

    こんな感じですね。ほとんどの記事でjQueryのプラグイン系を例に出していて、引数にはjQueryのハンドル名やバージョンを指定してあげているパターンばかりだったので、この書き方を説明してくれている記事が見つからずに少し悩みました。初期値入れればいいなんて当たり前のことすぎて誰も補足してなかったのでしょうか。笑

    また最後の引数をtrueにするだけでよい、という記事を見かけたのですが、私はそれでは読み込み位置は変わりませんでした。

    //これだと読み込み位置変わらず
    wp_enqueue_script('ハンドル名','スクリプトへのパス', true);

    おまけ:CSSをwp_footer()で読み込ませるには

    CSSの場合、wp_enqueue_style()には$in_footerのような引数がないので、スクリプトと同じようにはいきません。

    なので、直接wp_footer()にフックします。

    function add_css(){
      $dir = get_bloginfo('template_directory');
      wp_enqueue_style('reset_style',$dir.'/style.css');
      //その他CSSファイルの読み込み…
    }
    add_action('wp_footer', 'add_css');
    

    この時、wp_enqueue_styleを使わなくとも、echoでlinkタグを呼び出しても構いません。

    ただCSSの場合は注意が必要で、wp_footer()で読み込んでしまうと、一瞬だけですがCSSが当たる前の純粋なHTML構造がそのまま表示されます。なので、この場合はファーストビューの部分、つまりスクロールせずに最初から見える部分に関するCSSのみ、先に読み込ませておく、といったような工夫が必要になります。

    CSSをbody閉じタグ直前で読み込ませるのは、相当こだわりがある場合意外はあまり必要ないかもしれません。

    - Thank you for reading this to the end. -

    コメントする

    CAPTCHA


    TOPへ Top