บทความทั้งหมด

การมินิฟาย HTML: เหตุใดช่องว่างในมาร์กอัปจึงมีความสำคัญ

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

สิ่งที่ลบออกได้อย่างปลอดภัย

เครื่องมือย่อขนาดจะลบคอมเมนต์ HTML <!-- ... --> ช่องว่างและการขึ้นบรรทัดใหม่ที่ไม่จำเป็นระหว่างแท็ก เครื่องหมายคำพูดรอบแอตทริบิวต์ที่ค่าไม่มีช่องว่างอยู่ข้างใน และบางครั้งก็รวมถึงแท็กปิดที่ไม่บังคับ เช่น </li> ด้วย

บั๊กคลาสสิก: คำสองคำเชื่อมติดกันเป็นคำเดียว

ช่องว่างหนึ่งช่องระหว่างอิลิเมนต์แบบ inline สองตัวคือระยะห่างที่มองเห็นได้จริงบนหน้าเว็บที่แสดงผลแล้ว ไม่ใช่แค่การจัดรูปแบบในซอร์สโค้ด <span>foo</span> <span>bar</span> จะแสดงผลเป็น "foo bar" ที่มีช่องว่างคั่น แต่ถ้าช่องว่างนั้นถูกลบออกไปโดยไม่ระวัง ผลลัพธ์จะกลายเป็น "foobar" ที่ติดกันโดยไม่มีการแจ้งเตือนใด ๆ เครื่องมือย่อขนาดที่ทำงานอย่างระมัดระวังจะลบเฉพาะช่องว่างที่ไม่มีผลต่อการแสดงผล เช่น ระหว่างอิลิเมนต์แบบ block เท่านั้น และจะไม่แตะช่องว่างระหว่างอิลิเมนต์แบบ inline

การย่อขนาดกับความอ่านง่ายระหว่างการพัฒนา

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

ใช้ทำอะไรได้บ้าง

  • ลดขนาดหน้า HTML ก่อนเผยแพร่ขึ้น production
  • ลบคอมเมนต์ของนักพัฒนาออกจากมาร์กอัปเวอร์ชันสุดท้าย
  • หลีกเลี่ยงข้อผิดพลาดด้วยการลบช่องว่างเฉพาะจุดที่ปลอดภัยจริง ๆ เท่านั้น

ทำไมภาษาที่ไม่มีช่องว่างระหว่างคำถึงมีผลต่างจากภาษาอังกฤษ

ภาษาที่เขียนโดยมีช่องว่างระหว่างคำ เช่น ภาษาอังกฤษ ใช้ช่องว่างนั้นทั้งเพื่อความหมายและเป็นจุดบอกเบราว์เซอร์ว่าตัดบรรทัดตรงไหนได้ ส่วนภาษาไทยไม่มีช่องว่างระหว่างคำเลย เบราว์เซอร์จึงต้องใช้พจนานุกรมคำหรือกฎการตัดคำ (word-break) เพื่อเดาตำแหน่งที่เหมาะสมสำหรับการขึ้นบรรทัดใหม่แทน ซึ่งหมายความว่าบั๊กจากการยุบช่องว่างผิดที่ในเครื่องมือย่อขนาดมีโอกาสหลุดรอดโดยไม่มีใครสังเกตเห็นได้ง่ายกว่าในข้อความภาษาอังกฤษที่คั่นด้วยช่องว่าง เพราะคำที่เชื่อมติดกันโดยไม่ตั้งใจยังพอดูเหมือนคำแปลก ๆ คำหนึ่งได้ ในขณะที่ข้อความภาษาไทยซึ่งไม่มีช่องว่างระหว่างคำอยู่แล้ว ปัญหานี้แทบไม่เกิดในระดับคำ แต่ถ้าเกิดกับช่องว่างระหว่างอิลิเมนต์ที่ทำหน้าที่เป็นช่องเว้นวรรคจริง ๆ ผลกระทบก็ยังชัดเจนอยู่ดี

ลองใช้เครื่องมือ