Cette extension n’a pas été testée avec plus de trois mises à jour majeures de WordPress. Elle peut ne plus être maintenue ou supportée et peut avoir des problèmes de compatibilité lorsqu’elle est utilisée avec des versions de WordPress plus récentes.

WP Deferred JavaScripts

Description

Cette extension diffère le chargement de tous les fichiers JavaScripts déclarés par le biais de wp_enqueue_script(), en utilisant LABJS. Le résultat est une amélioration conséquente du temps de chargement du site.

L’extension est compatible avec toutes les fonctions WordPress relatives au JavaScript (wp_localize_script(), fichiers en entête, fichier en pied de page…) et fonctionne avec toutes les extensions bien codées.

Si l’une de vos extensions, ou votre thème, n’utilise pas les fichiers JavaScripts de la bonne façon, il se peut que votre site ne fonctionne plus correctement. Lisez cette page : Function Reference/wp_enqueue_script sur le codex WordPress

LABJS (Loading And Blocking JavaScript) est un projet open-source (MIT license) initié par Getify Solutions.

Nous avons effectué une batterie de tests pour déterminer l’impact potentiel de l’extension sur le temps de chargement. Sur le site wabeo nous avons utilisé webwait (150 chargement par test). Les résultats laissent entendre que cette extension peut améliorer le temps de chargement de 25% !
Vous trouverez davantage d’informations dans l’onglet des captures d’écran.

Vous pourrez trouver plus de renseignements sur WP Deferred JavaScripts et des explications techniques sur le chargement asynchrone sur les blogs des auteurs.

Captures d’écran

  • Temps de chargement moyen de 1.91 secondes sans WP Deferred JavaScripts d’activé et avec les fichiers chargés dans l’entête de la page.
  • Temps de chargement moyen de 1.99 secondes sans WP Deferred JavaScripts d’activé et avec les fichiers chargés dans le pied de page.
  • Temps de chargement moyen de 1.56 secondes avec WP Deferred JavaScripts d’activé et avec les fichiers chargés dans l’entête de la page.
  • Temps de chargement moyen de 1.54 secondes avec WP Deferred JavaScripts d’activé et avec les fichiers chargés dans le pied de page.

Installation

  1. Téléversez l’extension WP Deferred JavaScripts sur votre site puis activez-la.

  2. C’est tout 🙂

FAQ

Le code de WP Deferred JavaScript inclut quelques filtres et actions. Si vous n’en avez jamais utilisé, lisez cette page. Il est préférable d’utiliser ces filtres dans une extension (classique ou automatisée).

Exclure des scripts

do_not_defer est un filtre qui prend en paramètre un tableau contenant les identifiants des fichier à charger de façon classique.

Voici un exemple :

// Normal script enqueue.
add_action( 'wp_enqueue_scripts', 'register_canvas_script' );
function register_canvas_script() {
    wp_register_script( 'my-canvas-script', 'http://exemple.com/myscript.js' );
    wp_enqueue_script( 'my-canvas-script' );
}

// Don't defer this script.
add_filter( 'do_not_defer', 'exclude_canvas_script' );
function exclude_canvas_script( $do_not_defer ) {
    $do_not_defer[] = 'my-canvas-script';
    return $do_not_defer;
}

Depuis la version 2.0.3, vous pouvez aussi utiliser la page des réglages de WP Deferred JS settings !

Changer l’URL de LABJS

wdjs_labjs_src est un filtre qui permet de changer l’URL de LABJS.
($lab_src, $lab_ver)

// for example, I need a specific version of LabJS
add_filter( 'wdjs_labjs_src', 'my_labjs_src', 10, 2 );
function my_labjs_src( $src, $ver ) {
    if ( '2.0' !== $ver ) {
        // Hotlinking raw github is a bad practice, I did it just for the lulz.
        return 'https://raw.githubusercontent.com/getify/LABjs/edb9fed40dc224bc03c338be938cb586ef397fa6/LAB.min.js';
    }
    return $src;
}
Compatibilité HTML5

Si vous utilisez HTML5, wdjs_use_html5 est un filtre qui enlève l’attribut type="text/javascript". Il s’utilise de cette façon :

add_filter( 'wdjs_use_html5', '__return_true' );
Intervenir sur la source d’un fichier différé

wdjs_deferred_script_src peut être employé pour changer la façon dont un script est chargé. Par exemple :

// Here, I need to add information about the charset.
add_filter( 'wdjs_deferred_script_src', '', 10, 3 );
function change_my_script_src( $src_string, $handle, $src ) {
    // $src_string -> .script("http://exemple.com/myscript.js?v=2.0")
    // $handle -> my-script
    // $src -> http://exemple.com/myscript.js?v=2.0
    $out = array( 'src' => $src, 'charset' => 'iso-8859-1' );
    return '.wait(' . json_encode( $out ) . ')';
}
Comment exécuter un code directement après le chargement d’un script ?

Il est possible de devoir exécuter un script directement après sont chargement. Vous pouvez utiliser le filtre wdjs_deferred_script_wait dans ce but.

