[Dev Tip] CDN VS Local

เมื่อวานก็ได้เขียนเรื่อง Material Design Lite ไป ทีนี้มันไม่จบเมื่อมีคนมาถามว่า

"ตอน Import ทำไม ถึงใช้ CDN ล่ะครับ ไม่โหลดไฟล์เข้ามาก่อน แล้วค่อย Import ผ่าน Local เอาล่ะครับ?"

วันนี้เลยไปคุยกับเพื่อนมาเพื่อหาคำตอบมาให้ เลยจะมาเขียนให้อ่านกันว่า ทำไมถึงต้องทำแบบนั้น แล้วมันต่างกันยังไง แต่ก่อนอื่น จะต้องเข้าใจก่อนว่า CDN มันคืออะไร

CDN คืออะไร ?

CDN มันย่อมาจาก Content Delivery Network มันคือเครือข่ายของเครื่อง Server หลายๆ เครื่องที่คอยเก็บ Code หรือพวก Static Content ต่างๆ ให้เรา โดยเราสามารถเรียกใช้มันจากที่ไหนก็ได้ตราบใดที่เราเชื่อมต่อ Internet อยู่

เวลามันเก็บข้อมูล มันจะกระจายข้อมูลไปตามเครื่องต่างๆ ที่เราเรียกว่า Node แตกต่างจากการเก็บแบบเดิม เพื่อต้องการให้ Server มีภาระน้อยลง รับคนได้เยอะขึ้น ซึ่งแน่นอนว่า ข้อมูลที่เรามักจะเรียกจาก CDN นั่นคือพวก Static Content อย่าง CSS หรือ JS ของเราที่ไม่ค่อยมีการเปลี่ยนแปลงเท่าไหร่

ประโยชน์ของ CDN

• รวดเร็วกว่า - เพราะว่า CDN จะมี Server อยู่หลายที่ โดนตัวมันจะเลือก Server ที่ใกล้กับตัว Client ที่สุดเพื่อลด Delay Time ทำให้มันโหลดได้เร็วกว่า
• **ล่าสุดกว่า - **ส่วนใหญ่ใน Server CDN อย่าง Google เราสามารถเลือกให้เป็น Version ล่าสุดลงไปได้เลย ถ้าเกิดมีการ Upgrade หรือ Update Version เราก็ไม่จำเป็นต้องมานั่งโหลด แล้วโยนขึ้น Host เราใหม่
• Bandwidth ลดลง - เพราะว่า เราโหลดพวก Static Content ต่างๆ มาจาก CDN ไปแล้ว ทำให้ Server หลักของเราลดภาระไปได้เยอะเลย ถึงแม้ว่า ไฟล์นึงจะ 100kb กว่าๆก็ตามเถอะ แต่ลองนึงถึงว่า ถ้ามี User เข้าวันล่ะ 100 คน คนนึงก็ต้องโหลดอย่างน้อย 100kb วันนึงก็ต้องเสีย Bandwidth ไป 10 mb ไปฟรีๆ เลย

ในเมื่อมันมีข้อดี แน่นอนว่ามันก็ต้องมีข้อเสียเช่นกัน

• อาจทำให้ช้ากว่าเดิม - เมื่อกี้ที่บอกว่า มันทำให้เร็วกว่า ซึ่งมันก็จริง แต่มันก็ทำให้ช้ากว่าได้เช่นกัน ถ้าเราใช้ในที่ที่ไม่มี Server ของ CDN อยู่ เช่นเว็บนี้เป็นต้น เมื่อก่อนก็เรียก jquery ผ่าน CDN พบว่ามันช้ามาก และเวลาโหลดมันจะต้องกินเวลาในการ Execute อีกกินหนักเลย พอมาตอนนี้เรียกผ่านตัว Host ตัวเองเลย เมื่อใช้ในไทยแล้ว เร็วกว่าเยอะเลย
• ไฟล์ที่เราดึงมาจาก CDN อาจจะไม่ได้ Minify ไว้ก่อน - อันนี้เกิดขึ้นไม่เยอะเท่าไหร่เพราะ ส่วนใหญ่เขาจะ Minify ไว้ให้ก่อนแล้วอย่างเช่น Google CDN ที่ Minify ตัว jquery และหลายๆอย่างไว้ก่อนแล้ว เราก็แค่เรียกก็ใช้ง่ายได้ทันที

เมื่อไหร่ควรเรียก CDN และเมื่อไหร่ควรเก็บให้เป็น Local

เราก็ต้องดูก่อนเลยว่า เว็บเราทำงานใน Intranet หรือไม่ ถ้าใช่ การใช้ CDN นี่ตัดทิ้งไปได้เลย
ถัดมา ให้เราดูว่า Server CDN ที่เราจะเรียกไฟล์มาใช้มี Server อยู่ใกล้ๆ กับ User ส่วนใหญ่ของเรามั้ย ถ้ามีก็เยี่ยมเลย เราก็เรียกใช้ได้เลย แต่ถ้าไม่ก็ให้ดูว่า ระหว่าง User ถึง Server เรากับ User ถึง CDN ที่ใกล้ที่สุดอันไหนใกล้กว่ากัน ถ้า User ถึง CDN ใกล้กว่า ก็เรียก CDN ได้เลย
แต่มันจะมีบางกรณีที่ เราต้องการประหยัด Bandwidth ของเรา CDN ก็เป็นทางเลือกที่ไม่เลวเท่าไหร่เลย
และอีกอย่าง เพื่อเพิ่ม Performance ให้หน้าเว็บเรา เราควรที่จะจัดลำดับการโหลดของ Content ของเรา บางครั้ง Script ที่เราจำเป็นต้องเรียกก่อน มันดันต้องเรียกผ่าน CDN ที่บางทีจะช้ากว่า Server เรา ฉะนั้นก็ต้องจัดลำดับดีๆ จะได้เร็วขึ้นหน่อย