WordPress et les JavaScripts asynchrones

Voici une optimisation simple à mettre en place et qui peut améliorer considérablement le temps de chargement de vos sites : différer le chargement des fichiers javascripts.

En règle générale, les javascripts sont synchrones, c’est à dire que lorsqu’une page web se charge et tombe sur une URL de fichier JS, le cacul de la page est suspendu, le temps de le télécharger.

On se retrouve donc sur certains sites WordPress avec une dizaine de librairies et de scripts qui viennent ralentir le chargement et l’affichage.

L’astuce dont je vais parler consiste à rendre tous les javascript appelés par WordPress « asynchrones » : Ils seront chargés parallèlement au reste de la page.

Cette méthode vous fera gagner en performance, donc en expérience utilisateur et potentiellement en référencement.

La librairie LabJS

Pour charger des javascripts de façon asynchrone, il faut utiliser une librairie de chargement de fichier JS.

LabJS en est une, comme il en existe d’autres, mais celle-ci pèse 640 bits avant gzippage.

Cela veut dire qu’au lieu de charger :

• jQuery
• deux ou trois librairies
• un ou plusieurs fichier JS

… pour parfois plusieurs centaines de Kbits au chargement de la page, votre site ce contentera de charger :

• un  script de 640bits
• une simple instruction pour chaque autre script

Vos javascripts seront alors importés indépendamment du reste de la page.
Et là c’est comme les légumes : ça compte pas…

Mise en place

Pour appliquer cette astuce, la procédure est de modifier la variable de WordPress qui contient la file de javascript, avant que le CMS n’essaye d’imprimer les fichiers.

Nous allons prendre les infos qu’elle contient, et les insérer dans une autre variable globale qui nous servira plus tard, à afficher les scripts ajoutés à la queue, comme bon nous semble.

Écouter la variable globale $wp-scripts

La variable qui contient toutes les infos relatives au JS sur WordPress s’appelle $wp_scripts. Elle est un objet de la classe du même  nom et WordPress l’utilise par le biais des fonctions regroupées dans le fichier functions.wp-scripts.php.

Avant toute chose, à l’init de WordPress, nous allons initialiser une variable $mes_scripts dans laquelle nous injecterons toutes les données qui nous intéressent.

add_action( 'init', 'initialize_script_global' );
function initialize_script_global() {
  global $mes_scripts;
  $mes_scripts = array();
}

Ensuite, avant que WordPress n’affiche les scripts, il faut que nous regardions le contenu du tableau queue de $wp_scripts.

Prenons ces infos et insérons-les dans notre variable perso.

// On se greffe sur wp_header et sur wp_footer...
// ... avant que wp_print_script ne soit exécuté...
// ... sinon ce sera trop tard, il n'y aura plus de hook pour empêcher...
// ... l'impression des scripts
add_action( 'wp_head', 'je_veux_mes_scripts', 1 );
add_action( 'wp_footer', 'je_veux_mes_scripts', 1 );
function je_veux_mes_scripts() {
  global $mes_scripts,$wp_scripts;
  foreach( $wp_scripts->queue as $s ){
    $mes_scripts[ $wp_scripts->registered[ $s ]->handle ] = array(
      'src'   => $wp_scripts->registered[ $s ]->src, // src du script
      'deps'  => $wp_scripts->registered[ $s ]->deps, // dépendances du script
      'extra' => $wp_scripts->registered[ $s ]->extra //données relatives (variables)
      );
  }
}

Nous venons d’obtenir la liste des scripts mis à la file, tout au long du chargement de WordPress, ainsi que toutes les infos qui leur sont relatives…

Empêcher l’affichage normal des scripts

Pour empêcher que WordPress ne vienne lui-même imprimer les scripts, il suffit simplement de vider le tableau queue de l’objet $wp_script.

Dans le header et le footer, après avoir ajouté nos scripts dans $mes_scripts (donc avant de fermer la fonction je_veux_mes_scripts()), il faut ajouter le code suivant :

$wp_scripts->queue = array();

WordPress lorsqu’il exécutera wp_print_script(), ne verra aucun fichier dans la file, et ne fera rien du tout.

Gérer les dépendances des JavaScripts

Si à ce stade nous regardons notre variable globale, nous nous apercevront que les scripts sont bien dedans, mais chargés dans n’importe quel ordre.

Nous ne pouvons pas lancer le rendu du JS directement, il faut d’abord nous inquiéter des dépendances. Dans le cas on nous omettrions cette étape, nous risquerions d’obtenir de nombreuses erreurs de javascripts (et accessoirement le site ne fonctionnerai plus^^)

Et là on se dit :

Mais comment fait WordPress pour gérer ça ?

La technique employée par WordPress est de faire une boucle pour trier les scripts :

