แปลงฟรี

HTML เครื่องย่อส่วน

ย่อขนาดและบีบอัดโค้ด HTML ทันทีในเบราว์เซอร์ของคุณ ลบความคิดเห็น ยุบช่องว่าง และลดขนาดไฟล์ ฟรีและเป็นส่วนตัว

ลากและวางไฟล์ HTML ที่นี่

รองรับไฟล์ .html และ .htm หรือวาง HTML ของคุณด้านบน

หรือ

เกี่ยวกับเครื่องมือนี้

การลดขนาด HTML จะตัดอักขระที่ไม่จำเป็นออกจากแหล่งที่มาของหน้าเว็บ — ช่องว่างระหว่างแท็ก ความคิดเห็น เครื่องหมายคำพูดที่ซ้ำซ้อน แท็กปิดเพิ่มเติม — เพื่อลดขนาดไฟล์โดยไม่ต้องเปลี่ยนวิธีการแสดงผลหน้า ประหยัดได้เพียงเล็กน้อยต่อหน้า (โดยทั่วไปคือ 10–30%) แต่รวมกับคำขอจำนวนมาก โดยเฉพาะอย่างยิ่งสำหรับไซต์แบบคงที่หรือหน้าเว็บที่แสดงโดยไม่มีการบีบอัดแบบไดนามิก

ตัวย่อนี้จะลบช่องว่างระหว่างองค์ประกอบระดับบล็อก การยุบช่องว่างภายในข้อความที่ไม่มีนัยสำคัญ ตัดความคิดเห็น HTML (ยกเว้นความคิดเห็นแบบมีเงื่อนไขของ IE) ลบเครื่องหมายคำพูดแอตทริบิวต์ที่ซ้ำซ้อนซึ่งได้รับอนุญาตตามข้อกำหนดเฉพาะของ HTML5 และลบแท็กปิดเสริม (</p>, </li>) ในกรณีที่ข้อกำหนดอนุญาต ผลลัพธ์จะแสดงผลเหมือนกับแหล่งที่มาในทุกเบราว์เซอร์

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

ทำไมต้องลดขนาด HTML

HTML ที่เล็กกว่าจะโหลดได้เร็วกว่า โดยเฉพาะในการเชื่อมต่อที่ช้ากว่าและเครือข่ายมือถือ น้ำหนักหน้าส่งผลโดยตรงต่อ Core Web Vitals — Largest Contentful Paint และ Time to First Byte จะดีขึ้นเมื่อเซิร์ฟเวอร์ส่งคืน HTML น้อยลงเพื่อแยกวิเคราะห์ สำหรับเว็บไซต์ที่การจัดอันดับ SEO ขึ้นอยู่กับคะแนน Core Web Vitals การลดขนาดลงถือเป็นการปรับปรุงที่วัดผลได้

HTML แบบย่อยังช่วยลดต้นทุนแบนด์วิดท์ในวงกว้าง ไซต์ที่ให้บริการหนึ่งล้านเพจต่อวันโดยประหยัดได้ 10 KB ต่อหน้าจะประหยัดข้อมูลขาออกได้ 10 GB ต่อวัน ผลกระทบที่เกิดขึ้นสำหรับไซต์คงที่ซึ่งให้บริการจาก CDN ที่เรียกเก็บเงินโดยการถ่ายโอนข้อมูล

วิธีใช้งาน

วาง HTML รับเวอร์ชันย่อเล็กสุด

  1. เพิ่มอินพุต HTML: วางซอร์ส HTML ลงในพื้นที่ป้อนข้อมูลหรือวางไฟล์ .html ตัวย่อยอมรับมาร์กอัป HTML5 ที่ถูกต้อง
  2. เลือกตัวเลือก: ค่าเริ่มต้นจะลบความคิดเห็นและยุบช่องว่าง คุณสามารถปิดใช้การแปลงแต่ละรายการได้หากต้องการรักษาองค์ประกอบเฉพาะไว้ (เช่น เก็บความคิดเห็นไว้เป็นเอกสารประกอบ)
  3. ลดขนาด: ตัวย่อจะเดินสตรีมโทเค็น HTML โดยใช้การแปลงที่เปิดใช้งานแต่ละรายการ เอาต์พุตมีฟังก์ชัน HTML เหมือนกันโดยมีขนาดลดลง
  4. คัดลอกหรือดาวน์โหลด: ใช้ผลลัพธ์เป็น HTML ที่ให้บริการ ยืนยันว่าเพจแสดงผลอย่างถูกต้องในเบราว์เซอร์เป้าหมายก่อนใช้งาน

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

รายละเอียดทางเทคนิค

