HTML Minifier (ย่อโค้ด HTML)
วาง HTML เพื่อลบคอมเมนต์และช่องว่างที่ไม่จำเป็น และย่อ CSS กับ JavaScript แบบอินไลน์ เนื้อหาภายใน <pre> และ <textarea> จะคงไว้ตามที่เขียนทุกประการ
ทำงานในเบราว์เซอร์ไม่ต้องสมัครไม่มีการอัปโหลด
วิธีใช้ HTML Minifier
- วางเอกสารหรือส่วนของ HTML หรือเปิดไฟล์
.html - เลือกสิ่งที่จะลบ: คอมเมนต์ ช่องว่าง และเลือกว่าจะย่อบล็อก
<style>และ<script>แบบอินไลน์ด้วยหรือไม่ - ตรวจดูบรรทัดคำเตือน: สคริปต์อินไลน์ที่มีข้อผิดพลาดทางไวยากรณ์จะถูกคงไว้ตามเดิม แทนที่จะทำให้หน้าเว็บพัง
- คัดลอก HTML ที่ย่อแล้วหรือดาวน์โหลด
อะไรถูกลบออกบ้าง?
- คอมเมนต์:
<!-- … -->จะถูกลบ ยกเว้น conditional comment ของ Internet Explorer และคอมเมนต์ที่ขึ้นต้นด้วย<!--! - ช่องว่างระหว่าง block element: การขึ้นบรรทัดและการเยื้องระหว่างแท็กอย่าง
<div>,<li>หรือ<head>ไม่เคยถูกเรนเดอร์ จึงถูกลบออกทั้งหมด - ช่องว่างต่อเนื่องในข้อความ: ถูกยุบเหลือช่องว่างเดียว ซึ่งตรงกับวิธีที่เบราว์เซอร์เรนเดอร์อยู่แล้ว
- ช่องว่างภายในแท็ก:
<p class = "a">กลายเป็น<p class="a">
อะไรถูกคงไว้?
ช่องว่างมีความหมายในบางตำแหน่ง และตัวย่อเคารพตำแหน่งเหล่านั้น เนื้อหาของ <pre> และ <textarea> ถูกคงไว้ทุกไบต์ ช่องว่างเดียวระหว่าง inline element เช่น <b>bold</b> text ถูกคงไว้ เพราะหากลบจะทำให้คำติดกัน ค่า attribute และอัญประกาศจะไม่ถูกเปลี่ยนเลย
CSS และ JavaScript แบบอินไลน์
บล็อก <style> แบบอินไลน์ถูกปรับด้วย CSSO และบล็อก <script> แบบอินไลน์ด้วย Terser ซึ่งเป็นเอนจินเดียวกับที่ใช้ในหน้า CSS minifier และ JavaScript minifier บล็อก JSON-LD และสคริปต์ JSON อื่น ๆ จะถูกบีบให้กระชับ ส่วนสคริปต์ที่ไม่รู้จักชนิด (เช่น เทมเพลต) จะไม่ถูกแตะต้อง
การย่อ HTML คุ้มค่าหรือไม่?
สำหรับหน้าที่เรนเดอร์จากเซิร์ฟเวอร์และเว็บไซต์แบบ static เอกสาร HTML คือสิ่งแรกที่เบราว์เซอร์ดาวน์โหลด ทุกไบต์ที่ประหยัดได้จึงช่วยลดเวลาก่อนการเรนเดอร์ครั้งแรก การประหยัด 10–25% ก่อนบีบอัดเป็นเรื่องปกติ และมากกว่านั้นสำหรับเทมเพลตที่เยื้องเยอะและหน้าที่มีสคริปต์อินไลน์ขนาดใหญ่
คำถามที่พบบ่อย
การย่อ HTML จะเปลี่ยนหน้าตาของหน้าเว็บหรือไม่?
<pre>/<textarea> จะไม่ถูกแตะต้อง หากคุณจัดสไตล์ element ด้วย white-space: pre ใน CSS ให้ปิด ยุบช่องว่าง