ย่อขนาด HTML

วาง HTML แล้วรับกลับไปโดยไม่มีช่องว่างที่ไม่มีใครเห็น ตัวนับใต้ช่องกรอกจะบอกว่าประหยัดไปได้เท่าไร

โค้ดไม่ออกจากหน้านี้ การจัดรูปแบบทำในเบราว์เซอร์ของคุณ

วิธีใช้

  1. วาง HTML ลงในช่องแรก ระบบจะย่อขนาดให้ทันทีขณะพิมพ์
  2. ดูตัวเลขขนาดไฟล์ใต้ช่องกรอก
  3. คัดลอกผลลัพธ์ หรือกด «จัดรูปแบบ» เพื่อคลี่กลับเป็นแบบเดิม

สิ่งที่ควรรู้

อะไรถูกลบและอะไรไม่ถูกลบ

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

จริง ๆ แล้วคุ้มแค่ไหน

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

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

หน้าเว็บจะยังหน้าตาเหมือนเดิมไหม

เหมือนเดิม แต่มีข้อหนึ่ง ช่องว่างระหว่างอิลิเมนต์แบบ inline มองเห็นได้บนหน้าเว็บ ช่องว่างระหว่างแท็กจึงถูกยุบให้เหลือหนึ่งช่องแทนที่จะลบทิ้ง เลย์เอาต์จึงไม่ขยับ

โค้ดของฉันถูกส่งไปที่ไหนหรือเปล่า

ไม่ ทุกอย่างเกิดขึ้นภายในหน้านี้ เทมเพลตที่ยังไม่เผยแพร่จึงอยู่กับคุณ

มันย่อ CSS และ JavaScript ที่อยู่ข้างในด้วยไหม

ไม่ บล็อกเหล่านั้นจะถูกคัดลอกไปตามเดิม สำหรับสไตล์ชีตให้ใช้เครื่องมือย่อ CSS การไปแก้สคริปต์ด้วยเครื่องมือสำหรับมาร์กอัปคือทางลัดสู่บั๊กที่มองไม่เห็น

ย้อนกลับได้ไหม

กด «จัดรูปแบบ» แล้วมาร์กอัปจะถูกจัดวางใหม่พร้อมย่อหน้า การขึ้นบรรทัดเดิมหายไปแล้ว แต่โครงสร้างจะกลับมา

เครื่องมือที่เกี่ยวข้อง