Google Pagespeed: จะปฏิบัติตามกฎการบีบอัดรูปภาพใหม่ได้อย่างไร

เรามีหลายหน้าที่มีค่า Pageseed ที่ดี - แม้แต่ที่มี 100/100 อย่างไรก็ตามตั้งแต่สองสามวัน Pagespeed อ้างสิทธิ์ในไซต์ทั้งหมด (แตกต่างกันในทางเทคนิคและเซิร์ฟเวอร์ที่แตกต่างกัน) ที่รูปภาพของเราสามารถปรับให้เหมาะสมยิ่งขึ้น

ไม่มีใครรู้ว่าสิ่งที่ถูกเปลี่ยนแปลงโดยอัลกอริทึม? ในส่วนที่มี PS 100/100 (ก่อนหน้านี้) เราใช้ jpegoptim ดังนั้นเราจึงไม่รู้วิธีการปรับให้เหมาะสมต่อไป แอปพลิเคชันของเราอัปโหลดภาพแล้วปรับให้เหมาะสม

ความเข้าใจใด ๆ ที่จะได้รับการชื่นชม มีการเปลี่ยนแปลงสำหรับ PS ทุกที่หรือไม่?

ฉันเห็นผลลัพธ์ที่ไม่น่าดูเหมือนกันสำหรับหน้าเว็บที่ไม่มีปัญหาใด ๆ มาก่อนแน่นอนว่าใช้กรอบการตอบสนองเช่น ZURB Foundation พร้อมภาพที่ตอบสนอง

ในอดีตฉันใช้:

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

และได้ผลลัพธ์ที่ยอดเยี่ยม

วิธีแก้ปัญหามกราคม 2017: คุณภาพ 85% ควรทำเคล็ดลับ:

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

กลับไปที่ 100/100 ด้วยความเร็วของหน้า Google

นี่เป็นส่วนหนึ่งของวิธีการปรับใช้ gulp / npm ของฉันสำหรับ 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'));
}

คุณต้องเพิ่มโมดูล npm gulp-imagemin imagemin-jpegoptim

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

คุณอาจสังเกตเห็นข้อความ: " ดาวน์โหลดรูปภาพที่ได้รับการเพิ่มประสิทธิภาพ, JavaScript และ CSS สำหรับหน้านี้ " พวกเขาได้ทำงานให้คุณหากคุณมีปัญหาในการเพิ่มประสิทธิภาพที่ Google คาดหวัง บางครั้งเครื่องมือต่างๆก็ไม่สามารถเล็กลงได้ตามที่ Google ต้องการ

คำแนะนำล่าสุดจาก googleคือการใช้imagemagick converter :

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

พร้อมตัวอย่างเฉพาะ puzzle.jpg

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

ใช้อาร์กิวเมนต์เดียวกันเหล่านั้นในภาพของฉันเองฉันได้ผลลัพธ์เหมือนกับไฟล์ JPG ที่ปรับให้เหมาะสมที่ดาวน์โหลดมา