[WP] Gzip vs Brotli: ความแตกต่างของ 2 อัลกอริทึมการบีบอัด

เพื่อให้เว็บไซต์ รวมถึงเว็บที่ใช้ WordPress CMS เร็วขึ้น การตั้งค่าให้เซิร์ฟเวอร์บีบอัดข้อมูลถือว่ามีประโยชน์ วิธีนี้ทำให้ข้อมูลที่ส่งระหว่างเว็บเซิร์ฟเวอร์กับเบราว์เซอร์โหลดได้เร็วขึ้น และทำให้เว็บไซต์เร็วขึ้นด้วย ซึ่งเป็นหนึ่งในปัจจัยที่ผู้ดูแลเว็บไซต์คำนึงถึงมาก การบีบอัด gzip ถูกใช้กันอย่างแพร่หลาย และเว็บเซิร์ฟเวอร์จำนวนมากก็ค่อยๆ เปลี่ยนจาก gzip ไปใช้การบีบอัด Brotli กันมากขึ้น

1️⃣ การบีบอัดคืออะไร?

เว็บไซต์ URL: เมื่อเปิดเข้าไป เบราว์เซอร์กับเซิร์ฟเวอร์จะเริ่มสื่อสารกัน ในขั้นนี้เบราว์เซอร์จะบอกเซิร์ฟเวอร์ว่าคลายการบีบอัด (Compression) เนื้อหาได้หรือไม่ และใช้อัลกอริทึมการบีบอัดแบบไหน ข้อมูลนี้ช่วยให้เบราว์เซอร์คลายข้อมูลได้อย่างถูกต้องเมื่อเซิร์ฟเวอร์ส่งข้อมูลที่บีบอัดมา ดังนั้นถ้าใช้เซิร์ฟเวอร์และเบราว์เซอร์ที่รองรับอัลกอริทึมการบีบอัด เว็บไซต์ก็จะโหลดได้เร็วยิ่งขึ้น

เมื่อเว็บเบราว์เซอร์เชื่อมต่อกับเซิร์ฟเวอร์ จะส่งเฮดเดอร์อย่างการบีบอัด gzip หรือ Brotli ไปด้วย ข้อมูลที่บีบอัดด้วยแบบใดแบบหนึ่งในสองแบบนี้จะถูกส่งมาแสดงที่เบราว์เซอร์ และข้อมูลที่บีบอัดแล้วจะโหลดได้เร็วกว่าข้อมูลที่ไม่ได้บีบอัด

Content-encoding: gzip
Content-encoding: br

ไฟล์ที่ถูกบีบอัดส่วนใหญ่เป็นไฟล์ข้อความ
· HTML
· CSS
· JavaScript

2️⃣ การบีบอัด Gzip คืออะไร?

อัลกอริทึมการบีบอัดทั่วไปที่ผู้ให้บริการเว็บโฮสติ้งใช้กันมากคือ Gzip และ Brotli เวอร์ชันเบต้าของ Gzip สร้างขึ้นในปี 1992 และเวอร์ชัน 1.0 เปิดตัวในปี 1993 โดยทั่วไป Gzip คือหนึ่งในวิธีบีบอัดมาตรฐานสำหรับบีบอัดข้อมูลเมื่อส่งผ่านอินเทอร์เน็ต วิธีนี้อิงกับ DEFLATE ซึ่งเป็นอัลกอริทึมการบีบอัดยุคแรก และได้ชื่อมาจาก gzip โปรแกรมบีบอัดไฟล์ของ Unix ที่พัฒนาขึ้นก่อนหน้านั้น

DEFLATE คือวิธีบีบอัดที่รวมอัลกอริทึม LZ77 (Lempel-Ziv 1977) เข้ากับการเข้ารหัสแบบ Huffman โดย LZ77 จะค้นหาข้อมูลที่ซ้ำกันเพื่อหาสตริงที่ตรงกัน แล้วแทนที่สตริงนั้นด้วยโค้ดเพื่อบีบอัด ส่วนการเข้ารหัสแบบ Huffman จะใช้ความถี่ที่อักขระแต่ละตัวปรากฏ มากำหนดรหัสบิตที่สั้นที่สุดเพื่อบีบอัด

