Google Pagespeed: Làm thế nào để thỏa mãn các quy tắc nén hình ảnh mới?

Chúng tôi có một số trang có giá trị Pageseed tốt - ngay cả những trang có 100/100. Tuy nhiên, sau vài ngày, Pagespeed tuyên bố trên tất cả các trang web (về mặt kỹ thuật, các máy chủ khác nhau) rằng hình ảnh của chúng tôi có thể được tối ưu hóa hơn.

Có ai biết chính xác những gì đã được thay đổi bởi thuật toán? Trên bản có PS 100/100 (trước đó), chúng tôi sử dụng jpegoptim, vì vậy chúng tôi thực sự không biết cách tối ưu hóa hơn nữa. Hình ảnh được tải lên bởi ứng dụng của chúng tôi và sau đó được tối ưu hóa.

Bất kỳ cái nhìn sâu sắc sẽ được đánh giá cao. Có một thay đổi cho PS bất cứ nơi nào?

Tôi thấy các kết quả khó coi tương tự cho các trang mà không có bất kỳ vấn đề nào trước đó, tất nhiên là sử dụng các khung phản hồi nhanh như ZURB Foundation với các hình ảnh phản hồi.

Trong quá khứ tôi đã sử dụng:

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

và đã có kết quả tuyệt vời.

Giải pháp tháng 1 năm 2017: Chất lượng 85% nên thực hiện mẹo:

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

Quay lại 100/100 về tốc độ trang google.

Đây là một phần của phương thức triển khai gulp / npm của tôi cho 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'));
}

Bạn cần thêm các mô-đun npm gulp-fantemin fantemin-jpegoptim

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

Bạn cũng có thể nhận thấy thông báo: " Tải xuống tài nguyên hình ảnh, JavaScript và CSS được tối ưu hóa cho trang này. " Họ đã hoàn thành công việc cho bạn nếu bạn gặp khó khăn trong việc tối ưu hóa mà Google đang mong đợi. Đôi khi các công cụ khác nhau không thể giảm xuống như Google muốn.

Đề xuất mới nhất từ ​​google là sử dụng chuyển đổi hình ảnh :

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

với ví dụ cụ thể puzzle.jpg

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

sử dụng các đối số tương tự trên các hình ảnh của riêng tôi, tôi nhận được kết quả tương tự như tệp JPG được tối ưu hóa đã tải xuống.