WebP: รูปแบบการบีบอัดเว็บเพจ

 (purplesyringa.moe)
1 คะแนน โดย GN⁺ 2024-09-08 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

WebP: รูปแบบการบีบอัดเว็บเพจ

อุปสรรค

  • ทำ HTML ให้มีขนาดเล็กที่สุดเพื่อเพิ่มการเข้าถึงของเว็บไซต์และลดเวลาโหลดหน้า
  • GitHub Pages ไม่รองรับการบีบอัดแบบ Brotli
  • มีการใช้ gzip เป็นค่าเริ่มต้น แต่ Brotli ให้อัตราการบีบอัดที่ดีกว่า

ไอเดียง่าย ๆ

  • เนื่องจาก GitHub Pages ไม่รองรับ Brotli จึงพิจารณาวิธีคลายการบีบอัดด้วย JavaScript ฝั่งไคลเอนต์
  • สามารถคลายการบีบอัด Brotli ได้ด้วย brotli-dec-wasm และ tiny-brotli-dec-wasm

ความพยายามครั้งที่สอง

  • Compression Streams API รองรับรูปแบบ gzip และ DEFLATE แต่ไม่รองรับ Brotli
  • สามารถใช้ไลบรารี Zopfli เพื่อบีบอัด gzip ให้มีประสิทธิภาพยิ่งขึ้นได้ แต่ก็ยังด้อยกว่า Brotli อยู่ดี

ทำผิดกฎ

  • พิจารณาวิธีบีบอัดข้อมูลด้วยการบีบอัดภาพ
  • PNG และ GIF ใช้อัลกอริทึม DEFLATE แต่ WebP ให้ประสิทธิภาพที่ดีกว่า

ข้อดีของ WebP

  • WebP ใช้ predictive transform คล้ายกับ PNG แต่ใช้วิธีที่ Google พัฒนาขึ้นแทน DEFLATE
  • ให้การบีบอัดที่มีประสิทธิภาพมากขึ้นด้วยการใช้ต้นไม้ฮัฟฟ์แมนที่หลากหลาย
  • ใช้ color cache เพื่อจัดเก็บสีที่ซ้ำกันได้อย่างมีประสิทธิภาพ

การทดลอง

  • ลองใช้ crate webp เพื่อบีบอัดไฟล์ HTML
  • ผลลัพธ์เบื้องต้นแสดงให้เห็นว่าขนาดเล็กกว่า gzip 2 เท่า

การปรับให้เหมาะสมเพิ่มเติม

  • ปรับขนาดของภาพเพื่อให้ได้ประสิทธิภาพการบีบอัดที่ดีขึ้น
  • ทดลองวิธีบีบอัดหลายแบบเพื่อหาผลลัพธ์ที่ดีที่สุด

เบนช์มาร์ก

  • เปรียบเทียบ gzip, bzip2, Brotli และ WebP กับไฟล์หลายรูปแบบ
  • WebP แสดงประสิทธิภาพที่ดีกว่า gzip ในกรณีส่วนใหญ่
  • แม้จะด้อยกว่า Brotli แต่ก็ยังให้การปรับปรุงที่มีนัยสำคัญ

ถอดรหัสด้วย JavaScript

  • อธิบายวิธีถอดรหัส WebP ด้วย Canvas API
  • ใช้ WebGL เพื่อหลบเลี่ยงเทคนิคป้องกันการทำ browser fingerprinting

การปรับขั้นสุดท้าย

  • คงสไตล์และส่วนบนไว้ใน gzip เพื่อลดอาการหน้ากระพริบระหว่างโหลดหน้า
  • เสนอวิธีแก้ชั่วคราวสำหรับการคงตำแหน่งการเลื่อน

การฝัง

  • ฝัง WebP ลงใน JavaScript โดยตรงเพื่อลด latency
  • ใช้ base64 data URL เพื่อลดขนาดให้เล็กที่สุด

