ปัจจุบันความเร็วในโหลดหน้าเว็บไซต์ถือเป็นเรื่องที่สำคัญอันดับต้นๆ ในการพัฒนาเว็บไซต์เลยทีเดียว เพราะเชื่อว่าผู้ใช้งานเว็บไซต์คงไม่ชอบที่จะรอเว็บไซต์ที่โหลดช้าอย่างแน่นอน และ 1 ในวิธีที่ช่วยปรับปรุง Performance เว็บไซต์ให้ดียิ่งขึ้น นั้นก็คือ การใช้บริการจาก Content Delivery Network หรือ CDN นั้นเอง สำหรับบทความนี้ผมจะขอหยิบเอา 3 CDN ยอดนิยมที่ให้บริการ Hosted Libraries และ Frameworks ชื่อดังมาให้เพื่อนๆ ได้ใช้กันครับ
CDN คืออะไร
CDN หรือ Content Delivery Network คือ ระบบเครือข่ายขนาดใหญ่ที่มีเครื่อง Server จำนวนมากกระจายตัวอยู่ตามภูมิภาคต่างๆ ทั่วโลก โดย Server เหล่านี้จะทำหน้าที่เชื่อมต่อกันผ่านอินเทอร์เน็ตเพื่อทำหน้าที่ในการส่งข้อมูลไปให้ถึงผู้รับปลายทางให้เร็วที่สุด ซึ่งข้อมูลที่ส่งนั้นก็มีหลากหลายรูปแบบไม่ว่าจะเป็นข้อความ, รูปภาพ, มัลติมีเดีย และไฟล์ต่างๆ
ข้อมูลเหล่านี้จะถูกคัดลอก (Caching) ไปเก็บไว้บนเครื่อง Server ที่กระจายตัวอยู่บริเวณเครื่องปลายทาง ดังนั้น เมื่อมีการเรียกหาข้อมูลดังกล่าว Server ที่อยู่ใกล้ที่สุดจะเป็นคนตอบรับคำร้องขอเหล่านี้แทน Server ต้นทางที่อยู่ไกลออกไป ซึ่งการกระทำเหล่านี้จะช่วยร่นระยะเวลาในการส่งข้อมูลที่เร็วขึ้นกว่าเดิมโดยเฉลี่ยแล้วมากกว่า 50% เลยทีเดียว
CDN ใช้งานได้ฟรี! สำหรับนักพัฒนาเว็บไซต์
อันที่จริงแล้ว CDN ที่ให้บริการ Hosted Libraries มีอยู่หลายเจ้า แต่ผมขอรวบรวม CDN ที่ใช้งานกันบ่อยๆ มาให้ ดังนี้
Google Hosted Libraries
Google เองก็มีบริการ Hosted Libraries ชื่อดังมาให้ Developers ได้นำไปใช้เหมือนกัน แต่อาจจะไม่มากเท่า jsDelivr และ cdnjs แต่อย่างไรก็ตาม ไฟล์ที่ลิงค์มาจากที่นี้ก็ดูน่าเชื่อถือที่อื่นอย่างแน่นอน ดังนั้น หากเว็บไซต์ของเรามีการใช้ Libraries ไม่มากนัก Google Hosted Libraries ก็ถือเป็น 1 ใน CDN อันดับต้นๆ ที่ควรเลือกใช้
jsDelivr
ถึงแม้ Google CDN จะดูน่าเชื่อถือ และมีความเสถียรมากกว่าใคร แต่ถึงกระนั้นก็ยังมี Libraries ให้เราเลือกไม่มากนัก ดังนั้น jsDelivr ก็ถือเป็น 1 ทางเลือกที่น่าสนใจ เพราะด้วยจำนวน Libraries ที่มีให้เลือกมากกว่าทั้ง Libraries ที่มีชื่อเสียง และยังไม่ค่อยมีชื่อเสียง นอกจากนี้ เรายังสามารถเลือกไฟล์ที่เราต้องการที่ส่งตรงจาก npm และ GitHub ได้อีกด้วย
cdnjs
อีก 1 Public CDN อันโด่งดังที่รูปแบบคล้ายกับ jsDelivr โดย cdnjs มาพร้อมกับ Libraries ยอดนิยมกว่า 6000+ รายการ ไม่ว่าจะเป็น jQuery, bootstrap, font-awesome และอื่นๆ อีกมากมาย นอกจากนี้ cdnjs ยังอำนวยความสะดวกให้เราสามารถ Copy ไฟล์ URL หรือ Script Tag ที่มาพร้อมกับ SRI หรือไฟล์เพียวๆ ได้อีกด้วย
ข้อดี/ข้อเสียของการใช้ Library ผ่าน CDN
ข้อดี:
- ลดภาระการทำงานของ Server ไม่ว่าจะเป็นในเรื่องของ Bandwidth หรือ Storage
- ผู้ใช้สามารถโหลดเว็บไซต์ได้เร็วขึ้น เนื่องจากไฟล์ถูกส่งจากเซิฟเวอร์ที่อยู่ใกล้ผู้ใช้มากที่สุด
- CDN สามารถส่งเวอร์ชั่นล่าสุดของ Libraries นั้นๆ มาให้เราได้เสมอ
- เร็ว แรง ล่มยาก แถมฟรีอีกต่างหาก
ข้อเสีย:
- เวลาพัฒนาต้องต่อ Internet อยู่เสมอ
- อาจทำให้เว็บช้ากว่าเดิม ในกรณีเราใช้ Libraries ที่ใช้ไม่มี Server CDN อยู่ใกล้เคียง
- หาก Server CDN ล่มอาจส่งผลกระทบกับเราได้
- อาจจะเสี่ยงต่อการโจมตีของ Hacker ได้
เมื่อไหร่ควรใช้ Libraries จาก CDN
- เราทำงานใน Intranet หรือในสถานที่ๆ ไม่ได้เชื่อมต่อ Internet หรือไม่ ถ้าใช่การใช้ CDN ก็ไม่เหมาะสม
- Libraries ที่เราใช้งาน มี Server อยู่ใกล้กับ User ส่วนใหญ่หรือไม่
- ระยะทางระหว่าง User กับ Server ของเรากับ Server CDN หาก User อยู่ใกล้ Server CDN มากกว่าก็เลือกใช้ Server CDN
- ลำดับของ Script ที่เราใช้งาน หากต้องเรียกใช้งานก่อน การเรียกไฟล์ผ่าน CDN อาจทำให้โหลดช้ากว่า
- ในกรณีที่ต้องการประหยัด Bandwidth การใช้ CDN ก็ถือเป็นทางเลือกที่น่าสนใจ
ตัวอย่างการ FallBack jQuery
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
// Fallback function for ่jQuery
<script> if (typeof jQuery == 'undefined') { document.write(unescape("%3Cscript src='/js/jquery.min.js' type='text/javascript'%3E%3C/script%3E")); } </script>Code language: HTML, XML (xml)หรือ
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
// Fallback function for ่jQuery
<script></script>Code language: HTML, XML (xml)สรุป
อย่างที่เห็นบริการ CDN มีให้เลือกใช้มากมาย แต่ละเจ้าก็มีข้อดีข้อเสียที่แตกต่างกัน ทั้งนี้ขึ้นอยู่กับงานที่เราต้องการนำไปใช้ หากต้องการความสะดวกก็เลือกใช้ CDN แต่หากต้องการความยืดหยุ่น CDN ก็อาจไม่ตอบโจทย์
