Google Pagespeed: Bagaimana cara memenuhi aturan kompresi gambar yang baru?

Kami memiliki beberapa halaman dengan nilai Pageseed yang bagus - bahkan yang memiliki 100/100. Namun sejak beberapa hari, Pagespeed mengklaim di semua situs (secara teknis berbeda, server berbeda) bahwa gambar kami dapat lebih dioptimalkan.

Adakah yang tahu persis apa yang telah diubah oleh algoritma? Pada PS 100/100 (sebelumnya), kami menggunakan jpegoptim, jadi kami benar-benar tidak tahu bagaimana cara mengoptimalkan lebih lanjut. Gambar diunggah oleh aplikasi kami dan kemudian dioptimalkan.

Wawasan apa pun akan dihargai. Apakah ada changelog untuk PS di mana saja?

Saya melihat hasil yang sama tidak sedap dipandang untuk halaman tanpa masalah sebelumnya, tentu saja menggunakan kerangka kerja responsif seperti ZURB Foundation dengan gambar responsif.

Di masa lalu saya menggunakan:

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

dan mendapat hasil yang bagus.

Solusi Jan 2017: Kualitas 85% harus melakukan trik:

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

Kembali ke 100/100 pada kecepatan halaman google.

Ini adalah bagian dari metode penyebaran menelan / npm saya untuk 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'));
}

Anda perlu menambahkan modul npm gulp-imagemin imagemin-jpegoptim

var imagemin = require('gulp-imagemin');
const imageminJpegoptim = require('imagemin-jpegoptim');

Anda juga dapat melihat pesan: " Unduh sumber gambar, JavaScript, dan CSS yang dioptimalkan untuk halaman ini. " Mereka telah melakukan pekerjaan untuk Anda jika Anda kesulitan mendapatkan optimasi yang diharapkan Google. Terkadang berbagai alat tidak bisa turun sekecil yang diinginkan Google.

Rekomendasi terbaru dari google adalah menggunakan konversi imagemagick :

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

dengan contoh puzzle.jpg tertentu

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

menggunakan argumen yang sama pada gambar saya sendiri, saya mendapat hasil yang sama dengan file JPG yang dioptimalkan yang diunduh.