1. Les scripts sans aucune dépendances sont chargés directement.
2. Ceux qui ont besoin d’une dépendance déjà instanciée peuvent se charger
3. Ceux qui attendent leur dépendances feront un deuxième tour (ou plus)
4. Ceux qui requiert un script qui n’est pas dans la file feront aussi un autre tour, mais demandent l’instanciation des scripts dont ils dépendent
5. Ceux qui ont des dépendances qui n’existent nul part crèvent en silence…
6. Lorsque tous les cas sont traités, la boucle prend fin.

La méthode peut paraître bourrin au premier abord, mais en fait il n’y a pas vraiment de solution mieux adaptée.

Il faut créer une fonction, qui va être hookée sur wp_footer, dans laquelle nous allons trier les javascripts. C’est dans cette même fonction que nous rendront le JS par la suite. Elle doit être exécutée assez tardivement ; il faut lui attribuer une priorité assez élevée.

Les outils que nous allons utiliser sont :

• notre variable global $mes_scripts où sont stockés nos scripts
• la global $wp_scripts
• une variable temporaire $mes_scripts_ordonnes où nous allons stocker les javascripts, dans le bon ordre.

Au fur et a mesure de la boucle nous allons également avoir besoin de vider notre variable globale, il nous faut donc pour finir, une dernière variable $souvenir_de_mes_scripts qui sera une simple copie de $mes_scripts.

add_action( 'wp_footer', 'afficher_moi_tout_ca', 99 );
function afficher_moi_tout_ca() {
  global $mes_scripts,$wp_scripts;
  $i = count( $mes_scripts );

  $mes_scripts_ordonnes = array();
  $souvenir_de_mes_scripts = $mes_scripts;

  //la boucle infinie et le foreach sur la globale
  while( $i > 0 ){
    foreach( $mes_scripts as $k => $s ){
      //traitons nos scripts ici
    }
  }
}

Pour commencer, les scripts sans dépendances sont ajoutés directement.

if( empty( $s[ 'deps' ] ) ){
  $mes_scripts_ordonnes[ $k ] = $s;
  unset( $mes_scripts[ $k ] );
  $i--;
}

Ceux qui en ont font l’objet d’un traitement particulier, il ne seront ajoutés que si toutes leurs dépendances ont déjà été vues.

else{
  $alldepscounter = 0; //nombre de conditions remplies
  foreach( $s[ 'deps' ] as $d ){
    if( ! array_key_exists( $d, $souvenir_de_mes_scripts ) ) { //je n'aurais jamais ma dépendance...
      if( isset( $wp_scripts->registered[ $d ] ) ) { //... à moins qu'il y ai un script ?
        $mes_scripts[ $wp_scripts->registered[ $d ]->handle ] = array(
          'src'   => $wp_scripts->registered[ $d ]->src,
          'deps'  => $wp_scripts->registered[ $d ]->deps, 
          'extra' => $wp_scripts->registered[$d]->extra);
        $souvenir_de_mes_scripts[ $wp_scripts->registered[ $d ]->handle ] = $mes_scripts[ $wp_scripts->registered[ $d ]->handle ];
      }else{ //retourne dans ton monde, créature démoniaque...
        unset( $mes_scripts[ $k ] );
        $i--;
        break; 
      }
    }else{
      if( array_key_exists( $d, $mes_scripts_ordonnes ) ) { // je rempli une condition en +
        $alldepscounter++;
      }
    }
  }
  if( $alldepscounter == count( $s[ 'deps' ] ) ) { //bravo, toutes les conditions sont remplies
    $mes_scripts_ordonnes[ $k ] = $s;
    unset( $mes_scripts[ $k ] );
    $i--;
  }
}

Lorsque la globale est vide, alors la boucle est rompue et tous les scripts sont ordonnés dans notre nouvelle variable.

Il ne reste plus qu’à appeler LabJS et lui indiquer les fichiers à charger.

Charger les scripts

Voilà, maintenant il est temps de tout afficher, à condition qu’il y ai des scripts, bien sûr !

Donc si $mes_scripts_ordonnes n’est pas vide, alors on ajoute la librairie LabJS, puis on ouvre une balise script.

Dans cette balise script il suffit de boucler sur $mes_scripts_ordonnes et pour chacun, afficher leurs datas (issues de wp_localize_script()) puis leur sources :

// code à insérer avant la fermeture de affichez_moi_tout_ca()
if( ! empty( $mes_scripts_ordonnes ) ) {
  $output = '<script src="' . get_bloginfo( 'template_url' ) . '/js/lab.min.js"></script>' . "\n";
  $output.= '<script>';
  foreach( $mes_scripts_ordonnes as $s )
    $output.= $s[ 'extra' ][ 'data' ] . '$LAB.script("' . $s[ 'src' ] . '");' . "\n";
  $output.= '</script>';
  echo $output;
}