Gzip บีบอัดข้อมูลด้วยวิธี DEFLATE และใช้เฮดเดอร์ ‘Accept-Encoding: gzip’ ในคำขอและการตอบกลับ HTTP เพื่อให้บีบอัดเฉพาะเมื่อไคลเอนต์รองรับการบีบอัด Gzip การบีบอัดข้อมูลแบบนี้ช่วยเพิ่มความเร็วในการโหลดของเว็บไซต์ได้

3️⃣ การบีบอัด Brotli คืออะไร?

การบีบอัด Brotli พัฒนาขึ้นในปี 2013 โดย Jyrki Alakuijala และ Zoltán Szabadka พนักงานของ Google

เดิมที Gzip มีไว้สำหรับบีบอัดไฟล์ แต่ภายหลัง ถูกปรับให้ใช้บนเว็บได้ด้วย ส่วนการบีบอัด Brotli ถูกพัฒนาขึ้นเพื่อใช้บนเว็บโดยเฉพาะ ดังนั้นเมื่อใช้ Brotli เว็บเซิร์ฟเวอร์จะบีบอัดเนื้อหาได้ก่อนส่งไปยังเบราว์เซอร์ และเพราะบีบอัดก่อนสตรีมไปยังเบราว์เซอร์ จึงเป็นวิธีที่ดีกว่าและก้าวหน้ากว่า

การบีบอัด Brotli ใช้เทคนิคพื้นฐานหลัก 2 อย่างเดียวกับการบีบอัด GZIP คือ LZ77 และการเข้ารหัสแบบ Huffman

4️⃣ การบีบอัด Gzip vs Brotli

Gzip ใช้วิธี DEFLATE ส่วน Brotli ใช้รูปแบบเฉพาะของตัวเองที่เพิ่มการสร้างแบบจำลองบริบท (context modeling) เข้าไปใน LZ77 และการเข้ารหัสแบบ Huffman เพื่อบีบอัด (& คลายการบีบอัด) ข้อมูล

• Gzip บีบอัดได้เร็วกว่า Brotli
• Brotli ถูกออกแบบมาสำหรับเว็บโดยเฉพาะ
• Brotli ให้อัตราการบีบอัดที่ดีกว่าในทุกระดับการบีบอัด (กล่าวคือได้ไฟล์บีบอัดที่เล็กกว่า)
• เมื่อเทียบกับ Gzip แล้ว Brotli บีบอัดไฟล์ 3 ประเภทได้ดีกว่า คือ HTML 21%, CSS 17% และ JavaScript 14%

เว็บเซิร์ฟเวอร์ที่เลือกใช้ Brotli แทน Gzip มีแนวโน้มเพิ่มขึ้นเรื่อยๆ และเนื่องจาก Brotli ถูกออกแบบให้บีบอัดสตรีมได้ทันที จึงเป็นที่รู้กันว่าความเร็วในการคลายการบีบอัดฝั่ง Front-end โดยรวมเร็วกว่า Gzip ได้สูงสุด 64%

RFC 1952 ที่ออกเมื่อพฤษภาคม 1996 อธิบายว่ารูปแบบ Gzip ใช้วิธีบีบอัด DEFLATE และมีค่า CRC สำหรับตรวจความเสียหายของข้อมูล ท้ายข้อมูลที่บีบอัดจะบันทึกค่า CRC-32 และขนาดของข้อมูลต้นฉบับไว้

RFC 7932 ที่ออกเมื่อกรกฎาคม 2016 ระบุว่า Brotli บีบอัดโดยรวมอัลกอริทึม LZ77 เข้ากับการเข้ารหัสแบบ Huffman นอกจากนี้ยังใช้ 2 ไบต์ก่อนหน้าของข้อมูลก่อนบีบอัดเป็นบริบทในการเลือกรหัส Huffman และแทนที่จะใช้สตริงที่ซ้ำ ก็อ้างอิงคำในพจนานุกรมแบบคงที่ขนาด 122,784 ไบต์ได้ด้วย

ทั้งสองรูปแบบจะแสดงในเฮดเดอร์การตอบกลับเป็น [Content-Encoding: gzip] และ [Content-Encoding: br] ค่า [br] ถูกลงทะเบียนเป็น HTTP content coding ใน RFC 7932

5️⃣ ผลวัดจริงของการบีบอัด Gzip และ Brotli: เซิร์ฟเวอร์ Nginx + Apache

