Frontend Performance Cheatsheet

Cheatsheet นี้จาก ByteByteGo สรุปเทคนิคสำคัญต่างๆ สำหรับการปรับปรุงประสิทธิภาพของ Frontend (ส่วนที่ผู้ใช้โต้ตอบกับเว็บไซต์หรือแอปพลิเคชัน) โดยมีแผนภาพตรงกลางที่เชื่อมโยงไปยังคำอธิบายแต่ละข้อ ดังนี้ครับ:

1. Selective Rendering (การเลือกแสดงผล):

   • หลักการ: แสดงผลเฉพาะส่วนประกอบ (elements) ที่ผู้ใช้มองเห็นได้ทันทีเมื่อเปิดหน้าเว็บ (ส่วนที่เรียกว่า "above the fold" หรือส่วนครึ่งบนของจอ) ก่อน ส่วนที่ยังมองไม่เห็น (below the fold) จะยังไม่ถูกแสดงผลหรือแสดงผลทีหลัง
   • ประโยชน์: ช่วยให้หน้าเว็บแสดงผลเริ่มต้นได้เร็วขึ้นมาก เพราะเบราว์เซอร์ไม่ต้องทำงานหนักเพื่อแสดงผลทุกอย่างพร้อมกันทันที ผู้ใช้จะเห็นเนื้อหาสำคัญได้เร็วกว่าเดิม

2. Code Splitting (การแบ่งโค้ด):

   • หลักการ: แทนที่จะรวมโค้ด JavaScript ทั้งหมดของแอปพลิเคชันไว้ในไฟล์ใหญ่ไฟล์เดียว (bundle) เทคนิคนี้จะแบ่งโค้ดออกเป็นไฟล์ย่อยๆ หลายไฟล์ตามส่วนการทำงาน (เช่น หน้าหลัก, หน้าสินค้า, หน้าเกี่ยวกับเรา)
   • ประโยชน์: ทำให้เบราว์เซอร์โหลดเฉพาะโค้ดที่จำเป็นสำหรับหน้าหรือส่วนที่ผู้ใช้กำลังดูอยู่เท่านั้น ทำให้การโหลดครั้งแรกเร็วขึ้น และประหยัดแบนด์วิดท์ (ตามภาพตัวอย่าง app.js ขนาด 5mb ถูกแบ่งเป็น home.js 1.5mb, products.js 3mb, about.js 0.5mb)

3. Compression (การบีบอัด):

   • หลักการ: ลดขนาดของไฟล์ต่างๆ (เช่น ไฟล์ JavaScript, CSS, รูปภาพ, HTML) ก่อนที่จะส่งจากเซิร์ฟเวอร์ไปยังเบราว์เซอร์ของผู้ใช้ โดยใช้อัลกอริทึมการบีบอัด (เช่น Gzip, Brotli)
   • ประโยชน์: ไฟล์ขนาดเล็กลงทำให้ใช้เวลาดาวน์โหลดน้อยลง ส่งผลให้หน้าเว็บโหลดเร็วขึ้น โดยเฉพาะในเครือข่ายที่ช้า

4. Dynamic Imports (การนำเข้าโค้ดแบบไดนามิก):

   • หลักการ: โหลดโมดูลหรือส่วนของโค้ด JavaScript เข้ามาใช้งานก็ต่อเมื่อมีความจำเป็นจริงๆ เท่านั้น เช่น เมื่อผู้ใช้คลิกปุ่มเพื่อเปิดฟีเจอร์บางอย่าง แทนที่จะโหลดโค้ดทั้งหมดมาตั้งแต่ตอนแรก
   • ประโยชน์: ช่วยลดขนาดของโค้ดที่ต้องโหลดในครั้งแรก (initial load time) ลงได้อย่างมาก ทำให้แอปพลิเคชันเริ่มต้นทำงานได้เร็วขึ้น

