เคยรู้สึกมั้ยว่าเว็บไซต์ของเราแสดงผลช้ากว่าที่ควรจะเป็น อาการนี้อาจจะเป็นเพราะเว็บของเรามีไฟล์ CSS และ JavaScript อยู่หลายไฟล์ และแต่ละไฟล์มีขนาดใหญ่ มีคำสั่งให้เบราว์เซอร์ประมวลผลเยอะ เมื่อทำการประมวลผลแบบ Interpreter (แปลรหัสทีละคำสั่ง ทีละบรรทัด) ทำให้ทำงานช้า วิธีแก้ก็คือให้เราทำการ Minify โค้ดเพื่อลดขนาดไฟล์ และจำนวนบรรทัดลง เพื่อให้แต่ละไฟล์ประมวลผลเร็วขึ้น รวมๆ กันแล้วหลายๆ ไฟล์ ก็อาจทำให้เว็บโหลดเร็วขึ้น อีกครึ่งหรือ 1 วินาทีได้เลยทีเดียว

การทำ Minify โค้ดคืออะไร

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

ในการ Minify โค้ดนั้นมักจะผ่านขั้นตอนต่างๆ ดังนี้ (อาจไม่ถึงกับทุกข้อ ขึ้นอยู่กับโปรแกรมหรือปลั๊กอินที่ใช้)
1. ลบ comment ทั้งหมดออก
2. ลบการเว้นช่องว่างให้เหลือน้อยที่สุดเท่าที่จะทำได้ (ทั้งการเว้นวรรคและการขึ้นบรรทัดใหม่)
3. ย่อตัวอักษรของชื่อตัวแปรและชื่อฟังก์ชันให้เหลือตัวอักษรน้อยที่สุดเท่าที่จะทำได้
4. ปรับรูปแบบโค้ดให้สั้นลงอีก

minify process

จากรูปจะเห็นว่าจากเดิมที่โค้ดเขียนไว้อย่างเป็นระเบียบ มีการเว้นวรรค ขึ้นบรรทัดใหม่ ชื่อตัวแปรที่อ่านแล้วเข้าใจ ทำให้ง่ายต่อการอ่านและแก้ไขโค้ด พอผ่านการ Minify แล้วโค้ดทั้งหมดจะอยู่ติดกันจนลายตา (ชื่อตัวแปรก็ย่อจนไม่เหลือเค้าเดิมด้วย) จะอ่านหรือแก้ไขก็อาจจะต้องงมกันสักพัก

minify file size

แต่ถึงอย่างนั้น ไฟล์ที่ผ่านการ Minify แล้วจะมีขนาดลดลงกว่าไฟล์ต้นฉบับอย่างเห็นได้ชัด (จากรูปก็ลดลงไปกว่า 50% เลย) ตรงนี้แหละที่ช่วยให้เว็บของเราโหลดได้เร็วขึ้น


ปลั๊กอินใน WordPress ที่ใช้ในการ Minify

แน่นอนว่าใน WordPress เองก็มีปลั๊กอินที่ใช้ในการ Minify โค้ดอยู่เช่นกัน ส่วนใหญ่ก็จะมีอยู่ในปลั๊กอิน Cache ที่ช่วยในการเพิ่มความเร็วให้กับเว็บ โดยจะมีฟังก์ชัน Minify อยู่ในปลั๊กอินนั้นด้วย เช่น Autoptimize, W3 Total Cache, WP Fastest Cache ฯลฯ (สำหรับการตั้งค่านั้น ทางผู้เขียนได้เคยทำวิธีใช้ของ Autoptimize เอาไว้แล้ว ลองไปอ่านกันดูได้นะ)