Minify คืออะไร ช่วยให้เว็บเร็วขึ้นได้อย่างไร

Minify คืออะไร

Minify หากแปรตามตัวก็คือ การลดขนาด ซึ่งในที่นี้ก็คือ ลดขนาดไฟล์นั่นเอง ซึ่งลดขนาดได้แค่ไหนลองดูภาพประกอบระหว่าง 2 ไฟล์นี้กันครับ

ความแตกต่างของขนาดไฟล์ที่ผ่านการ minify และไม่ผ่าน

ทั้ง 2 ไฟล์ทำงานได้เหมือนกันแต่ต่างกันที่ผ่านการ Minify กับไม่ผ่าน โดยไฟล์ที่ผ่านการ Minify มักจะตั้งชื่อลงท้ายด้วย .min นอกจากชื่อที่ต่างกันแล้ว สิ่งที่ต่างกันอย่างมากอีกอย่างก็คือ ขนาดไฟล์ จะเห็นว่าขนาดไฟล์ลดไปได้ถึง 56% เลยทีเดียว คือจาก 129 KB เหลือ 57 KB นี่จึงเป็นเหตุผลให้เว็บของคุณโหลดเร็วขึ้นครับ

บางคนอาจจะสงสัยว่าในเมื่อ Minify มันดีขนาดนี้ ทำไมถึงไม่ทำเป็นไฟล์เดียวไปเลยล่ะ ไฟล์ที่ไม่มี .min จะมีมาทำไม ลองดู 2 ภาพนี้เทียบกันครับ

ไฟล์ javascript ที่ไม่ minify
bootstrap.js
ไฟล์ javascript ที่ผ่านการ minify
bootstrap.min.js

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

กลับกันมาดูภาพที่สอง ( bootstrap.min.js ) เหมือนหลุดไปอยู่ในหนัง The Matrix เลยใช่ไหมครับ ต่อให้โปรแกรมเมอร์สามารถอ่านได้ ก็ทำให้ยากและเสียเวลาอย่างมากๆ เลยหากต้องการแก้ไขโค้ด

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

กระบวนการ Minify

อันนี้จะเป็นตัวอย่างการ Minify อย่างง่ายๆ นะครับ ซึ่งการ Minify มักจะต้องผ่านกระบวนการดังต่อไปนี้ครับ

  1. ลบคอมเม้น
  2. ลบช่องว่างให้เหลือน้อยที่สุดหากชิดได้ก็ชิด หากชิดไม่ได้ก็จะเว้นไว้ 1 ช่อง
  3. ลบการขึ้นบรรทัดใหม่ ( จากรูป bootstrap.min.js จะเห็นว่าโค้ดทั้งหมดอยู่ในบรรทัดเดียวกันคือบรรทัดที่ 6 )
  4. ย่อความยาวชื่อตัวแปรที่มีหลายตัวอักษรให้เหลือ 1 ตัว หรือน้อยที่สุดที่เป็นไปได้
  5. ย่อความยาวชื่อฟังก์ชั่นที่มีหลายตัวอักษรให้เหลือ 1 ตัว หรือ น้อยที่สุดที่เป็นไปได้
  6. ปรับรูปแบบการเขียนโค้ดให้สั้นลง

กระบวนการข้างต้น จะถูกใช้ครบทุกข้อหรือไม่ขึ้นอยู่กับตัวโปรแกรมที่ใช้ทำ Minify นะครับ บางโปรแกรมอาจจะทำไม่ครบทุกข้อก็ได้

ตัวอย่างการ Minify

ด้านล่างคือตัวอย่างโค้ดง่ายๆ ที่ผมจะมาลองทำ Minify ให้เห็นภาพนะครับ

โค้ดเดิมๆ ที่ยังไม่ได้ผ่านกระบวนการ Minify ใดๆ

if( isSomething ){ //test condition
      doSomething(); //test function
}

โค้ดหลังจากผ่านการลบคอมเม้น

if( isSomething ){ 
      doSomething(); 
}

โค้ดหลังจากผ่านการลบช่องว่าง

if(isSomething){
doSomething();
}

โค้ดหลังจากผ่านการลบการขึ้นบรรทัดใหม่

if(isSomething){doSomething();}

โค้ดหลังจากผ่านการย่อความยาวตัวแปร

if(a){b();}

สุดท้าย โค้ดหลังจากผ่านการปรับรูปแบบการเขียนโค้ด

a&&b();

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

ปลั๊กอิน Cache กับ Minify

เนื่องจากปลั๊กอิน Cache นั้นมีวัตถุประสงค์เดียวกันกับ Minify คือทำให้เว็บโหลดเร็วขึ้น ดังนั้นปลั๊กอิน Cache ส่วนใหญ่ก็จะมีฟังก์ชั่น Minify ด้วย อาจจะใช้ชื่อว่า

  • Minify JavaScript หรือ Minify js
  • Minify style sheet หรือ Minify css
  • Minify JavaScript and css หรือ Minify js / css
  • Compress JavaScript หรือ Compress js
  • Compress style sheet หรือ Compress css
  • Compress JavaScript and css หรือ Compress js / css
  • ประมาณนี้เป็นต้น

ปลั๊กอิน WordPress ที่ช่วย Minify

ซึ่งจริงๆ แล้วก็คือปลั๊กอินจำพวก Cache นั่นเองครับ

สรุป : เรื่อง Minify คืออะไร

สรุป Minify ก็คือการทำให้ไฟล์ script ( JS / CSS ) ต่างๆ มีขนาดเล็กลง ( อาจเล็กลงได้ 10-90% เลยทีเดียว ) แต่ยังคงสามารถทำงานได้เหมือนเดิม โดยเฉพาะยุคนี้นักพัฒนาเว็บต้องให้ความสำคัญกับเรื่องความเร็วเว็บมากขึ้นครับ เนื่องจากกูเกิลได้ให้ความสำคัญกับความเร็วเว็บไซต์มาได้พักใหญ่แล้ว ยกตัวอย่างเช่น มี 2 เว็บที่มีเนื้อหาคุณภาพเท่าๆ กัน กูเกิลจะให้เว็บที่เร็วกว่ามีอันดับที่ดีกว่านั่นเองครับ นอกจากคนทำเว็บแล้ว ใครที่ทำ SEO ก็อย่าลืมเรื่องความเร็วเว็บกันด้วยนะครับ