WordPress
<= Optimisation 1 - Compresser

Optimisation 2 - Nettoyer

Identifier les plugins "couteux"

Les plugins et les thèmes Wordpress ne sont pas nécessairement optimisés. Certains chargent les fichiers js et css même si le plugin n'est pas utilisé sur la page voir jamais utilisé en front end… etc. Une fois qu'on a fait le tour, on peut filtrer comme ci-dessous:

   //On appelle la function cleanCSS au moment du chargement des styles
   add_filter('style_loader_tag', 'cleanCSS', 10, 3);

   /**
   * gt_get_the_ID
   * function intermédiaire pour récupérer l'id d'une page
   * @return integer
   */
   function gt_get_the_ID() {
	if ( in_the_loop() ) {
	     $post_id = get_the_ID();
	} else {
	     /** @var $wp_query wp_query */
	     global $wp_query;
	     $post_id = $wp_query->get_queried_object_id();
	}
	return $post_id;
   }
   
   /**
    * cleanCSS
    * function pour le ménage dans les css
    * @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){
       //Côté editeur/administrateur on laisse tel qu'est
        if(is_admin()){
	       return $tag;
        }
        // un css jamais utilisé
        if(strpos($handle,'validate-engine-css')===0){
	       return '';
        }
	   
        //un css utilisé uniquement pour une page particulière
        if(strpos($handle, 'leaflet-css") ===0  && gt_get_the_ID() != 124){
              return '';
        }
	 ...etc
       // sinon
        return $tag;
    }

On peut procéder de la même façon pour les javascripts:

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

Utiliser uncss pour votre thème

Un super outil permet d'éliminer le css inutilisé, il s'agit de uncss. Il existe un package npm pour gulp : gulp-uncss.
Dans mon l'exemple suivant, gulp est installé dans le dossier wp-content, j'installe en ligne de commande gulp-uncss :

wp-content> npm install gulp-uncss --save-dev


Le thème utilise un fichier style.css.

var gulp = require("gulp");
//j'ajoute uncss 
var uncss = require("gulp-uncss");

gulp.task("clearCSS", function () {
   
   gulp.src([
           //les css à nettoyer
           "./themes/myTheme/style.css"
            ])
       .pipe(uncss({
           // les pages pour lesquelles je veux voir le css utile. 
           html: [ "http://wp.local",
                   "http://wp.local/page1/", 
                   "http://wp.local/connect", 
                   "http://wp.local/2016/03/14/articlex/"
          ]
        }))
        // on pourrait en profiter pour le compresser
        // .pipe(mincss())
        .pipe(gulp.dest('./themes/myTheme/dist'));
		
});
On lance la tache en ligne de commande:

wp-content> gulp clearCSS

On obtient alors un fichier css /themes/myTheme/dist/style.css contenant uniquement les intructions css utilisées sur les pages sitées. Il manquera certainement quelques instructions css (par exemple les class ajoutées via javascript, il faudra les récupérer)

Ci-dessous l'amaigrissement d'un thème avec son fichier style.css, utilisant aussi bootstrap (version non compressée)

Fichiers Départ Après compression Après uncss Après réajout
bootstrap.css 169 Ko 135 Ko 7,78 Ko —-
style.css 59 Ko 42 Ko 16 Ko —-
finaleStyle.css —- —- 23.78 Ko 28 Ko
Total 228 Ko 177 Ko 23.78 Ko 28 Ko

Je charge les CSS de façon asynchrone pour les plugins, mais le css de mon thème, une fois amaigri est collé dans l'entête de la page:

    // on ajoute le CSS dans l'entête de la page
    add_action('wp_head', 'write_mainCSS');
    
    //La fonction qui écrit le css de mon thème 
    function write_mainCSS(){
        echo '<style type="text/css">';
        echo file_get_contents(get_template_directory() ."/css/finaleStyle.css");
        echo "</style>";
    }

Et je commente l'empilement des css pour le thème

//wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap-min.css', array(), null);
//wp_enqueue_style( 'mystyle', get_stylesheet_uri() );


Elisabeth Pointal 26/04/2016 09:25 —— Optimisation 3 - Chargement asynchrone