web-dev-qa-db-ja.com

WordpressのネイティブJavaScriptをページの一番下に移動しますか？

グーグルのページスピードインサイトで私のページをチェックして、それはロードすることからページの残りをブロックしている若干のジャバスクリプトがあると不平を言います。問題のJavaScriptは、ネイティブのWordpressスクリプトです。

… - /js/jquery/jquery.js？ver = 1.11.2を含みます

…s/jquery/jquery-migrate.min.js？ver = 1.2.1

これらのファイルをページの一番下に配置して読み込み速度を上げるにはどうすればよいですか。

登録を解除して再登録する必要がありますか、それとも他の方法が必要ですか。さらに良いことに、ネイティブスクリプトをまとめ、縮小し、一番下に移動する方法はありますか？

jqueryjavascriptwp-enqueue-script
5
Johan Dahl

まずこれは私が使っているもので私のために機能します。私のコードが100％正しいと言っているわけではありませんが、PingdomもGTmetrixも良い効果を示し、WPも満足します。だから、私がそうであるようにそれは間違っているはずがない。

（？ver = x.x.x）と表示されているバージョンは、それらのファイルをキャッシュする必要があるときにはデビューする可能性があるため、既に最初のステップであるストリッピング（フィルター処理）です。

これに使用するコードスニペットは次のようになります。

function remove_version_parameter( $src ){
    // Check if version parameter exist
    $parts = explode( '?ver', $src );
    // return without version parameter
    return $parts[0];
}
// filter .js files
add_filter( 'script_loader_src', 'remove_version_parameter', 15, 1 );
// filter .css files
add_filter( 'style_loader_src', 'remove_version_parameter', 15, 1 );

延期を追加するには（Googleもこれを見たいと思っています）* .jsファイル（ポジティブページスピードの場合）次のスニペットを使用します。

編集 - バックエンドでのエラーや奇妙な動作を防ぐために以下のコードを変更しました。ソースが見つかりました ここ ！

if ( ! function_exists( 'add_defer_to_js' ) && ! is_admin() ) {

    function add_defer_to_js( $url ) {

        if ( FALSE === strpos( $url, '.js' ) ) { 
            // not our file
            return $url;
        }

        // Must be a ', not "!
        return "$url' defer='defer";
    }
    add_filter( 'clean_url', 'add_defer_to_js', 11, 1 );
}

.jsファイルをフッターに追加する（ページの読み込みを容易にする）には、次のスニペットを使用してそれらをエンキューできます。

編集 - 追加情報：通常の使用のためにhttp://yourdomain.comの下の関数からfollowを削除してください。

function enqueue_scripts_in_footer() {

    wp_deregister_script( 'jquery' );
    wp_deregister_script( 'jquery-migrate.min' );
    wp_register_script( 'jquery', 'http://yourdomain.com/wp-includes/js/jquery/jquery.js', array(), false, true );
    wp_register_script( 'jquery-migrate.min', 'http://yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js', array(), false, true );
    wp_enqueue_script( 'jquery', 'http://yourdomain/wp-includes/js/jquery/jquery.js', array( 'jquery' ), false, true );
    wp_enqueue_script( 'jquery-migrate.min', 'http://yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts_in_footer' );;

まとめると、これらの3つの関数（functions.phpに追加）は、ページを速くロードし、正しくキャッシュするのに役立ちます。

これが少し役立つことを願っています。これらの関数を追加する前にあなたのfunctions.phpのコピーを作成することは決して悪い考えではありません（あなたのfunctions.phpの一番下に関数を追加することは最良の方法です）。

注： 私は子テーマを使用していません、そして今までのところ使用されているプラ​​グインとの競合は発生しません。私は少し警告/ヒントをしています、そして私が間違っているなら私を修正しますが、子テーマのために.jsファイルを待ち行列に入れるために、それはわずかに異なるべきであるべきです。

8
Charles