web-dev-qa-db-fra.com

Déplacez tous les fichiers JS vers le bas | bas de page, dans le bon sens

Afin d'accélérer le chargement de mon site et d'empêcher les scripts de générer le rendu de la page, j'essaie de déplacer tous les scripts possibles (signifiant fichiers JS) de head à footer. Après avoir lu et fait des recherches, j'ai créé ce code:

function footer_enqueue_scripts() {
    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_enqueue_scripts', 5);
    add_action('wp_footer', 'wp_print_head_scripts', 5);
}

add_action('after_setup_theme', 'footer_enqueue_scripts');

Mais cela ne fonctionne pas car certains scripts sont toujours chargés à head, voir le résultat ci-dessous:

<head>
<link rel="stylesheet" type="text/css" href="http://elclarin.dev/wp-content/cache/minify/000000/d4587/default.include.993ea9.css" media="all" />
<script type="text/javascript" src="http://elclarin.dev/wp-content/cache/minify/000000/d4587/default.include.0fe0ac.js"></script>
....
<!-- Metas -->
<meta charset="utf-8">

 <!-- JS Files -->
<script type="text/javascript" src="http://elclarin.dev/wp-content/themes/elclarin_v2/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://elclarin.dev/wp-content/themes/elclarin_v2/js/jquery.tools-1.2.7.min.js"></script>
<script type="text/javascript" src="http://elclarin.dev/wp-content/themes/elclarin_v2/js/prefixfree-1.0.6.min.js"></script>
<script type="text/javascript" src="http://elclarin.dev/wp-content/themes/elclarin_v2/js/modernizr.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="http://elclarin.dev/wp-content/themes/elclarin_v2/js/html5shiv.js"></script>
<![endif]-->
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="http://elclarin.dev/wp-content/themes/elclarin_v2/js/selectivizr-1.0.2.min.js"></script>
<![endif]-->
<script type="text/javascript">
    var TEMPLATEURL = 'http://elclarin.dev/wp-content/themes/elclarin_v2';
</script>


<!-- Generated by OpenX 2.8.9 -->
<script type='text/javascript' src='http://openx.elclarinweb.com/www/delivery/spcjs.php?id=2&amp;target=_blank'></script>

<!-- Analytics Files -->
<script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.Push(['_setAccount', 'UA-29394358-3']);
    _gaq.Push(['_trackPageview']);
    _gaq.Push(['elclarin._setAccount', 'UA-36592785-1']);
    _gaq.Push(['elclarin._trackPageview']);
    _gaq.Push(['elclarin._setAccount', 'UA-49334701-1']);
    _gaq.Push(['elclarin._trackPageview']);

    (function () {
        var ga = document.createElement('script');
        ga.type = 'text/javascript';
        ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(ga, s);
    })();

</script>
</head>
 ...
</footer>
    <script type='text/javascript' src='http://elclarin.dev/wp-includes/js/admin-bar.min.js?ver=4.1'></script>
    <script type='text/javascript' src='http://elclarin.dev/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
    <script type='text/javascript' src='http://elclarin.dev/wp-includes/js/hoverIntent.min.js?ver=r7'></script>
...

Une solution de contournement sur ce sujet? Le site en ligne à des fins de test est ici

Mettre à jour

Après @ Milo Conseil, j’ai trouvé que les scripts, comme il l’avait dit, ne sont pas placés correctement dans la file d’enregistrement dans le fichier header.php, car je peux voir ceci:

<!-- JS Files -->
<script type="text/javascript" src="<?php echo TEMPLATEURL ?>/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<?php echo TEMPLATEURL ?>/js/jquery.tools-1.2.7.min.js"></script>
<script type="text/javascript" src="<?php echo TEMPLATEURL ?>/js/prefixfree-1.0.6.min.js"></script>
<script type="text/javascript" src="<?php echo TEMPLATEURL ?>/js/modernizr.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="<?php echo TEMPLATEURL ?>/js/html5shiv.js"></script>
<![endif]-->
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="<?php echo TEMPLATEURL ?>/js/selectivizr-1.0.2.min.js"></script>
<![endif]-->
<script type="text/javascript">
    var TEMPLATEURL = '<?php echo TEMPLATEURL; ?>';
