Google Pagespeed: Yeni resim sıkıştırma kurallarına nasıl uyulur?

100 sayfadan 100'e kadar olan sayfalarda bile iyi Pageseed değerlerine sahip birkaç sayfamız var. Ancak birkaç günden bu yana Pagespeed, tüm sitelerdeki (teknik olarak farklı, farklı sunucular) görüntülerimizin daha iyi hale getirilebileceğini iddia ediyor.

Algoritma tarafından neyin tam olarak değiştirildiğini bilen var mı? PS 100/100 (daha önce) olan birinde jpegoptim kullanıyoruz, bu yüzden daha fazla nasıl optimize edeceğimizi bilmiyoruz. Görüntüler uygulamamız tarafından yüklenir ve daha sonra optimize edilir.

Herhangi bir içgörü takdir edilecektir. PS için herhangi bir yerde bir değişiklik günlüğü var mı?

Elbette, ZURB Vakfı gibi duyarlı çerçeveler duyarlı görüntülerle kullanarak, daha önce sorunsuz olan sayfalar için aynı çirkin sonuçları görüyorum.

Eskiden kullandım:

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

ve harika sonuçlar aldım.

Ocak 2017 çözümü:% 85 kalite hile yapmalıdır:

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

Google sayfa hızında 100/100 değerine geri dönün.

İşte ZURB Foundation 6 için gulp / npm dağıtım yöntemimin bir parçası

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

Gpm-imagemin imagemin-jpegoptim npm modüllerini eklemeniz gerekir

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

Ayrıca, " Bu sayfa için optimize edilmiş resim, JavaScript ve CSS kaynaklarını indirin. " Bazen çeşitli araçlar Google'ın istediği kadar küçülemez.

Google'dan en son öneri imagemagick convert kullanmaktır :

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

belirli bir örnekle birlikte puzzle.jpg

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

kendi resimlerimde aynı argümanları kullanarak indirilen optimize JPG dosyası ile aynı sonuçları aldım.