Le plugin WP Deferred Javascripts

Le code est complet et l’astuce devrait maintenant être opérationnelle, sauf dans certains cas :

• Si votre thème est codé un peu à l’arrache et que des scripts sont mis « en dur »
• Si des scripts sont mis en dur, avant wp_footer()
• Si vous chargez des scripts dans le header, puis ajoutez des données qui lui sont relatives directement dans le template, via un wp_localize_script()
  Ce bug a été corrigé dans la version 1.2 du plugin 🙂

Voici le code dans son intégralité :

//init global
add_action( 'init', 'initialize_script_global' );
function initialize_script_global() {
  global $mes_scripts;
  $mes_scripts = array();
}

//remplissage de $mes_scripts et vidage de $wp_scripts->queue
add_action( 'wp_head', 'je_veux_mes_scripts', 1 );
add_action( 'wp_footer', 'je_veux_mes_scripts', 1 );
function je_veux_mes_scripts() {
  global $mes_scripts,$wp_scripts;
  foreach( $wp_scripts->queue as $s ){
    $mes_scripts[ $wp_scripts->registered[ $s ]->handle ] = array(
      'src'   => $wp_scripts->registered[ $s ]->src, // src du script
      'deps'  => $wp_scripts->registered[ $s ]->deps, // dépendances du script
      'extra' => $wp_scripts->registered[ $s ]->extra //données relatives (variables)
      );
  }
  $wp_scripts->queue = array();
}

//tri et impression des scripts
add_action( 'wp_footer', 'afficher_moi_tout_ca', 99 );
function afficher_moi_tout_ca() {
  global $mes_scripts, $wp_scripts;
  $i = count( $mes_scripts );

  $mes_scripts_ordonnes = array();
  $souvenir_de_mes_scripts = $mes_scripts;

  //la boucle infinie et le foreach sur la globale
  while( $i > 0 ){
    foreach( $mes_scripts as $k => $s ){
      if( empty( $s[ 'deps' ] ) ){
        $mes_scripts_ordonnes[ $k ] = $s;
        unset( $mes_scripts[ $k ] );
        $i--;
      }else{
        $alldepscounter = 0; //nombre de conditions remplies
        foreach( $s[ 'deps' ] as $d ){
          if( ! array_key_exists( $d, $souvenir_de_mes_scripts ) ) { //je n'aurais jamais ma dépendance...
            if( isset( $wp_scripts->registered[ $d ] ) ) { //... à moins qu'il y ai un script ?
              $mes_scripts[ $wp_scripts->registered[ $d ]->handle ] = array(
                'src'   => $wp_scripts->registered[ $d ]->src,
                'deps'  => $wp_scripts->registered[ $d ]->deps, 
                'extra' => $wp_scripts->registered[ $d ]->extra);
              $souvenir_de_mes_scripts[ $wp_scripts->registered[ $d ]->handle ] = $mes_scripts[ $wp_scripts->registered[ $d ]->handle ];
            }else{ //retourne dans ton monde, créature démoniaque...
              unset( $mes_scripts[ $k ]);
              $i--;
              break; 
            }
          }else{
            if( array_key_exists( $d, $mes_scripts_ordonnes ) ) { // je rempli une condition en +
              $alldepscounter++;
            }
          }
        }
        if( $alldepscounter == count( $s[ 'deps' ] ) ) { //bravo, toutes les conditions sont remplies
          $mes_scripts_ordonnes[ $k ] = $s;
          unset( $mes_scripts[ $k ] );
          $i--;
        }
      }
    }
  }

  //print this
  if( ! empty( $mes_scripts_ordonnes ) ) {
    $output = '<script src="' . get_bloginfo( 'template_url' ) . '/js/lab.min.js"></script>' . "\n";
    $output.= '<script>';
    foreach( $mes_scripts_ordonnes as $s )
      $output.= $s[ 'extra' ][ 'data' ] . '$LAB.script("' . $s[ 'src' ] . '");' . "\n";
    $output.= '</script>';
    echo $output;
  }
}

Vu qu’il s’agit d’une optimisation assez avancé, l’intérêt n’est pas de recoder ça sur chaque site. Daniel Roch et moi en avons donc fait un plugin qui est disponible sur l’extend de WordPress : WP Deferred Javascripts (actuellement en version [baw_papii plugin= »wp-deferred-javascripts » info= »version » cache= »48″]).

Si vous avez quoi que ce soit comme soucis relatif au plugin, je vous invite à nous faire remonter les bugs via l’onglet « Support » de la page du plugin.

Alors, quel est maintenant votre ressenti sur le gain du temps de chargement lié à ce plugin ?