Google Pagespeed: comment satisfaire les nouvelles règles de compression d'image?

14

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

Quelqu'un sait-il exactement ce qui a été changé par l'algorithme? Sur celui avec PS 100/100 (avant), nous utilisons jpegoptim, donc nous ne savons vraiment 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?

google google-pagespeed

— Raphael Jeger
source

Voyez-vous ce message sur le test de bureau ou dans le test mobile?

— Goyllo

les deux ont chuté ...

— Raphael Jeger

1

Je ne sais pas si cela peut faire un meilleur travail, mais Google recommande d' utiliser jpegtran pour optimiser les images JPEG. Il semble également que Google propose un nouveau format d'image appelé WebP qui a des tailles plus petites, mais une mauvaise prise en charge du navigateur.

— Stephen Ostermiller

Je l'ai remarqué aussi. Je sais que WebPageTest utilise 85% de qualité pour les JPG comme base de référence. Mais je ne peux pas me rapprocher de la taille recommandée par Google, sauf si je passe sous la qualité à 80%.

— DisgruntledGoat

7

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

Dans le passé, j'utilisais:

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

et a obtenu d'excellents résultats.

Solution de janvier 2017: 85% de la 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');

— S. Rieger
source

Bienvenue sur le site. Juste pour clarifier, dites-vous que vous avez également rencontré la même notification concernant l'optimisation des images alors que vous ne l'avez pas fait auparavant? Si oui, les options jpegoptim que vous avez ajoutées ont-elles aidé à résoudre ce problème?

— dan

nous avons également essayé avec différents paramètres dans jpegtran et jpegoptim, aucun moyen de réaliser de si petites images comme les états de Google n'est possible. problèmes de compression et de taille de pixel.

— Raphael Jeger

Merci - c'est vraiment utile. Et vous pouvez aussi faire quelque chose de similaire pour pngfind . -iname "*.png" -exec optipng -clobber -preserve -strip all -o2 {} \;

— billynoah

2

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

— doublejosh
source

2

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é.

— Kelly
source

1

Notez que si vous utilisez Windows, essayez magicksi convertcela ne fonctionne pas pour vous. magick puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg. imagemagick.org/discourse-server/viewtopic.php?t=19679

— user2875289