</script>
<script type="text/javascript" src="<?php echo TEMPLATEURL ?>/js/acciones.js"></script>

<!-- Generated by OpenX 2.8.9 -->
<script type='text/javascript' src='http://openx.elclarinweb.com/www/delivery/spcjs.php?id=2&amp;target=_blank'></script>

<!-- Analytics Files -->
<script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.Push(['_setAccount', 'UA-29394358-3']);
    _gaq.Push(['_trackPageview']);
    _gaq.Push(['elclarin._setAccount', 'UA-36592785-1']);
    _gaq.Push(['elclarin._trackPageview']);
    _gaq.Push(['elclarin._setAccount', 'UA-49334701-1']);
    _gaq.Push(['elclarin._trackPageview']);

    (function () {
        var ga = document.createElement('script');
        ga.type = 'text/javascript';
        ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(ga, s);
    })();

</script>
<!-- WP Files -->
<?php wp_head(); ?>

Ma question concernant ceux-ci inclut (je ne suis pas le développeur du thème mais je suis presque sûr que cela peut être corrigé): quelle est la bonne manière de les charger sans casser le thème et garder à l'esprit performances et accélération des pages?

javascriptwp-enqueue-scriptwp-enqueue-stylefooterwp-head
1
ReynierPM

IMHO, je pense toujours que charger des scripts et des styles directement dans l'en-tête est une mauvaise pratique, car il est toujours problématique de les supprimer et de les charger de manière coditive.

Le meilleur moyen de contourner ce problème est de créer un [thème enfant], puis de copier _header.php_ dans votre thème enfant. Wordpress chargera l'en-tête de votre thème enfant au lieu de l'en-tête du thème parent.

Vous pouvez maintenant supprimer tous les scripts de votre en-tête et les mettre en file d'attente correctement et les enregistrer via le wp_enqueue_scripts accrocher dans votre thème enfant _functions.php_. Rappelez-vous simplement de régler le paramètre _$in_footer_ dans les fonctions wp_enqueue_script() et wp_register_script() à `true

MODIFIER

À partir de votre lié _header.php_ , vos scripts sont ajoutés entre les lignes 56 à 95. Vous devrez le supprimer. Si vous visitez le site, aucune requête ne sera chargée.

Thenbuild dans la bibliothèque jQuery est déjà en cours de chargement, inutile de vous en préoccuper. Le reste, vous devez vous mettre en file d'attente. Voici un exemple (. N'oubliez pas que chaque script doit avoir un descripteur unique. Nommez-les de manière à ne pas créer de conflit )

_add_action('wp_enqueue_scripts', 'enqueue_my_scripts');

function enqueue_my_scripts() 
{
    wp_enqueue_script('jquery-tools', get_template_directory_uri() . '/js/jquery.tools.js-1.2.7.min.js', array('jquery'), false, true);
    //Do the same for the other scripts
}
_

Notez que j’ai utilisé get_template_directory_uri() ici car vous allez laisser votre dossier js dans votre thème parent. Vous pouvez cependant déplacer votre dossier js vers votre thème enfant, mais vous devrez alors utiliser get_stylesheet_directory_uri().

NOTES SUR LES SCRIPTS CONDITIONNELS

Il y a toujours, après quatre ans après avoir été créé, aucune manière de charger des scripts de manière conditionnelle selon le navigateur IE comme il en existe pour les styles. Vous pouvez consulter le billet de train et une autre question soulevant le même problème ici