5. Pre-fetching (การโหลดล่วงหน้า):

   • หลักการ: คาดการณ์ว่าผู้ใช้อาจจะต้องการเข้าถึงทรัพยากร (เช่น หน้าเว็บถัดไป, ข้อมูล, หรือสคริปต์) ใดในอนาคตอันใกล้ แล้วทำการโหลดทรัพยากรเหล่านั้นมาเก็บไว้ในแคช (Cache) ของเบราว์เซอร์ล่วงหน้าอย่างเงียบๆ เบื้องหลัง
   • ประโยชน์: เมื่อผู้ใช้ต้องการเข้าถึงทรัพยากรนั้นจริงๆ จะสามารถดึงจากแคชมาแสดงผลได้ทันที ทำให้รู้สึกว่าการเปลี่ยนหน้าหรือการโหลดข้อมูลนั้นรวดเร็วมาก (ตามภาพคือ: 1. สั่ง pre-fetch หน้าถัดไป -> 2. เก็บหน้านั้นในแคช -> 3. ผู้ใช้กดลิงก์เพื่อไปหน้านั้น -> 4. ดึงข้อมูลจากแคชมาแสดงทันที)

6. Tree Shaking (การสลัดโค้ดที่ไม่ใช้ออก):

   • หลักการ: เป็นกระบวนการอัตโนมัติ (มักทำตอน build โปรเจกต์) ที่จะวิเคราะห์โค้ด JavaScript และทำการลบโค้ดส่วนที่ไม่ได้ถูกเรียกใช้งานเลย (เรียกว่า "dead code" หรือโค้ดที่ตายแล้ว) ออกจากไฟล์สุดท้าย (final bundle)
   • ประโยชน์: ทำให้ขนาดของไฟล์ JavaScript สุดท้ายเล็กลง ลดเวลาดาวน์โหลดและเวลาประมวลผลโค้ดที่ไม่จำเป็น

7. Loading Sequence (ลำดับการโหลด):

   • หลักการ: จัดลำดับความสำคัญในการโหลดทรัพยากรต่างๆ โดยโหลดสิ่งที่จำเป็นต่อการแสดงผลครั้งแรก (critical resources) และเนื้อหาที่อยู่เหนือ fold (above the fold content) ก่อน เพื่อให้ผู้ใช้เห็นโครงสร้างและเนื้อหาหลักของหน้าเว็บได้เร็วที่สุด
   • ประโยชน์: ปรับปรุงประสบการณ์ผู้ใช้ (user experience) ทำให้ผู้ใช้รู้สึกว่าเว็บตอบสนองเร็ว (ลำดับที่แสดงในภาพ: 1. HTML -> 2. CSS -> 3. JS)

8. Priority-Based Loading (การโหลดตามลำดับความสำคัญ):

   • หลักการ: คล้ายกับ Loading Sequence แต่เน้นการกำหนดความสำคัญให้ทรัพยากรแต่ละประเภท แล้วโหลดตามลำดับความสำคัญนั้นๆ ทรัพยากรที่สำคัญที่สุดต่อการแสดงผล (เช่น HTML) จะถูกโหลดก่อน ตามมาด้วย CSS และ JS ที่จำเป็น และจากนั้นจึงโหลดทรัพยากรอื่นๆ ที่มีความสำคัญน้อยกว่า (เช่น รูปภาพ, สคริปต์ที่ไม่สำคัญมาก)
   • ประโยชน์: ทำให้มั่นใจว่าส่วนที่สำคัญที่สุดของหน้าเว็บจะพร้อมใช้งานได้เร็วที่สุด แม้ว่าทรัพยากรอื่นๆ จะยังโหลดไม่เสร็จ (ตามภาพตัวอย่าง: HTML โหลดเสร็จใน 150ms, JS/CSS เสร็จใน 300ms, รูปภาพเสร็จใน 450ms)

โดยสรุป Cheatsheet นี้ได้รวบรวมเทคนิคพื้นฐานและมีประสิทธิภาพที่นักพัฒนา Frontend ใช้เพื่อทำให้เว็บไซต์หรือเว็บแอปพลิเคชันโหลดเร็วขึ้น แสดงผลไวขึ้น และตอบสนองต่อผู้ใช้ได้ดีขึ้นครับ