บีบอัด HTML _

วิธีการทำงานของการบีบอัด HTML

ตัวบีบอัดเดินผ่านอินพุตด้วยเครื่องสถานะขนาดเล็กที่แยกแยะพื้นที่ที่ต้องเก็บไว้ตามเดิม (<pre>, <textarea>, <script>, <style>) จากพื้นที่ที่สามารถยุบช่องว่างและลบคอมเมนต์ได้

1. แตกโทเค็นบล็อกที่ต้องเก็บ. ตัวสแกนอ่านอินพุตทีละอักขระและเปลี่ยนเป็นสถานะเก็บเมื่อพบแท็กเปิด <pre>, <textarea>, <script> หรือ <style> ทุกอย่างภายในแท็กเหล่านั้นถูกเก็บทีละไบต์จนกว่าจะถึงแท็กปิดที่ตรงกัน
2. ยุบช่องว่างที่แก้ไขได้. ในพื้นที่ที่แก้ไขได้ ตัวสแกนยุบทุกชุดของช่องว่าง แท็บ และบรรทัดใหม่ให้เหลือช่องว่างเดียว จากนั้นตัดช่องว่างนำหน้าและท้ายรอบขอบแท็ก ข้อความที่มองเห็นจะไหลใหม่ในลักษณะเดียวกับที่เบราว์เซอร์แสดงผล
3. ลบคอมเมนต์. บล็อก <!-- ... --> ถูกลบเมื่อเปิดสวิตช์ คอมเมนต์เงื่อนไข IE (<!--[if IE]> ... <![endif]-->) ยังคงอยู่เมื่อเปิดสวิตช์เก็บคอมเมนต์เงื่อนไข เพราะโปรแกรมรับส่งเมลเก่ายังคงพึ่งพาสิ่งเหล่านี้
4. ยุบแอตทริบิวต์บูลีน. รูปแบบยาวอย่าง checked="checked", disabled="disabled" และ required="required" ลดลงเหลือเพียงชื่อแอตทริบิวต์ สเปก HTML5 ถือว่ารูปแบบสั้นมีความหมายเทียบเท่า ดังนั้น DOM ที่แสดงผลจึงไม่เปลี่ยนแปลง
5. รายงานผลต่างไบต์. ทั้งข้อความต้นฉบับและข้อความที่บีบอัดแล้วถูกวัดด้วย new TextEncoder().encode(...).byteLength — จำนวนไบต์ UTF-8 เดียวกับที่ CDN หรือเซิร์ฟเวอร์ HTTP จะเห็นบนสาย แถบเมตริกแสดงขนาดเดิม ขนาดที่บีบอัด ไบต์ที่ประหยัด และเปอร์เซ็นต์ที่ประหยัด

ทำไมต้องบีบอัด HTML

• โหลดหน้าเร็วขึ้น. HTML ที่เล็กลงถึงเบราว์เซอร์เร็วขึ้นและตัวแยกวิเคราะห์เสร็จเร็วขึ้น บนเครือข่ายมือถือ การประหยัดไบต์แปลเป็น First Contentful Paint ที่เร็วขึ้นและคะแนนประสิทธิภาพ Lighthouse ที่ดีขึ้นโดยตรง
• ค่า egress CDN ต่ำลง. CloudFront, Cloudflare และ Fastly เรียกเก็บเงินต่อกิกะไบต์ของการส่งออก การลด HTML 20 เปอร์เซ็นต์ใน views หลายล้านครั้งต่อเดือนสะสมเป็นการประหยัดจริงในใบแจ้งหนี้ ก่อนการปรับปรุงรูปภาพหรือสคริปต์ใด ๆ
• diff pull-request สะอาดกว่า. HTML สถิตที่สร้างล่วงหน้าซึ่ง commit เข้าไปในรีโพซิทอรีจะวุ่นวายเมื่อทุกการปรับแต่ง template ทำให้การเยื้องเปลี่ยนแปลง HTML ที่บีบอัดในโฟลเดอร์ dist สร้าง diff PR ที่กระชับขึ้น ซึ่งมุ่งเน้นไปที่การเปลี่ยนแปลงเนื้อหาจริง แทนที่จะเป็นสัญญาณรบกวนช่องว่าง
• ส่วนฝังและสนิปเปตที่เล็กลง. เทมเพลตอีเมล สนิปเปตวิดเจ็ตของบุคคลที่สาม และ HTML ที่เก็บไว้ในการกำหนดค่า JSON หรือ YAML ล้วนได้รับประโยชน์จากการตัดไบต์เดียวกัน ส่วนฝังที่บีบอัดแล้วช่วยให้อีเมลธุรกรรมอยู่ใต้ขีดจำกัดขนาด ESP และลดขนาดแพ็กเกจวิดเจ็ต

การใช้งานทั่วไป

การบีบอัด HTML ปรากฏท้าย pipeline build ของเว็บไซต์สถิตหรือ JAMstack แทบทุกแห่ง รวมถึงบริบท runtime บางอย่างที่ไบต์สำคัญกว่าความสามารถในการอ่านซอร์ส

