HTML Minifier
ย่อ HTML สำหรับโปรดักชันได้ทันที
HTML ต้นฉบับ
ตัวเลือก
HTML ที่บีบอัดแล้ว
ภาพรวม
HTML Minifier จะลบความคิดเห็น ยุบช่องว่างระหว่างแท็ก ลบแท็กห่อหุ้มเชิงโครงสร้างที่เป็นทางเลือก และย่อ CSS/JS แบบอินไลน์เพื่อลดขนาดมาร์กอัปของคุณสำหรับโปรดักชัน — การดาวน์โหลดที่เล็กลง การแยกวิเคราะห์ที่เร็วขึ้น วาง HTML ที่อ่านง่ายแล้วรับผลลัพธ์ที่กะทัดรัดได้ทันที พร้อมการเปรียบเทียบขนาดก่อน/หลังแบบเรียลไทม์
สิ่งที่ตัวย่อนี้ควบคุม
- •การยุบช่องว่าง: ช่องว่างและการขึ้นบรรทัดใหม่หลายรายการจะลดลงเหลือช่องว่างเดียว และช่องว่างระหว่างแท็กจะถูกลบออกทั้งหมด
- •การลบความคิดเห็น: ลบความคิดเห็น HTML (<!-- -->) ออกจากมาร์กอัป
- •การลบแท็กห่อหุ้มเชิงโครงสร้าง: ลบแท็ก <html>, <head> และ <body> ซึ่งเบราว์เซอร์จะสื่อความหมายโดยอัตโนมัติ
- •การย่อ CSS แบบอินไลน์: ลบความคิดเห็นและยุบช่องว่างภายในบล็อก <style>
- •การย่อ JS แบบอินไลน์: ลบความคิดเห็น // และ /* */ และยุบช่องว่างภายในบล็อก <script>
- •การเปรียบเทียบขนาด: ดูขนาดต้นฉบับ ขนาดที่ย่อแล้ว และเปอร์เซ็นต์การลดขนาดเคียงข้างกัน
เมื่อใดที่คุณควรย่อ HTML
- •ย่อหน้าเว็บแบบคงที่ก่อนนำไปใช้งานจริงเพื่อลดขนาดเพย์โหลดและปรับปรุงเวลาโหลด
- •ย่อเทมเพลตอีเมลหรือแลนดิ้งเพจที่ทุกไบต์ของ HTML มีความสำคัญ
- •ทำความสะอาดผลลัพธ์โปรดักชันจากตัวสร้างเว็บไซต์แบบคงที่หรือเฟรมเวิร์กที่เรนเดอร์ฝั่งเซิร์ฟเวอร์ก่อนให้บริการ
- •สร้าง HTML แบบกะทัดรัดสำหรับฝังแบบอินไลน์ในเทมเพลตลิเทอรัลของ JS หรือฟิลด์เนื้อหาของ CMS
- •เปรียบเทียบจำนวนไบต์ก่อน/หลังเพื่อตรวจสอบการประหยัดเพย์โหลดของหน้าเว็บสำหรับการตรวจสอบประสิทธิภาพ
วิธีย่อ HTML
- 1.วาง HTML ของคุณลงในตัวแก้ไขข้อมูลนำเข้า หรืออัปโหลดไฟล์ .html/.htm
- 2.เลือกตัวเลือกการย่อที่จะนำไปใช้: ความคิดเห็น การยุบช่องว่าง แท็กห่อหุ้ม CSS/JS แบบอินไลน์
- 3.ผลลัพธ์ที่ย่อแล้วและเปอร์เซ็นต์การลดขนาดจะปรากฏโดยอัตโนมัติ
- 4.คัดลอกผลลัพธ์หรือดาวน์โหลดเป็นไฟล์ .html
- 5.ตรวจสอบจำนวนไบต์ก่อน/หลังเพื่อยืนยันการประหยัดขนาดก่อนนำไปใช้งานจริง
กรณีขอบเขตที่ควรรู้
- •การลบแท็ก <html>, <head> และ <body> ปลอดภัยในเบราว์เซอร์ส่วนใหญ่เนื่องจากถูกสื่อความหมายโดยอัตโนมัติ แต่ควรลบเฉพาะเมื่อคุณควบคุมไปป์ไลน์การส่งมอบทั้งหมด — ตัวแยกวิเคราะห์ที่เข้มงวดบางตัวหรือขั้นตอนการประมวลผลฝั่งเซิร์ฟเวอร์อาจคาดหวังให้มีแท็กเหล่านี้อยู่
- •การยุบช่องว่างระหว่างองค์ประกอบแบบอินไลน์ (เช่น แท็ก <span> ที่อยู่ติดกันสองแท็ก) อาจเปลี่ยนระยะห่างที่แสดงผล เนื่องจากช่องว่างระหว่างองค์ประกอบแบบอินไลน์มีความสำคัญทางสายตา — ตรวจสอบผลลัพธ์ที่แสดงผลหากเลย์เอาต์ของคุณขึ้นอยู่กับช่องว่างนั้น
- •การย่อ CSS/JS แบบอินไลน์เป็นการย่อข้อความโดยใช้ regex ไม่ใช่ตัวแยกวิเคราะห์ที่สมบูรณ์ — จะไม่ตรวจจับข้อผิดพลาดทางไวยากรณ์ของ CSS/JS และจะไม่เปลี่ยนชื่อตัวแปรหรือย่อตัวเลือก
ข้อจำกัด
- •นี่คือการย่อช่องว่าง/ความคิดเห็น/แท็กห่อหุ้ม ไม่ใช่การบีบอัด HTML แบบเต็มรูปแบบ — ไม่มีการย่อค่าแอตทริบิวต์ การลบแอตทริบิวต์ที่ซ้ำซ้อน หรือการเพิ่มประสิทธิภาพรูปภาพ/ทรัพยากร
- •การย่อ CSS/JS แบบอินไลน์เป็นไปอย่างระมัดระวังโดยตั้งใจ — สำหรับการบีบอัดสูงสุด (การย่อตัวเลือก การกำจัดโค้ดที่ไม่ได้ใช้งาน การย่อชื่อตัวแปร) ให้ใช้เครื่องมือเฉพาะทาง เช่น cssnano หรือ Terser โดยตรงกับไฟล์ต้นฉบับ CSS/JS ของคุณ
- •ไฟล์ HTML ขนาดใหญ่มากอาจย่อได้ช้าในเบราว์เซอร์อย่างสมบูรณ์ — สำหรับไปป์ไลน์บิลด์โปรดักชัน ให้รวมการย่อ HTML เข้ากับเครื่องมือบิลด์ของคุณ (เช่น html-minifier-terser) แทนที่จะใช้เครื่องมือเบราว์เซอร์แบบครั้งเดียว
ต้องการทำสิ่งที่ตรงกันข้ามหรือไม่?
หากคุณมี HTML ที่ถูกย่อหรือมีการเยื้องที่ไม่เรียบร้อยและต้องการทำให้อ่านง่ายสำหรับการดีบักหรือการรีวิว ให้ใช้ HTML Beautifier แทน มันจะจัดรูปแบบมาร์กอัปใหม่ด้วยการเยื้องที่ถูกต้องตามการซ้อนของแท็ก และตรวจสอบโครงสร้างแท็กขณะที่คุณพิมพ์