WordPress
<= Optimisation 2 - Nettoyer

Optimisation 3 - Chargement asynchrone

6. Chargement asynchrone des css

J'ai copié/collé la méthode trouvée sur github : LoadCSS par Filament Group et ajouté une petite fonction loadWPstyles.
Je ne l'utilise pas pour le css de mon thème (voir 2. Utiliser uncss pour votre thème).

Vous trouverez ici mon fichier loadCSS.js.

J'ajoute un filtre dans mon thème qui retourne un tableau javascript des styles à charger en remplacement des tags <link>:

add_filter('style_loader_tag', 'cleanCSS', 10, 3);

/**
 * cleanCSS
 * function pour le ménage  dans les css et prépare le chargement asynchrone
 * @param $tag string le tag complet <lin href=.../> 
 * @param $handle string l'identifiant du css
 * @param $src string l'adresse url du fichier
 * */
function cleanCSS( $tag, $handle, $src){
     // voir ci-dessus j'élimine les fichiers inutiles $2.1 Identifier les plugins couteux
     // ......
     // on prépare le chargement asynchrone : en enregistrant l'adresse du css dans un tableau javascript wp_styles 
     // et  on ajoute une balise <noscript> pour le cas du javascript désactivé
   return  "<script type='text/javascript'>".
           "   if( typeof(wp_styles)=='undefined'){var wp_styles = new Array();} ".
           "   wp_styles.push('".$src."')".
           "</script>".             
           "<noscript><link rel='stylesheet' href='".$src."'></noscript>";
}

Puis en bas de page, j'ajoute le javascript qui chargera les css :

 // On ajoute tout à la fin de l'écriture de la page  l'action write_loadCSS
 add_action('wp_footer', 'write_loadCSS', 1000);

/**
 * write_loadCSS
 * Ecrit le contenu du fichier loadCSS.min.js dans une balise <script>
 */
 function write_loadCSS(){
        echo "<script type='text/javascript'>";
        echo file_get_contents(get_template_directory() ."/js/loadCSS.min.js");
        echo "</script>";
 }

7. Chargement asynchrone des js

Ajout d'un "async"

Wordpress a un système d'empilement ordonné des fichiers javascript pour gérer les dépendances.
Cette méthode fonctionne uniquement lorsque tous les fichiers sont indépendants

add_filter( 'script_loader_tag', 'cleanJS', 10, 3 );

/**
 * cleanJS
 * function pour le ménage dans les js
 * @param $tag string le tag complet <script src=.../> 
 * @param $handle string l'identifiant du javascript
 * @param $src string l'adresse url du fichier
 */
function cleanJS(){
    //supprime les javascript inutiles
    if(is_admin()){
        return $tag;
    }
    if($handle === "plugin-back"){
         return '';
    }
    //... etc
    
    
    // Remplace <script src="path_to-file"/> par <script async="async" src="path_to-file"/>
    return str_replace( ' src', ' async="async" src', $tag );
}

Avec des dépendances

Cette méthode, similaire à celle utilisée pour les css, fonctionne très bien si aucun plugin n'écrit du javascript en ligne dépendant d'un fichier javascript!
(Par exemple, un plugin qui écrit du jquery en ligne!!)

J'utilise un loader récupéré (je ne sais plus où) et adapté à mon cas : loadJS.js
J'ajoute un filtre dans mon thème qui retourne un tableau javascript wp_js des fichiers javascript à charger.

add_filter( 'script_loader_tag', 'cleanJS', 10, 3 );
 
/**
 * cleanJS
 * function pour le ménage dans les js et préparer leur chargement 
 * @param $tag string le tag complet <script src=.../> 
 * @param $handle string l'identifiant du javascript
 * @param $src string l'adresse url du fichier
 */
function cleanJS(){
    //supprime les javascript inutiles
    if(is_admin()){
        return $tag;
    }
    if($handle === "plugin-back"){
         return '';
    }
    //... etc
  
    // On enregistre les fichiers dans un tableau javascript wp_js
    return "<script type='text/javascript'>".
           "   if(typeof wp_js == 'undefined'){var wp_js = new Array();} ".
           "   wp_js.push({name:'".$handle."', src:'".$src."'});".
           "</script>";
}
Puis en bas de page, en dernier, je colle le loader javascript:
    add_action('wp_footer', 'write_loadJS',1001);
    function write_loadCSS(){
        echo "<script type='text/javascript'>";
        echo file_get_contents(get_template_directory() ."/js/loadJS.js");
        echo "</script>";
    }

8. Charger les images

Le problème s'est posé avec le plugin photo-gallery (encore lui).
Il charge toutes les images pour un diaporama avec la page

La solution est de le laisser charger la première image uniquement et charger les autres images quand la page est chargée.


Elisabeth Pointal 26/04/2016 09:28 —— Optimisation 4 - Les caches