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

14

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?

google google-pagespeed

— Raphael Jeger
sumber

Apakah Anda melihat pesan itu di uji desktop atau di uji seluler?

— Goyllo

keduanya jatuh ...

— Raphael Jeger

1

Tidak yakin apakah itu dapat melakukan pekerjaan yang lebih baik, tetapi Google merekomendasikan menggunakan jpegtran untuk mengoptimalkan gambar JPEG. Tampaknya juga Google mendorong format gambar baru yang disebut WebP yang memiliki ukuran lebih kecil, tetapi dukungan browser yang buruk.

— Stephen Ostermiller

Saya perhatikan ini juga. Saya tahu bahwa WebPageTest menggunakan kualitas 85% untuk JPG sebagai dasarnya. Tapi saya tidak bisa mendekati ukuran yang disarankan Google kecuali saya memiliki kualitas di bawah 80%.

— DisgruntledGoat

7

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

— S. Rieger
sumber

Selamat datang di situs ini. Hanya untuk memperjelas, apakah Anda menyatakan Anda juga pernah mengalami pemberitahuan yang sama tentang mengoptimalkan gambar sedangkan sebelumnya Anda tidak? Jika demikian, apakah opsi jpegoptimis yang Anda tambahkan membantu menyelesaikannya?

— dan

kami mencoba juga dengan pengaturan yang berbeda di jpegtran dan jpegoptim, tidak ada cara untuk mencapai gambar sekecil itu seperti keadaan Google menjadi mungkin ... Juga, saya tidak berpikir itu ada hubungannya dengan ukuran gambar (dalam piksel) karena pagespeed jelas diversifikasi masalah kompresi dan ukuran piksel.

— Raphael Jeger

Terima kasih - ini sangat berguna. Dan Anda juga dapat melakukan hal serupa untuk pngfind . -iname "*.png" -exec optipng -clobber -preserve -strip all -o2 {} \;

— billynoah

2

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.

— doublejosh
sumber

2

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.

— Kelly
sumber

1

Perhatikan bahwa jika Anda menggunakan Windows, coba magickjika converttidak berhasil untuk Anda. 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