Category Archive CSS

ถ้าทำเว็บในสมัยนี้เป็นไปได้ที่จะมีการใช้ Javascript Web Frameworks ที่นิยม เช่น Angular, Express.js, jQuery, React, Svelte, Vue.js และ css Frameworks เช่น Bootstrap, Bulma, Foundation, Milligram, Skeleton, Tailwind, UIkit มาช่วยในการทำงาน ให้เป็นระบบ และระเบียบ มากขึ้น เว็บที่ไหน ๆ ก็ใช้ ทำให้เปลี่ยนไปใช้จาก CDN เป็นอะไรที่น่าทำมาก ๆ

เหตุผล ที่ควรใช้ CDN

1. ลด Network Traffic ของเว็บเรา เพราะว่า ถ้าเช่า host / VPS ทุกครั้งที่มีการโหลด css / Javascript จะมีการนับปริมาณการใช้ทุกไฟล์ที่ เรียกใช้อยู่แล้ว ให้ไปโหลดจาก CDN หรือ Cloudflare ก็จะประหยัดไปได้เยอะ แถมลดที่เก็บไฟล์พวกนี้ ลดการใช้ cpu ในการส่งไฟล์เดิม ๆ
2. เว็บเราจะเร็วขึ้น
   • เป็นเพราะโดยปกติ Browser อย่าง chrome จะมีการ limit จำนวนการ โหลดไฟล์จากที่เดียวกัน เช่น host 1 จะสามารถโหลดได้พร้อมกัน 10 ไฟล์ และ host 2 จะโหลดไปพร้อม ๆ กัน อีก 10 ไฟล์ ( แปลว่า ถ้ามี 2 host จะโหลดได้เร็วกว่ามี host เดียว )
   • ไม่ต้องโหลดไฟล์ใหม่ เพราะว่าไฟล์อย่าง Bootstrap version นี้ อาจจะเคยโดนเรียกในเว็บไซต์อื่น ๆ มาแล้ว ไม่ต้องโหลดมาอีก ใช้ได้เลย
3. เน็ตบริษัท เน็ตโดยรวมจะเร็วขึ้น เพราะไม่ต้องโหลดไฟล์ ซ้ำ ๆ กัน
4. มันบริการ free เพราะว่ามันลดการใช้งาน network ทั่วโลกได้ 13% เลยทีเดียว win win ทั้งคู่

ตัวอย่างการใช้ CDN

1. ค้นหา เว็บที่ให้บริการ CDN อย่าง https://cdnjs.com ที่ทำงานโดยอยู่บน เครือข่าย https://www.cloudflare.com
2. ค้นหา Freamwork ที่จะใช้ เช่น https://cdnjs.com/libraries/bootstrap จะเห็นว่ามี หลายไฟล์มาก เลือกไฟล์ที่เรา จะใช้ คลิก ที่ </> นำไปวางใน code ที่เรียกใช้ เช่น

<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css"
      integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg=="
      referrerpolicy="no-referrer" rel="stylesheet">

<script crossorigin="anonymous"
      integrity="sha512-ykZ1QQr0Jy/4ZkvKuqWn4iF3lqPZyij9iRv6sGqLRdTPkY69YX6+7wvVGmsdBbiIfN/8OdsI7HABjvEok6ZopQ=="
      referrerpolicy="no-referrer"
      src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>

จะสังเกตุว่า จะมี Attribute เพิ่มขึ้นมา คือ

• crossorigin เป็นการให้ทำงาน ข้าม host ได้
• integrity เป็น hash ที่ช่วยให้ แน่ใจว่าเป็นไฟล์ที่ถูกต้อง ไม่ปลอมปน ถูกไฟล์แน่นะวิ
• referrerpolicy หลัก ๆ คือ บอก google ว่าไม่ต้องตามไปดูไฟล์พวกนี้นะ