WordPress

Optimisation 1 - Compresser

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 :

Ensuite, il faudra réaliser les mêmes opérations pour ce Dokuwiki!!

1. Compresser les images

Compression en ligne

Des liens pour la compression d'images :

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.

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:

/**
 * 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;
}

2. 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 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 !!

3. 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'empêcher la mise à jour, ce qui est déconseillé.

Les outils en ligne

Pour les CSS

Pour le javascript

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.

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);
}

Avec gulp

Pour démarrer, il faut lire 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

    npm install --save-dev gulp-minify
    npm install --save-dev gulp-cssmin

Puis on écrit son 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']);
});

Il suffit alors, pendant la phase de développement de lancer la tache watch en ligne de commande

    gulp watch

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.

4. Compresser le html

Il faut être vigilant avec ce genre de compression, car elle suppose qu'il n'y a pas d'erreurs HTML

J'ai trouvé la Class WP_HTML_Compression qui fait le travail à la perfection, à ajouter dans le fichier functions.php du thème.

    /* 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;
        }
    }
Suivi des 2 fonctions ci-dessous et de l'instruction add_action( 'get_header', 'wp_html_compression_start' );
    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' );

5. Utiliser la compression gzip pour le HTML

voir Alsacréations - Cache et compression

Voir aussi la configuration du plugin WP Super Cache


Elisabeth Pointal 22/04/2016 18:03 —— Optimisation 2 - Nettoyer