Je n'ai jamais essayé de charger des scripts de manière conditionnelle en fonction du navigateur. Je ne peux donc pas commenter cette section ni indiquer si une solution fonctionne comme indiqué dans la réponse liée ou le ticket trac. Ce que je peux vous dire, si les solutions ne fonctionnent pas, vous devrez copier _footer.php_ dans votre thème enfant, puis déplacer les lignes 61 à 66 de votre en-tête vers votre pied de page.

NOTES SUR LES LIGNES DE SCRIPT 67 -69

Cette section transmet une variable php à jquery. La bonne façon de faire est d'utiliser wp_localize_script() . Vous aurez besoin de contacter le développeur ici pour obtenir de l'aide car il s'agit franchement d'un thème, et je ne sais vraiment pas où cela est réellement utilisé dans vos scripts. Consultez le lien également pour l'utilisation et les informations

NOTES SUR LES LIGNES DE SCRIPT DES ANALYTIQUES 75 - 94

Vous devrez créer un fichier js pour cette section. Si vous n'avez pas copié le dossier js du parent vers votre thème enfant, créez un nouveau dossier js pour votre thème enfant. Ouvrez-le et créez un nouveau fichier js et appelez-le comme vous voulez, quelque chose comme _analytics.script.js_.

Ensuite, vous déplacerez tout ce qui se trouve à l'intérieur des balises de script dans ce dossier, il s'agit des lignes 77 à 92. Assurez-vous d'utiliser l'encapsuleur sans conflit pour encapsuler ce script comme décrit ici

Vous pouvez simplement mettre ce script en file d'attente comme d'habitude, comme décrit précédemment. N'oubliez pas d'utiliser get_stylesheet_directory_uri() et non pas get_template_directory_uri().

EDIT 2

Le correctif de la réponse liée sous NOTES SUR LES SCRIPTS CONDITIONNELS ne fonctionne pas, il n'est pas encore implémenté et, comme je l'ai dit dans des commentaires, ce sera très probablement ne pas être inclus dans la version 10 dans 100 ans :-). Malheureusement, vous devrez vivre avec cela, il n’existe aucun moyen de le faire pour le moment. C’est vraiment l’inconvénient de supporter IE6 - 8. Eh bien, pour être honnête, si vous continuez de soutenir IE6 et 7, vous livrez une bataille perdue depuis longtemps. Tous les principaux développeurs de logiciels ont abandonné IE6 (y compris Wordpress), IE7 ayant été abandonné par Microsoft eux-mêmes. Les développeurs de logiciels suivront bientôt et IE 8 ne vivra pas jusqu'à la fin de 2016, à mon humble avis.

Pour résoudre ce problème de compatibilité avec jQuery, il peut être préférable de s'en tenir à ce que le thème lui-même offre.

Vous pouvez essayer quelque chose comme ça

_add_action('wp_enqueue_scripts', 'enqueue_my_scripts', PHP_INT_MAX);

function enqueue_my_scripts() 
{

    /**
     * Make sure, get_template_directory_uri() if script stays in parent theme
     * Use get_stylesheet_directory_uri() if script is in child theme
    */ 
    wp_enqueue_script('jquery-min', get_template_directory_uri() . '/js/jquery-1.7.2.min.js', array(), false, true);
    wp_enqueue_script('jquery-tools', get_template_directory_uri() . '/js/jquery.tools.js-1.2.7.min.js', array('jquery-min'), false, true);
    wp_enqueue_script('prefixfree', get_template_directory_uri() . '/js/prefixfree-1.0.6.min.js', array(), false, true);
    wp_enqueue_script('modernizr', get_template_directory_uri() . '/js/modernizr.js', array(), false, true);

    /**
     * The two conditional scripts which there is no work around for, load them or drop support
    */ 
    wp_enqueue_script('html5shiv', get_template_directory_uri() . '/js/html5shiv.js', array(), false, true);
    wp_enqueue_script('selectivizr', get_template_directory_uri() . '/js/selectivizr-1.0.2.min.js', array(), false, true);

    wp_enqueue_script('acciones', get_template_directory_uri() . '/js/acciones.js', array(), false, true);
    wp_enqueue_script('openx', 'http://openx.elclarinweb.com/www/delivery/spcjs.php?id=2&amp;target=_blank', array(), false, true);
    wp_enqueue_script('analytics', get_stylesheet_directory_uri() . '/js/analytics.script.js', array(), false, true);

}
_