บนเซิร์ฟเวอร์ WordPress ที่ใช้ Nginx กับ Apache ร่วมกัน ได้เปรียบเทียบการตอบกลับของบทความ 1 เรื่อง ไฟล์ CSS ของบล็อกพื้นฐานของ WordPress และไฟล์ jQuery โดยเปลี่ยนแค่เฮดเดอร์คำขอ คำขอที่ใส่แค่ gzip ใน [Accept-Encoding] คำขอที่ใส่แค่ br และคำขอที่ไม่มีเฮดเดอร์ ถูกส่งด้วย curl จากเซิร์ฟเวอร์เดียวกัน

for ae in gzip br ''; do echo == ${ae:-none}; curl -s -o /dev/null -D - -w 'size: %{size_download}\n' -H Accept-Encoding:$ae https://example.com/hello-world/ | grep -i -E '^(content-encoding|size)'; done

== gzip
content-encoding: gzip
size: 21390
== br
content-encoding: br
size: 20190
== none
size: 90833

HTML ของบทความ 1 เรื่องถูกบีบอัดเหลือ 21,390 ไบต์สำหรับคำขอ gzip และ 20,190 ไบต์สำหรับคำขอ br ส่วนคำขอที่ไม่มีเฮดเดอร์ได้รับการตอบกลับแบบไม่บีบอัด 90,833 ไบต์ การตอบกลับแบบ br เล็กกว่า gzip 1,200 ไบต์ (5.6%)