add_action( 'wdjs_deferred_script_wait', 'after_my_script', 10, 2 );
function after_my_script( $wait, $handle ) {
    if ( 'my-script' === $handle ) {
        $wait = 'function(){new MyScriptObject();}';
    }
    return $wait;
}
Exécuter une fonction lorsque tous les scripts sont chargés

Il est possible d’avoir du code javascript « inline » dans les pages de son site. Si tel est le cas, il vous faudra utiliser ce filtre pour que votre script soit compatible avec WP Deferred JavaScripts.

Vous devez d’abord contenir ce code javascript « inline » dans une nouvelle fonction. Ensuite il faut utiliser wdjs_before_end_lab pour l’exécuter.

// This is a fake function that we are wrapping in a new function
add_filter( 'before_shitty_plugin_print_js', 'wrap_this_code' );
function wrap_this_code( $code ) {
    return 'function PluginShittyCode(){' . $code . '}';
}

add_filter( 'wdjs_before_end_lab', 'call_shitty_code' );
function call_shitty_code( $end ) {
    $end .= '.PluginShittyCode()';
    return $end;
}

Avis

3 mai 2018
Like everyone else, I wanted to speed up my site and deferring javaScript is a must. The problem is this plugin does more damage than it helps. – Stops drop down menus in Avada from working. – Google Maps, broke. – Sliders, some break. ZERO explanation as to how to exclude certain javascript form deferring. Went to the support board, and they help no one. Good idea, but needs allot of work!
27 mars 2018
Great! Easy to use if you need to fine tune speed of your web. There is a need to spped up web downloading, after cache you can use this to optimize Javascript download. But it needs fine tuning otherwise you will get some strange results like pages that do not render properly for a few seconds. Always begin by using a cache plugin.
1 mai 2017
Okie, so tested this right now with more than 16 different configurations and it works very well. It is the only plugin that actively defers JS. Rest are not as effective. If you are using any Caching Plugin, it may conflict with your website and may break your site. In 16 tests, nothing like this happened. Tested with PHP7 and latest Version of Wordpress.
Lire les 35 avis

Contributeurs/contributrices & développeurs/développeuses

« WP Deferred JavaScripts » est un logiciel libre. Les personnes suivantes ont contribué à cette extension.

Contributeurs

“WP Deferred JavaScripts” a été traduit dans 1 locale. Remerciez l’équipe de traduction pour ses contributions.

Traduisez « WP Deferred JavaScripts » dans votre langue.

Le développement vous intéresse ?

Parcourir le code, consulter le SVN dépôt, ou s’inscrire au journal de développement par RSS.

Journal

2.0.5

2.0.4

  • do_not_defer peu maintenant accepter des URLs de fichiers
  • Nouveau panneau de réglage pour exclure des fichiers javaScripts du processus de chargement asynchrone, sans utiliser le filtre de l’extension.
  • Testé jusqu’à la version 4.4.2

2.0.2

  • Correction d’un bug mineur : maintenant l’extension arrive à capturer des informations chargées tardivement puis les inclus dans la balise script qu’elle génère (au lieu de laisser la data créer sa propre balise).

2.0.1

  • Légère amélioration du code.
  • Préfixage des fonctions avec wdjs en lieu et place de sfdjs.

2.0.0

  • Réécriture complète du code, par Grégory Viguier.
  • Nouveaux filtres et actions.
  • LABJS est maintenant chargé lui-même de façon asynchrone.
  • Les balises conditionnelles autour des scripts sont maintenant supportées.
  • Correction de bug : erreurs 404 sur les fichiers JavaScripts dont la source n’existe pas.
  • Les dépendances des scripts exclus du processus, sont maintenant exclus elles aussi automatiquement.
  • WP Deferred JavaScripts est maintenant compatible avec SF Cache Busting.

1.5.5

  • Correction d’un problème lorsque l’URL contient « & ».
  • Correction d’un bug lors du chargement des dépendances.

1.5.4

  • Évitement des erreurs liées aux dépendances de scripts non chargées.

1.5.3

  • Correction d’un bug mineur lors de l’ajout d’un fichier JavaScript dans le pied de page.

1.5.2

  • Correction d’un bug mineur : mauvaise gestion des priorités lorsque l’extension vide la variable globale $wp_scripts.

1.5.1

  • Correction d’un bug mineur : l’extension était activée sur les pages d’inscription et de connexion.

1.5

  • Correction d’un bug mineur : l’extension opérait sur l’administration du site.

1.4

  • Correction d’un bug mineur : quelques fichiers JavaScripts ajoutés avec un très haute priorité étaient ignorés – le filtrage des scripts a maintenant lieu lors de wp_print_script.

1.3

  • Correction d’un bug majeur : les fichiers avec des dépendances attendent maintenant le chargement de leurs fichiers parents avant de se charger.

1.2

  • Les informations de scripts appellées après wp_head, mais liées à un script chargé dans le haut de page sont maintenant prises en compte par l’extension.

1.1

  • Correction de quelques bugs mineurs
  • Amélioration de la lisibilité du code

1.0

  • Version initiale