web-dev-qa-db-fra.com

Google Pagespeed: Comment satisfaire les nouvelles règles de compression d'images?

Nous avons plusieurs pages avec de bonnes valeurs Pageseed - même celles avec 100/100. Depuis quelques jours cependant, Pagespeed affirme sur tous les sites (techniquement différents, différents serveurs) que nos images pourraient être plus optimisées.

Est-ce que quelqu'un sait ce que l'algorithme a changé exactement? Sur celui avec PS 100/100 (avant), nous utilisons jpegoptim, nous ne savons donc pas comment optimiser davantage. Les images sont téléchargées par notre application, puis optimisées.

Toute idée serait appréciée. Existe-t-il un journal des modifications pour PS quelque part?

googlegoogle-pagespeed
12
Raphael Jeger

Je vois les mêmes résultats disgracieux pour les pages sans aucun problème auparavant, bien sûr en utilisant des frameworks responsive comme ZURB Foundation avec des images responsive.

Dans le passé, j'ai utilisé:

find . -iname "*.jpg" -exec jpegoptim --strip-all -o -p {} \;

et obtenu d'excellents résultats.

Solution de janvier 2017: 85% de qualité devrait faire l'affaire:

find . -iname "*.jpg" -exec jpegoptim --strip-all -m85 -o -p {} \;

Retour à 100/100 sur la vitesse de la page google.

Voici une partie de ma méthode de déploiement gulp/npm pour ZURB Foundation 6

// Copy images to the "dist" folder
// In production, the images are compressed
function images() {
  return gulp.src('src/assets/img/**/*')
    .pipe($.if(PRODUCTION, imagemin(
      [
        imagemin.gifsicle({interlaced: true}),
        imageminJpegoptim({
          max: 85,
          progressive: true
        }),
        imagemin.optipng({optimizationLevel: 5}),
        imagemin.svgo({plugins: [{cleanupIDs: false, removeEmptyAttrs: false, removeViewBox: false}]})
      ],
      {
      },
      {
        verbose: true
      }
    )))
    .pipe(gulp.dest(PATHS.dist + '/assets/img'));
}

Vous devez ajouter les modules npm gulp-imagemin imagemin-jpegoptim

var imagemin = require('gulp-imagemin');
const imageminJpegoptim = require('imagemin-jpegoptim');
7
S. Rieger

La dernière recommandation de Google est d'utiliser imagemagick convert :

convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg

avec l'exemple spécifique puzzle.jpg

convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg

en utilisant ces mêmes arguments sur mes propres images, j'ai obtenu les mêmes résultats que le fichier JPG optimisé téléchargé.

2
Kelly

Vous pouvez également remarquer le message suivant: "Téléchargez des ressources optimisées pour l'image, le code JavaScript et CSS pour cette page." Ils ont effectué le travail à votre place si vous rencontrez des difficultés pour obtenir l'optimisation que Google attend. Parfois, divers outils ne peuvent pas être aussi petits que le souhaite Google.

2
doublejosh