Comme je l'ai dit précédemment, une variable php est transmise à un script dont vous devriez parler à l'auteur du thème. En outre, tous les problèmes de compatibilité doivent être discutés plus en détail avec les auteurs. Ceci est la mise en page correcte et devrait en théorie fonctionner. Pour tout autre thème ou problème de compatibilité, n'hésitez pas à contacter l'auteur du thème pour obtenir de l'aide.

EDIT 3

Voici à quoi devrait ressembler votre thème enfant header.php

_<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/Blog">
<head>
    <!-- Metas -->
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="google-site-verification" content="V022hygXU9AHEdTBX2BFnTBYeo4SsaTjC7aGdoIMPL4"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="<?php bloginfo( 'description' ); ?>">
    <?php if (is_single()) { ?>
        <meta property="og:title" content="<?php the_title(); ?>"/>
        <meta itemprop="name" content="<?php the_title(); ?>">
        <meta property="og:type" content="article"/>
        <meta property="og:url" content="<?php the_permalink(); ?>"/>
        <?php
        if (has_post_thumbnail()) {
            $src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( 490, 290 ), false );
            ?>
            <meta property="og:image" content="<?php echo $src[0]; ?>"/>
            <meta itemprop="image" content="<?php echo $src[0]; ?>">
        <?php } else { ?>
            <meta property="og:image" content="<?php echo TEMPLATEURL; ?>/images/logo.png"/>
            <meta itemprop="image" content="<?php echo TEMPLATEURL; ?>/images/logo.png">
        <?php } ?>
        <meta property="og:site_name" content="<?php bloginfo( 'name' ); ?>"/>
        <meta itemprop="description" content="<?php the_excerpt(); ?>">
    <?php } ?>

    <!-- Title -->
    <title>
        <?php
        if (isset($wp_query->query_vars['b'])) {
            echo str_replace( "+", " ", $wp_query->query_vars['b'] )." | ";
        }
        wp_title( '|', true, 'right' );
        bloginfo( 'name' );
        if (isset($paged) && $paged >= 2 || isset($page) && $page >= 2 || isset($page_alt) && $page_alt >= 2) {
            echo ' | '.sprintf( 'Página %s', max( $paged, $page, $page_alt ) );
        }
        ?>
    </title>

    <!-- Stylesheets & others -->
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>?version=4"/>
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"/>
    <link rel="alternate" type="application/rss+xml" title="RSS" href="<?php echo SITEURL; ?>/feed/"/>
    <link rel="alternate" type="application/atom+xml" title="Atom" href="<?php echo SITEURL; ?>/feed/atom/"/>

    <link rel="shortcut icon" href="<?php echo TEMPLATEURL ?>/images/favicon.ico"/>
    <link rel="shortcut icon" href="<?php echo TEMPLATEURL ?>/images/favicon.png"/>
    <link rel="Apple-shortcut icon" href="<?php echo TEMPLATEURL ?>/images/favicon_iphone.png"/>
    <link rel="Apple-touch-icon-precomposed" href="<?php echo TEMPLATEURL ?>/images/favicon_iphone.png">
    <link rel="Apple-touch-icon" href="<?php echo TEMPLATEURL ?>/images/favicon_iphone.png">

    <!-- WP Files -->
    <?php wp_head(); ?>