for f in wp-includes/css/dist/block-library/style.min.css wp-includes/js/jquery/jquery.min.js; do for ae in gzip br ''; do echo == ${f##*/} ${ae:-none}; curl -s -o /dev/null -D - -w 'size: %{size_download}\n' -H Accept-Encoding:$ae https://example.com/$f | grep -i -E '^(content-encoding|size)'; done; done

== style.min.css gzip
content-encoding: gzip
size: 19655
== style.min.css br
size: 140829
== style.min.css none
size: 140829
== jquery.min.js gzip
content-encoding: gzip
size: 30633
== jquery.min.js br
size: 87553
== jquery.min.js none
size: 87553

สำหรับคำขอ gzip ไฟล์ CSS ถูกบีบอัดเหลือ 19,655 ไบต์ และไฟล์ jQuery เหลือ 30,633 ไบต์ ถ้าขอแค่ br หรือไม่มีเฮดเดอร์ เซิร์ฟเวอร์จะส่งต้นฉบับขนาด 140,829 ไบต์และ 87,553 ไบต์กลับมาตามเดิม โดยไม่มีเฮดเดอร์ [Content-Encoding]

nginx -V 2>&1 | grep -c brotli

0

httpd -M 2>/dev/null | grep -E 'brotli|deflate'

 deflate_module (shared)
 brotli_module (shared)

ไฟล์สแตติกอย่าง CSS และ JS นั้น Nginx จะตอบและบีบอัดเองโดยตรง และเนื่องจาก Nginx ในโครงสร้างนี้ไม่มีโมดูล Brotli จึงบีบอัดได้แค่ด้วย gzip

ส่วน HTML นั้น WordPress จะตอบคำขอที่ Nginx ส่งต่อไปยัง Apache แล้ว Apache เป็นผู้บีบอัด โดย Apache มีทั้งโมดูล Brotli และโมดูล [mod_deflate] ที่ทำหน้าที่บีบอัด Gzip

for f in hello-world/ wp-includes/css/dist/block-library/style.min.css wp-includes/js/jquery/jquery.min.js; do echo == $f; curl -s -o /dev/null -D - -w 'size: %{size_download}\n' -H 'Accept-Encoding: gzip, deflate, br, zstd' https://example.com/$f | grep -i -E '^(content-encoding|size)'; done

== hello-world/
content-encoding: gzip
size: 21390
== wp-includes/css/dist/block-library/style.min.css
content-encoding: gzip
size: 19655
== wp-includes/js/jquery/jquery.min.js
content-encoding: gzip
size: 30633

การที่เซิร์ฟเวอร์มีโมดูล Brotli ไม่ได้แปลว่าเบราว์เซอร์จะได้รับการตอบกลับที่บีบอัดด้วย Brotli เมื่อลองส่งคำขอด้วย [gzip, deflate, br, zstd] ซึ่งเป็นค่าเดียวกับที่ Edge 155 ส่ง ทาง Apache ก็บีบอัด HTML ด้วย gzip เช่นกัน ไฟล์ทั้ง 3 จึงถูกส่งกลับเป็น gzip

แม้จะวาง br ไว้ก่อน gzip หรือระบุให้ br มาก่อนแบบ [br;q=1.0, gzip;q=0.5] HTML ก็ยังถูกส่งกลับเป็น gzip และเมื่อเปิดบทความเดียวกันกับไฟล์ทั้งสองด้วย Edge ทุกอย่างก็ถูกส่งมาเป็น gzip เช่นกัน

เวลาไบต์แรกคือค่ามัธยฐานของค่า [time_starttransfer] จาก curl ที่วัดอย่างละ 40 ครั้งโดยสลับลำดับคำขอ และเชื่อมต่อใหม่ทุกคำขอ จึงรวมเวลาเชื่อมต่อ TLS ไว้ด้วย สำหรับ HTML การตอบกลับแบบไม่บีบอัดใช้ 22.7ms, gzip 26.3ms, br 26.5ms และคำขอแบบเดียวกับเบราว์เซอร์ 25.0ms ส่วน CSS และ JS อยู่ที่ 18~21ms ไม่ว่าจะบีบอัดหรือไม่

ความเร็วในการบีบอัดของ Gzip และ Brotli ไม่ได้วัดเอง แต่เปรียบเทียบจากข้อมูลสาธารณะ RFC 7932 ระบุว่า Brotli บีบอัดได้ในอัตราที่สูงกว่าโปรแกรม gzip อย่างมาก และคลายการบีบอัดได้เร็วกว่า LZMA ที่ใช้อยู่ในปัจจุบันมาก ส่วน Google อธิบายไว้ใน Repository ของ Brotli ว่า Brotli มีความเร็วใกล้เคียงกับ deflate แต่บีบอัดได้แน่นกว่า

ในปี 2015 Cloudflare ทดสอบทั้งสองวิธีกับไฟล์ HTML, CSS และ JavaScript จำนวน 10,655 ไฟล์ ผลลัพธ์จาก Brotli คุณภาพสูงสุดเล็กกว่า zlib คุณภาพสูงสุดโดยเฉลี่ย 1.19 เท่า แต่ความเร็วในการบีบอัดอยู่ที่ 0.5MB ต่อวินาที ช้ากว่า 41.9MB ของ zlib ระดับ 9 อย่างมาก ส่วน Brotli ระดับ 4 มีอัตราการบีบอัดใกล้เคียงกับ zlib ระดับ 8 และเร็วกว่าเล็กน้อยเมื่อดูค่าเฉลี่ยรวม แต่ถ้าดูเฉพาะไฟล์ที่เล็กกว่า 64KB จะช้ากว่า 1.48 เท่า

บทความนี้ได้อธิบายการปรับแต่งเว็บไซต์ด้วยการบีบอัดไฟล์อย่าง HTML, CSS และ JavaScript ไปแล้ว ในการปรับปรุงความเร็วของเว็บไซต์ การบีบอัดไฟล์และ การปรับแต่งรูปภาพถือเป็นหนึ่งในองค์ประกอบที่จำเป็น

🔢 FAQ & เนื้อหาแนะนำ

ℹ️ ประกาศเรื่องลิงก์แอฟฟิลิเอต
เนื้อหาของเว็บไซต์นี้มีลิงก์แอฟฟิลิเอต หากผู้เข้าชมซื้อสินค้าหรือบริการผ่านลิงก์เหล่านี้ เว็บไซต์นี้จะได้รับค่าคอมมิชชันจากผู้ขาย ในกระบวนการนี้ ราคาที่ผู้ซื้อจ่าย^{(ราคาจะลดลงเมื่อมีโปรโมชัน↓)}จะไม่สูงขึ้นแต่อย่างใด ราคา ส่วนลด และข้อมูลสต็อกที่แสดงเป็นข้อมูล ณ เวลาที่เขียนและอาจต่างจากความเป็นจริง โปรดตรวจสอบกับผู้ขายอีกครั้งก่อนซื้อ การเลือกและการประเมินสินค้าเขียนตามเกณฑ์ของเราเอง และการได้รับค่าคอมมิชชันหรือไม่ไม่มีผลต่อลำดับการแนะนำหรือเนื้อหาการประเมิน