• ขั้นตอน build เว็บไซต์สถิต: build production ของ Eleventy, Hugo, Astro และ Next.js รัน HTML ผ่านตัวบีบอัดก่อนเขียนไปยังโฟลเดอร์ dist เพื่อให้ bundle ที่ deploy มีขนาดเล็กกว่าซอร์ส
• อีเมลธุรกรรม: ESP (SendGrid, Postmark, Mailgun) จำกัดขนาด HTML body และการขยาย inline-CSS สะสมเร็ว การบีบอัด body ก่อนส่งทำให้ข้อความอยู่ใต้ขีดจำกัด
• วิดเจ็ตฝังตัว: วิดเจ็ตของบุคคลที่สามและสนิปเปตแชทที่ส่งเป็น HTML inline ได้รับประโยชน์จากการตัดไบต์ทุกครั้ง เพราะหน้าโฮสต์ต้องดาวน์โหลดทุกครั้งที่เข้าชม

ตัวอย่างที่ใช้งานได้จริง

วางสนิปเปตฟอร์มที่ยาว 500 ไบต์พร้อมการเยื้อง 2 ช่องว่าง บรรทัดว่างสาม บรรทัดระหว่างแถว บล็อกคอมเมนต์ HTML ด้านบน และ <input type="checkbox" checked="checked" /> เมื่อเปิดทุกตัวเลือก ผลลัพธ์จะยุบลงเหลือประมาณ 300 ไบต์ — ประหยัดประมาณ 40 เปอร์เซ็นต์ — ขณะที่ต้นไม้ DOM ที่แสดงผลยังคงเทียบเท่าไบต์กับซอร์ส

การบีบอัดจะทำให้ HTML ของฉันเสียหายหรือไม่?

ไม่ เมื่อใช้กับสวิตช์เริ่มต้น ตัวบีบอัดเก็บเนื้อหาของแท็ก <pre>, <textarea>, <script> และ <style> ตามตัวอักษร เก็บคอมเมนต์เงื่อนไข IE ไว้เมื่อเปิดสวิตช์นั้น และยุบเฉพาะช่องว่างที่ตัวแยกวิเคราะห์ HTML5 ได้จัดประเภทไว้แล้วว่าไม่มีนัยสำคัญ ต้นไม้ DOM ที่แสดงผลเทียบเท่าไบต์กับซอร์ส สวิตช์เชิงรุก (ลบแอตทริบิวต์ว่าง) อาจเปลี่ยนพฤติกรรมสำหรับสนิปเปตที่ใช้ value="" หรือ alt="" โดยตั้งใจ ดังนั้นตรวจสอบผลลัพธ์หากคุณเปิดใช้งาน

เครื่องมือนี้บีบอัด CSS และ JS แบบ inline ด้วยหรือไม่?

ไม่ในเครื่องมือนี้ เนื้อหา <style> และ <script> แบบ inline ถูกเก็บตามตัวอักษรเพื่อไม่ให้ตัวบีบอัดทำลายกฎ CSS หรือคำสั่ง JS โดยการยุบช่องว่างภายใน string literal หรือ regex สำหรับการบีบอัด CSS เฉพาะให้ใช้ CSS Minifier สำหรับ JS ให้ใช้ JS Minifier HTML Minifier มุ่งเน้นที่มาร์กอัปเอง

สามารถประหยัดได้เท่าไร?

การประหยัดทั่วไปใน HTML ที่เขียนด้วยมืออยู่ระหว่าง 10 ถึง 30 เปอร์เซ็นต์ ขึ้นอยู่กับปริมาณการเยื้อง บรรทัดว่าง และรูปแบบแอตทริบิวต์แบบยาวที่ซอร์สใช้ HTML สถิตที่สร้างล่วงหน้าจาก framework อย่าง Next.js มักประหยัดได้ 15 ถึง 25 เปอร์เซ็นต์ เพราะ framework ทำการปรับปรุงบางอย่างแล้วแต่ยังเหลือช่องว่างที่อ่านได้ เทมเพลตที่มีคอมเมนต์หนาแน่นและ HTML สไตล์อีเมลที่ซ้อนลึกอาจถึง 40 เปอร์เซ็นต์หรือมากกว่า

เนื้อหา pre ถูกเก็บรักษาไว้หรือไม่?

ใช่ ตัวบีบอัดแตกโทเค็นบล็อก <pre>, <textarea>, <script> และ <style> อย่างชัดเจนเป็นพื้นที่เก็บตามเดิม และคัดลอกเนื้อหาทีละไบต์ไปยังผลลัพธ์ ช่องว่าง บรรทัดใหม่ และการเยื้องภายในแท็กเหล่านั้นยังคงไม่ถูกแตะต้องหลังการบีบอัด ดังนั้นตัวอย่างโค้ดและ ASCII art จะแสดงผลเหมือนเดิมทุกประการ

การบีบอัด HTML ฝั่งเบราว์เซอร์ทำให้ pipeline build ของคุณเรียบง่ายและมาร์กอัปมีขนาดเล็ก วาง HTML ใด ๆ ด้านบน ปรับสวิตช์ตัวเลือก และคัดลอกหรือดาวน์โหลดผลลัพธ์ที่บีบอัดแล้ว — ไม่มีการอัปโหลด ไม่มีบัญชี ไม่มีไลบรารีผู้จำหน่าย