ตัวอย่าง

  • ยกตัวอย่างการบีบอัดด้วย WebP จากเว็บเพจจริง
  • ยืนยันได้ว่าขนาดหน้าเล็กลงหลังการบีบอัด

สรุปโดย GN⁺

  • บทความนี้สำรวจวิธีต่าง ๆ เพื่อปรับปรุงประสิทธิภาพการบีบอัดของเว็บเพจ
  • รูปแบบ WebP ให้ประสิทธิภาพดีกว่า gzip แต่ด้อยกว่า Brotli
  • อธิบายวิธีถอดรหัส WebP ฝั่งไคลเอนต์ด้วย JavaScript และ WebGL
  • เสนอเทคนิคการปรับแต่งหลายแบบเพื่อลดเวลาโหลดหน้า
  • โปรเจ็กต์อื่นที่ให้ความสามารถคล้ายกัน ได้แก่ Brotli และ Zopfli

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-09-08
ความคิดเห็นบน Hacker News

  • แม้ขนาดของโพสต์ยาวจะลดจาก 92 KiB เหลือ 37 KiB แต่อัตราการเพิ่มขึ้นของเวลาโหลดจริงมีเพียง 0.001%

    • เวลาที่ใช้ในการคลายการบีบอัดอาจทำให้ประสบการณ์ผู้ใช้แย่ลงได้

  • ไม่เข้าใจว่าทำไม readPixels จึงไม่ถูกใช้กับฟีเจอร์ป้องกันการทำ browser fingerprinting

    • มีเทคนิคที่คงสไตล์ส่วนบนของหน้าไว้ และบีบอัดเฉพาะเนื้อหาที่อยู่ใต้ viewport เป็น WebP
    • หากปิดใช้งาน WebGL ใน LibreWolf หน้าจะไม่ถูกตัด

  • มีการนำ zstd มาใช้ใน Chrome แล้ว และควรนำไปใช้กับ Safari ด้วย

  • การลบ Google Fonts อาจช่วยให้เวลาโหลดหน้าเว็บดีขึ้น

    • เนื่องจากโหลดจากเซิร์ฟเวอร์ระยะไกล จึงต้องมีการทำ handshake เพิ่มเติม

  • เมื่อตรวจดูซอร์สโค้ดพบว่าไม่มีช่องว่างในคำประกาศ doctype

    • ตอนนี้เป็น <!doctypehtml> แต่ควรแก้เป็น <!doctype html>

  • สามารถแพ็กหน้า HTML เป็นไฟล์ ZIP แบบ self-extracting ได้

    • สามารถสร้างไฟล์ที่เข้ากันได้กับ HTML, ZIP และ PNG พร้อมกันได้ รวมถึงมีรูปภาพ PNG อยู่ภายใน
    • ตัวอย่างเช่น สามารถแสดงรูปภาพ PNG จากหน้า HTML ได้

  • หน้าเว็บแสดงผลเพี้ยนในเบราว์เซอร์ของ Sailfish OS

    • มีพื้นที่ว่างยาวหลังย่อหน้า
    • overhead ของการบีบอัด HTML ด้วย gzip และ brotli นั้นน้อยมากเมื่อเทียบกับปริมาณ JS/รูปภาพ/วิดีโอที่เว็บไซต์ปัจจุบันใช้อยู่

  • แม้ Brotli จะมี dictionary ขนาดใหญ่ แต่ก็ให้ประสิทธิภาพใกล้เคียงกับ gzip

    • จึงสงสัยว่าอัลกอริทึมการบีบอัดแย่กว่า หรือความสำคัญของ dictionary อาจน้อยกว่าที่คิด

  • เหตุผลที่ไม่ได้ใช้ Brotli ใน CompressionStream API คือมันทำให้ขนาดเบราว์เซอร์เพิ่มขึ้นมาก

    • สาเหตุที่ dictionary สำหรับการบีบอัดมีขนาดใหญ่กว่า อาจเป็นเพราะมันรวมรูปแบบที่มีประสิทธิภาพที่สุดซึ่งคำนวณไว้ล่วงหน้าแล้ว