web-dev-qa-db-fra.com

Déplacer le javascript natif de Wordpress au bas de la page?

En vérifiant ma page dans Google Speed ​​Insights, on se plaint de la présence de javascript qui empêche le chargement du reste de la page. Le javascript en question est un script Wordpress natif

… -Includes/js/jquery/jquery.js? Ver = 1.11.2

… S/jquery/jquery-migrate.min.js? Ver = 1.2.1

Comment puis-je obtenir ces fichiers au bas de la page à la place et accélérer mon chargement?

Dois-je les désenregistrer et les enregistrer à nouveau, ou de toute autre manière? Mieux encore, existe-t-il un moyen de regrouper, de réduire et de déplacer les scripts natifs vers le bas?

jqueryjavascriptwp-enqueue-script
5
Johan Dahl

Tout d’abord, c’est ce que j’utilise et pour moi et cela fonctionne. Je ne dis pas que mon code est correct à 100%, mais Pingdom ainsi que GTmetrix montrent un effet positif et WP est également satisfait. , donc ça ne peut pas être aussi faux que moi.

Les versions montrant (? Ver = x.x.x) peuvent être debet lorsque ces fichiers doivent être mis en cache, ce qui supprime (filtre) une première étape.

L'extrait de code que j'utilise pour cela ressemble à ceci:

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 );

Pour ajouter différer (Google aime aussi voir cela), les fichiers * .js (pour une vitesse de rotation positive) que j'utilise dans l'extrait suivant:

Edit - Modification du code ci-dessous pour éviter les erreurs/comportements étranges dans le back-end. Source trouvée ici !

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 );
}

Pour ajouter des fichiers .js maintenant dans le pied de page (aide au chargement des pages), nous pouvons les mettre en file d'attente avec l'extrait suivant:

Edit - Extra info: supprime ce qui suit de la fonction ci-dessous http://yourdomain.com pour une utilisation normale.

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' );;

Au total, ces 3 fonctions (ajouter le functions.php) devraient aider à charger vos pages plus rapidement et à les mettre en cache correctement.

Espérons que cela aide un peu. Faire une copie de votre functions.php avant d’ajouter ces fonctions n’est pas une mauvaise idée (ajouter les fonctions au bas de votre functions.php est de loin la meilleure solution).

Remarque: Je n'utilise pas de thème enfant et jusqu'à présent, il ne cause aucun conflit avec les plugins utilisés. J'avertis un peu, et corrigez-moi si je me trompe, mais pour mettre en file d'attente les fichiers .js pour un thème enfant, cela devrait être légèrement différent.

8
Charles