ตัวย่อจะประมวลผลโทเค็น HTML ตามโทเค็น ช่องว่างระหว่างองค์ประกอบระดับบล็อก (<div>, <p>, <ul>) จะถูกลบออกเนื่องจากไม่ส่งผลกระทบต่อการเรนเดอร์ ช่องว่างภายในบริบทอินไลน์ (<span>, <a>, เนื้อหาข้อความ) จะยังคงอยู่เนื่องจากอาจส่งผลต่อการเรนเดอร์ได้

ความคิดเห็นจะถูกตัดออกตามค่าเริ่มต้น แต่ความคิดเห็นแบบมีเงื่อนไข (<!--[ถ้า IE]>) จะยังคงอยู่ เครื่องหมายคำพูดแอตทริบิวต์จะถูกลบออกโดยที่ตัวแยกวิเคราะห์ HTML5 อนุญาต - ค่าแอตทริบิวต์คำเดียวที่ไม่มีช่องว่างหรืออักขระพิเศษสามารถละเว้นเครื่องหมายคำพูดได้

แท็กปิดที่เป็นตัวเลือกจะถูกตัดออกตามข้อกำหนด HTML5: </p>, </li>, </td> และแท็กอื่นๆ บางส่วนสามารถละเว้นได้เมื่อตามด้วยแท็กข้างเคียงที่หมายถึงปิด นี่เป็นเรื่องปกติที่จะอ่านแต่ HTML5 ที่ถูกต้องซึ่งเบราว์เซอร์แยกวิเคราะห์เหมือนกัน

แนวทางปฏิบัติที่ดีที่สุด

คำถามที่พบบ่อย

การลดขนาด HTML จะลบอะไรออกไป?
ช่องว่างที่ไม่จำเป็นระหว่างแท็ก ความคิดเห็น HTML (<!-- -->) แท็กปิดที่เป็นตัวเลือก (</li>, </p>, </td>) ค่าแอตทริบิวต์เริ่มต้น (type="text" ในอินพุต) และค่าแอตทริบิวต์บูลีน (disabled="disabled" → ปิดการใช้งาน)
การลดขนาดสามารถทำลายหน้าของฉันได้หรือไม่?
เกิดขึ้นไม่บ่อยนัก แต่เป็นไปได้หาก CSS ของคุณอาศัยช่องว่างระหว่างองค์ประกอบอินไลน์ หรือหาก JavaScript ใช้การเปรียบเทียบ innerHTML ทดสอบเอาต์พุตที่ย่อขนาดเสมอ เครื่องมือนี้ใช้การตั้งค่าแบบอนุรักษ์นิยมตามค่าเริ่มต้น
ฉันควรย่อขนาด HTML หากใช้เฟรมเวิร์กเช่น Next.js หรือไม่
เฟรมเวิร์กที่ทันสมัยที่สุด (Next.js, Nuxt, Angular) จะย่อขนาด HTML โดยอัตโนมัติในบิลด์ที่ใช้งานจริง เครื่องมือนี้มีประโยชน์สำหรับไฟล์ HTML แบบคงที่ เทมเพลตอีเมล และโปรเจ็กต์ที่ไม่มีระบบบิลด์
สิ่งนี้จะย่อขนาด CSS และ JavaScript แบบอินไลน์ด้วยหรือไม่
เครื่องมือนี้เน้นที่โครงสร้าง HTML เนื้อหา <style> และ <script> แบบอินไลน์จะถูกเก็บรักษาไว้ตามที่เป็นอยู่ สำหรับสิ่งเหล่านั้น ให้ใช้ตัวย่อ CSS และ JavaScript เฉพาะเพื่อให้ได้ผลลัพธ์ที่ดีที่สุด
แท็กปิดเสริมปลอดภัยที่จะลบหรือไม่
ใช่ตามข้อกำหนด HTML5 แม้ว่าผลลัพธ์จะอ่านยากกว่าก็ตาม บางทีมปิดการใช้งานการเปลี่ยนแปลงนี้เพื่อความชัดเจน โดยยอมรับการลงโทษขนาดเล็กน้อย
HTML ของฉันถูกอัปโหลดไปยังเซิร์ฟเวอร์หรือไม่
ไม่ ตัวย่อทำงานในเบราว์เซอร์ของคุณ
สิ่งนี้เปรียบเทียบกับ html-minifier-terser ได้อย่างไร
html-minifier-terser เป็นตัวย่อ HTML ของ Canonical Node.js และให้ผลลัพธ์เชิงรุกมากกว่าเล็กน้อย เครื่องมือนี้ครอบคลุมการเปลี่ยนแปลงเดียวกันสำหรับการใช้งานฝั่งเบราว์เซอร์โดยไม่ต้องตั้งค่าบิลด์
ฉันควรย่อขนาดเสมอหรือแบบเลือก?
เพื่อการผลิตอยู่เสมอ ไม่ใช้ซอร์สโค้ดในการควบคุมเวอร์ชัน HTML ที่อ่านได้ในซอร์สเป็นสิ่งจำเป็นสำหรับการบำรุงรักษา