Différences

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

Lien vers cette vue comparative

code:wordpress:optimisation [03/05/2016 08:07]
elisabeth [Optimisation 1 - Compresser]
code:wordpress:optimisation [15/06/2018 22:20]
Ligne 1: Ligne 1:
-{{htmlmetatags>​metatag-robots:​(index,​follow) metatag-author:​(Elisabeth Pointal) metatag-keywords:​(speed wordpress, optimiser Wordpress ) metatag-description:​(Méthodes pour accélerer Wordpress : compression des images, css, js et pdf)}} 
-====== Optimisation 1 - Compresser ====== 
-<​note>​Le but est d'​accélérer le chargement des pages Wordpress et on a de quoi s'​occuper.\\ 
-Pour un premier diagnostic, on peut utiliser : 
-  - [[http://​tools.pingdom.com/​fpt/​|Pingdom Website Speed Test]] 
-  - [[https://​developers.google.com/​speed/​pagespeed/​insights/​|Google Developpers PageSpeed Insights]] 
-  - [[http://​www.webpagetest.org]] 
-Ensuite, il faudra réaliser les mêmes opérations pour ce Dokuwiki!! 
-</​note>​ 
- 
-===== - Compresser les images ===== 
-  
-==== Compression en ligne ==== 
-Des liens pour la compression d'​images : 
-  * [[http://​compressjpeg.com/​fr/​|Compressjpeg.com - Compresser jpeg et png]] 
-  * [[http://​gifmaker.me/​optimizer/​|gifmarker]] 
-La bibliothèque **Media** de Wordpress compresse et redimensionne les images téléchargées par l'​utilisateur. 
-Ce n'est pas forcéméent le cas pour tous les plugins. 
-\\Il ne faut pas non plus oublier de compresser ses icônes et autres images. 
-====  Exemple du plugin ​ photo-gallery==== 
- 
-Ce plugin laisse l'​utilisateur définir la taille du redimensionnement et télécharger des images énormes. 
-\\On peut modifier les valeurs par défaut des redimensionnement,​ ce qui est un moindre mal. 
-Il faut aller chercher les paramètres du plugin dans la base de données, dans la table ''​wp_bwg_options''​ et modifier les paramètres de taille ''​upload_thumb_width'',​ ''​upload_thumb_height''​ et surtout ''​upload_img_width''​ et ''​upload_img_height''​. 
-====  Compression avec php ==== 
-On a toujours la possibilité de passer un répertoire d'​images à la moulinette pour compresser les images, voici une petite fonction utile dans ce cas: 
-<sxh php; first-line: 1; title: fonction compress>​ 
-/** 
- * La fonction compress() renomme et redimensionne les images. 
- * @param $img String Chemin absolu de l'​image d'​origine. 
- * @param $to String Chemin absolu de l'​image générée. 
- * @param $width Int Largeur maximum de l'​image générée. ​ 
- * @param $height Int Hauteur maximum de l'​image générée. ​ 
- * @param $quality Int taux de compression entre 0 et 100 
- */ 
-function compress($img,​ $to, $width = 0, $height = 0, $quality = 90){ 
- 
-    $dimensions = getimagesize($img);​ 
-    ​ 
-    $wi = $dimensions[0];​ 
-    $hi = $dimensions[1];​ 
-  ​ 
-    // si 0 passé en paramètre, ne change pas la taille 
-    if($width == 0 || $height == 0){ 
-       $wf = $wi; 
-       $hf = $hi; 
-    } 
-   // calcul du coefficient de redimensionnement 
-    $k = max($wi/​$width,​ $hi/​$height,​1);​ 
-    $wf = round($wi/​$k);​ 
-    $hf = round($hi/​$k);​ 
-  ​ 
- 
-    // Création de l'​image avec la librairie GD 
- 
-        $pattern = imagecreatetruecolor($wf,​ $hf); 
-        $type = mime_content_type($img);​ 
-        switch (substr($type,​ 6)) { 
-            case '​jpeg':​ 
-                $image = imagecreatefromjpeg($img);​ 
-                break; 
-            case '​gif':​ 
-                $image = imagecreatefromgif($img);​ 
-                break; 
-            case '​png':​ 
-                $image = imagecreatefrompng($img);​ 
-                break; 
-        } 
-        imagecopyresampled($pattern,​ $image, 0, 0, 0, 0, $wf, $hf, $wi, $hi); 
-        imagedestroy($image);​ 
-         ​switch (substr($type,​ 6)) { 
-            case '​jpeg':​ 
-                 ​imagejpeg($pattern,​ $to, $quality); 
-                break; 
-            case '​gif':​ 
-                 ​imagepng($pattern,​ $to, $quality); 
-                break; 
-            case '​png':​ 
-                 ​imagegif($pattern,​ $to, $quality); 
-                break; 
-        } 
-        
- 
-        return TRUE; 
-} 
-</​sxh>​ 
- 
- 
- 
- 
-===== - Compresser les pdf ===== 
-Un vrai casse-tête! je n'ai pas trouvé de compresseur qui fasse l'​affaire! ​ 
-\\ 
-Les compresseurs ne compressent pas grand chose, éliminent du contenu ou en rajoute !!? \\ 
- 
- 
-Je me suis aperçue que le poids des pdfs provenait essentiellement des images qu'ils contenaient.\\ 
-Aucune idée du logiciel avec lequel ils avaient été crées. En les ouvrant avec Word 2016, je perdais une bonne partie du formatage. Par contre en les ouvrant avec [[https://​fr.libreoffice.org/​download/​libreoffice-stable/​|Libre Office]], ils semblaient idemnes.\\ 
-Il a suffi alors de les réexporter en pdf, en réduisant la qualité de l'​image au minimum (75 DPI), pour leur faire perdre 90% de leur poids.\\ 
-Ce qui oblige à les ouvrir un par un..., travail fastidieux !!\\ 
-{{ :​code:​wordpress:​export_pdf.png?​700 |}} 
- 
- 
-===== - Compresser les css et les js ===== 
-A priori, on ne peut le réaliser que pour ses propres plugins et ses propres thèmes. Pour les autres, ​ à chaque mise à jour, la compression sera écrasée. A moins d'​[[code:​wordpress:​non_maj|empêcher la mise à jour]], ce qui est déconseillé. 
- 
-==== Les outils en ligne  ==== 
-=== Pour les CSS === 
- 
-  * [[https://​cssminifier.com/​|CSS Minifier]] 
-  * [[http://​csscompressor.com/​|CSS Compressor]] 
-  * [[http://​www.cleancss.com/​css-minify/​| cleancss - CSS Minifier]] 
-  * ... 
-=== Pour le javascript === 
-  * [[http://​www.danstools.com/​javascript-minify/​| Dan's tools - Javascript Minifier]] 
-  * [[http://​jscompress.com/​|JScompress]] 
-  * ... 
- 
-=== Dans mon code === 
-Dans le code php, à l'​enregistrement des css et js, on peut ajouter une condition sur WP_DEBUG, utile pendant la phase développement.\\ 
-Et surtout ne pas oublier quand la phase dev est terminé : 
-  *  de réaliser la compression quand on a terminé, ​ 
-  * de changer le numéro de version du fichier compressé ou bien son nom (pour les divers caches), ​ 
-  * et biensûr de mettre le fichier compressé avec le bon nom dans le répertoire ''​min''​. 
-<sxh php;> 
-if(WP_DEBUG){ 
-     ​$version = rand(0,​100);​ 
-     ​wp_enqueue_script( '​myplugin-js',​ MYPLUGIN_DIR_URL . '/​js/​myplugin.js',​ array(), $version, true); 
-}else{ 
-     ​wp_enqueue_script( '​myplugin-js',​ MYPLUGIN_DIR_URL . '/​js/​min/​myplugin.js',​ array(), '​3.3.7',​ true); 
-     // ​ ou wp_enqueue_script( '​myplugin-js',​ MYPLUGIN_DIR_URL . '/​js/​min/​myplugin3-3-7.js',​ array(), '',​ true); 
-} 
-</​sxh>​ 
- 
-==== Avec gulp ==== 
-Pour démarrer, il faut lire [[code:​javascript:​outils:​gulp|Outils pour javascript - gulp]].\\ 
-Comme je l'​utilise pour les plugins et le theme, j'ai installé ''​gulp''​ dans le répertoire ''​wp-content''​. 
-On installe ''​gulp-minify''​ et ''​gulp-cssmin''​ 
-<​code>​ 
-    npm install --save-dev gulp-minify 
-    npm install --save-dev gulp-cssmin 
-</​code>​ 
-Puis on écrit son gulpfile.js 
-<sxh javascript; first-line: 1; highlight: [89,92]; title: gulpfile.js > 
-var gulp = require('​gulp'​);​ 
-var cssmin = require('​gulp-cssmin'​);​ 
-var min =require('​gulp-minify'​);​ 
- 
- 
-/** 
-* Pour minimiser mes fichiers ​ js et css de mon thème*/ 
-gulp.task('​myThemeCSS',​ function(){ 
- gulp.src(['​./​themes/​myTheme/​css/​styles.css'​]) 
- .pipe(cssmin()) 
- .pipe(gulp.dest('​./​themes/​myTheme/​css/​min'​));​ 
-  
-  
-}); 
-gulp.task("​myThemeJS",​ function(){ 
-       ​gulp.src(['​./​themes/​js/​myTheme.js'​]) 
- .pipe(min()) 
- .pipe(gulp.dest('​./​themes/​myTheme/​js/​min'​));​ 
-}); 
-gulp.task('​watch',​ function(){ 
-    //Exécuter la tache "​myThemeCSS"​ à chaque modification de mon CSS 
-    gulp.watch('​./​themes/​myTheme/​css/​styles.css',​ ['​myThemeCSS'​]);​ 
-    ​ 
-     //​Exécuter la tache "​myThemeJS"​ à chaque modification de mon js 
-    gulp.watch('​./​themes/​myTheme/​js/​myTheme.js',​ ['​myThemeJS'​]);​ 
-}); 
- 
-</​sxh>​ 
-Il suffit alors, pendant la phase de développement de lancer la tache watch en ligne de commande<​code> ​   gulp watch</​code>​ 
-Ainsi, à chaque modification des fichiers styles.css ou myTheme.js les fichiers compressés sont automatiquement recalculés. 
-Je l'​utilise avec ''​livereload''​ qui regarde les modifications dans le dossier ''​min''​ et recharge la page automatiquement.\\ 
-On a alors plus besoin d'​utiliser la condition ''​WP_DEBUG''​. 
- 
-===== - Compresser le html ===== 
-<note important>​Il faut être vigilant avec ce genre de compression,​ car elle suppose qu'il n'y a pas d'​erreurs HTML</​note>​ 
-J'ai trouvé la  [[https://​gist.github.com/​unfulvio/​5889564|Class WP_HTML_Compression]] qui fait le travail à la perfection, à ajouter dans le fichier ''​functions.php''​ du thème. 
-<sxh php; first-line: 1;  title: Class WP_HTML_Compression>​ 
-    /* Minifies HTML and removes comments (except IE tags and comments within script tags) 
-     * 
-     * To disable compression of code portions, use '<​!--wp-html-compression no compression-->'​ tag 
-     * 
-     * @see http://​forrst.com/​posts/​Wordpress_Minify_output_HTML-29q 
-     * @see http://​www.intert3chmedia.net/​2011/​12/​minify-html-javascript-css-without.html 
-     */ 
-    class WP_HTML_Compression 
-    { 
-        // Settings 
-        protected $compress_css = true; 
-        protected $compress_js = false; 
-        protected $info_comment = true; 
-        protected $remove_comments = true; 
-    ​ 
-        // Variables 
-        protected $html; 
-    ​ 
-        public function __construct($html) 
-        { 
-            if (!empty($html)) 
-            { 
-                $this->​parseHTML($html);​ 
-            } 
-        } 
-    ​ 
-        public function __toString() 
-        { 
-            return $this->​html;​ 
-        } 
-    ​ 
-        protected function minifyHTML($html) 
-        { 
-            $pattern = '/<​(?<​script>​script).*?<​\/​script\s*>​|<​(?<​style>​style).*?<​\/​style\s*>​|<​!(?<​comment>​--).*?​-->​|<​(?<​tag>​[\/​\w.:​-]*)(?:"​.*?"​|\'​.*?​\'​|[^\'">​]+)*>​|(?<​text>​((<​[^!\/​\w.:​-])?​[^<​]*)+)|/​si';​ 
-            preg_match_all($pattern,​ $html, $matches, PREG_SET_ORDER);​ 
-            $overriding = false; 
-            $raw_tag = false; 
-            // Variable reused for output 
-            $html = '';​ 
-            foreach ( $matches as $token ) { 
-    ​ 
-                $tag = (isset($token['​tag'​])) ? strtolower($token['​tag'​]) : null; 
-                $content = $token[0]; 
-    ​ 
-                if ( is_null( $tag ) ) { 
-    ​ 
-                    if ( !empty( $token['​script'​] ) ) { 
-    ​ 
-                        $strip = $this->​compress_js;​ 
-    ​ 
-                    } else if ( !empty($token['​style'​] ) ) { 
-    ​ 
-                        $strip = $this->​compress_css;​ 
-    ​ 
-                    } else if ( $content == '<​!--wp-html-compression no compression-->'​ ) { 
-    ​ 
-                        $overriding = !$overriding;​ 
-                        // Don't print the comment 
-                        continue; 
-    ​ 
-                    } else if ( $this->​remove_comments ) { 
-    ​ 
-                        if ( !$overriding && $raw_tag != '​textarea'​ ) { 
-    ​ 
-                            // Remove any HTML comments, except MSIE conditional comments 
-                            $content = preg_replace('/<​!--(?​!\s*(?:​\[if [^\]]+]|<​!|>​))(?:​(?​!-->​).)*-->/​s',​ '',​ $content); 
-                        } 
-                    } 
-    ​ 
-                } else { 
-    ​ 
-                    if ( $tag == '​pre'​ || $tag == '​textarea'​ || $tag == '​script'​ ) { 
-                        $raw_tag = $tag; 
-                    } else if ( $tag == '/​pre'​ || $tag == '/​textarea'​ || $tag == '/​script'​ ) { 
-                        $raw_tag = false; 
-                    } else { 
-    ​ 
-                        if ($raw_tag || $overriding) { 
-                            $strip = false; 
-                        } else { 
-                            $strip = true; 
-    ​ 
-                            // Remove any empty attributes, except: 
-                            // action, alt, content, src 
-                            $content = preg_replace('/​(\s+)(\w++(?<​!\baction|\balt|\bcontent|\bsrc)=""​)/',​ '​$1',​ $content); 
-    ​ 
-                            // Remove any space before the end of self-closing XHTML tags 
-                            // JavaScript excluded 
-                            $content = str_replace('​ />',​ '/>',​ $content); 
-                        } 
-    ​ 
-                    } 
-    ​ 
-                } 
-    ​ 
-                if ( $strip ) { 
-                    $content = $this->​removeWhiteSpace($content);​ 
-                } 
-    ​ 
-                $html .= $content; 
-            } 
-    ​ 
-            return $html; 
-        } 
-    ​ 
-        public function parseHTML($html) 
-        { 
-            $this->​html = $this->​minifyHTML($html);​ 
-        } 
-    ​ 
-        protected function removeWhiteSpace($str) 
-        { 
-            ​ 
-            $str = str_replace( "​\t",​ ' ', $str ); 
-            $str = str_replace( "​\n", ​ '',​ $str ); 
-            $str = str_replace( "​\r", ​ '',​ $str ); 
-    ​ 
-            while ( stristr($str,​ ' ​ ' ) ) { 
-    ​ 
-                $str = str_replace(' ​ ', ' ', $str); 
-            } 
-    ​ 
-            return $str; 
-        } 
-    } 
-</​sxh>​ 
-Suivi des 2 fonctions ci-dessous et de l'​instruction ​    ''​add_action( '​get_header',​ '​wp_html_compression_start'​ );''​ 
-<sxh php; first-line: 152; title: dans functions.php>​ 
-    function wp_html_compression_finish($html) { 
-    ​ 
-        return new WP_HTML_Compression($html);​ 
-    } 
-    function wp_html_compression_start() { 
-    ​ 
-        ob_start( '​wp_html_compression_finish'​ ); 
-    } 
-    add_action( '​get_header',​ '​wp_html_compression_start'​ ); 
-</​sxh>​ 
- 
-===== - Utiliser la compression ​ gzip pour le HTML ===== 
-voir [[http://​www.alsacreations.com/​article/​lire/​914-compression-pages-html-css-gzip-deflate.html|Alsacréations - Cache et compression]]\\ 
- 
-Voir aussi la configuration du [[code:​wordpress:​optimisation4|plugin WP Super Cache]] 
- 
----- 
- 
- --- //​[[elisabeth.pointal@free.fr|Elisabeth Pointal]] 22/04/2016 18:​03// ​   ------ ​ [[code:​wordpress:​optimisation2|Optimisation 2 - Nettoyer]] 
-