Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

code:wordpress:optimisation2 [16/05/2016 09:39]
elisabeth
code:wordpress:optimisation2 [15/06/2018 22:20]
Ligne 1: Ligne 1:
-{{htmlmetatags>​metatag-robots:​(index,​follow) metatag-author:​(Elisabeth Pointal) metatag-keywords:​(gulp-uncss,​ Wordpress ) metatag-description:​(Méthodes pour accélerer Wordpress :  nettoyage, uncss)}} 
-{{:​code:​wordpress:​wordpress300.jpg|WordPress}}\\ 
-[[code:​wordpress:​optimisation|<​= 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: 
-<sxh php; first-line:​361;​ title: wp-content/​themes/​myTheme/​functions.php>​ 
-   //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){ 
-       //Je n'​optimise rien côté éditeur 
-        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; 
-    } 
-</​sxh>​ 
- 
-On peut procéder de la même façon pour les javascripts:​ 
-<sxh php; first-line:​411;​ title: wp-content/​themes/​myTheme/​functions.php>​ 
-    add_filter( '​script_loader_tag',​ '​cleanJS',​ 10, 3 ); 
-    ​ 
-</​sxh>​ 
- 
- 
-====  Utiliser uncss pour votre thème ==== 
- 
-  
-Un super outil permet d'​éliminer le css inutilisé, il s'agit de ''​uncss''​. Il existe un package [[https://​www.npmjs.com/​|npm]] pour [[code:​javascript:​outils:​gulp|gulp]] : [[https://​www.npmjs.com/​package/​gulp-uncss|gulp-uncss]]. 
-\\ 
-Dans mon l'​exemple suivant, [[code:​javascript:​outils:​gulp|gulp]] ​ est installé dans le dossier wp-content, j'​installe en ligne de commande gulp-uncss : 
-<​code>​wp-content>​ npm install gulp-uncss --save-dev</​code>​ 
-\\ 
-Le thème utilise ​ un fichier ''​style.css''​. 
-<sxh javascript; first-line:​0;​ title:​wp-content/​gulpfile.js>​ 
-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'​));​ 
-  
-}); 
-</​sxh>​ 
-On lance la tache en ligne de commande:<​code>​wp-content>​ gulp clearCSS</​code>​ 
-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: 
-<sxh php; first-line:​522;​ title:​wp-content/​myTheme/​functions.php>​ 
-    // 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>";​ 
-    } 
-</​sxh>​ 
- 
-Et je commente l'​empilement des css pour le thème 
-<sxh php; first-line:​24;​ title:​wp-content/​myTheme/​functions.php>​ 
-//​wp_enqueue_style( '​bootstrap',​ get_template_directory_uri() . '/​css/​bootstrap-min.css',​ array(), null); 
-//​wp_enqueue_style( '​mystyle',​ get_stylesheet_uri() ); 
-</​sxh>​ 
----- 
- --- //​[[elisabeth.pointal@free.fr|Elisabeth Pointal]] 26/04/2016 09:25// ------ [[code:​wordpress:​optimisation3|Optimisation 3 - Chargement asynchrone]]