</head>
<body>
<div class="for_overlays">
    <?php
    if (is_front_page()) {
        $prepost      = $post;
        $normal_args  = Array(
            'post_type'      => 'portadadeldia',
            'post_status'    => 'publish',
            'posts_per_page' => 1
        );
        $normal_query = new WP_Query( $normal_args );
        if ($normal_query->have_posts()) {
            while ($normal_query->have_posts()) {
                $normal_query->the_post();
                ?>
                <?php
                if (has_post_thumbnail()) {
                    $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
                    ?>
                    <div id="portadadeldia" class="from_overlay">
                        <a href="<?php echo $large_image_url[0]; ?>" target="_blank">
                            <?php echo get_the_post_timthumbnail(
                                $post->ID,
                                'portadadeldia_frontpage_overlay',
                                array( 'alt' => trim( get_the_title() ), 'title' => trim( get_the_title() ) )
                            ); ?>
                        </a>
                    </div>
                <?php } ?>
            <?php
            }
        }
        $post = $prepost;
        wp_reset_postdata();
    }
    ?>
    <svg>
        <filter id="firefoxblur">
            <feGaussianBlur stdDeviation="4"/>
        </filter>
    </svg>
</div>
<header>
    <div class="center_content">
        <div id="header_publicity" class="publicity">
            <span>Publicidad</span>

            <div>
                <script type='text/javascript'><!--// <![CDATA[
                    /* [id18] Header Top */
                    OA_show(18);
                    // ]]> --></script>
                <noscript><a target='_blank' href='http://openx.elclarinweb.com/www/delivery/ck.php?n=1073df0'><img
                            border='0' alt=''
                            src='http://openx.elclarinweb.com/www/delivery/avw.php?zoneid=18&amp;n=1073df0'/></a>
                </noscript>
            </div>
        </div>
        <h1 id="header_logo"><a href="<?php echo SITEURL; ?>">
                <?php
                $prepost      = $post;
                $normal_args  = Array(
                    'post_status'    => 'publish',
                    'posts_per_page' => 1,
                    'post_type'      => 'logos',
                );
                $normal_query = new WP_Query( $normal_args );
                if ($normal_query->have_posts()) {
                    $normal_query->the_post();
                    $thumbnail_id     = get_post_thumbnail_id( $post->ID );
                    $thumbnail_object = get_post( $thumbnail_id );
                    $url              = $thumbnail_object->guid;
                    ?><img src="<?PHP echo $url; ?>" alt="<?php bloginfo( 'name' ); ?>"><?php
                } else {
                    ?><img src="<?PHP echo TEMPLATEURL; ?>/images/logo.png" alt="<?php bloginfo( 'name' ); ?>"><?php
                }
                $post = $prepost;
                wp_reset_postdata();
                ?>
            </a></h1>
        <?php custom_secondary_nav( "executive_menu", 'header_lateral_superior', 'Menú corporativo' ); ?>
        <div id="header_lateral_inferior">
            <div id="header_buscador" role="search" title="Buscar">
                <div id="header_buscador_inner">
                    <form method="get" action="<?php echo SITEURL; ?>">
                        Buscar
                        <input title="Buscar" type="text" name="s"
                               value="<?php echo str_replace( "+", " ", $wp_query->query_vars['s'] ); ?>">
                    </form>
                </div>
            </div>
            <div id="header_redes">
                <a href="http://Twitter.com/elclarin_aragua" target="_blank"><img
                        src="<?php echo TEMPLATEURL ?>/images/icons/tw.png"></a>
                <a href="<?php echo SITEURL; ?>/rss" target="_blank"><img
                        src="<?php echo TEMPLATEURL ?>/images/icons/rs.png"></a>
                <a href="<?php echo SITEURL; ?>"><img src="<?php echo TEMPLATEURL ?>/images/icons/ho.png"></a>
            </div>
        </div>
        <div id="header_menu">
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 3 ) ); ?>
        </div>
    </div>
</header>
<div role="main" id="main" class="main">
    <div class="center_content">
_
3
Pieter Goosen