กู้ชีพเว็บแอปพลิเคชันจากโหลด 8 วินาที ลดครึ่งหนึ่งได้อย่างไร
ถอดบทเรียนการแก้ปัญหาเว็บแอป Next.js โหลดช้าบนมือถือ พร้อมวิธีลดขนาด JavaScript bundle ลง 47% และเพิ่มความเร็วเป็นสองเท่า
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- เว็บแอป Next.js เดิมมีเวลาโหลดหน้าแรกเกือบ 8 วินาทีบนมือถือ
- ขนาด JavaScript bundle พุ่งสูงถึง 1.8 เมกะไบต์โดยไม่จำเป็น
- การปรับปรุงเน้นแยกโค้ด บีบอัดรูปภาพ และลดการเรนเดอร์ซ้ำ
- ลดเวลาโหลดหน้าแรกเหลือ 2.1 วินาที และขนาดไฟล์ลดลง 47%
นักพัฒนาทุกคนย่อมเคยผ่านช่วงเวลาตื่นตระหนกชั่วครู่ เมื่อกดเผยแพร่โค้ด เปิดเว็บไซต์จริงบนโทรศัพท์มือถือ แล้วพบว่าหน้าจอยังคงเป็นสีขาวว่างเปล่าผ่านไปหนึ่ง สอง หรือสี่วินาที
ก่อนหน้านี้ ทีมงานได้พัฒนาแอปพลิเคชันด้วย Next.js ซึ่งทำงานได้รวดเร็วดีบนเครือข่าย Wi-Fi ความเร็วสูงในสำนักงาน แต่เมื่อทดสอบผ่านการเชื่อมต่อมือถือที่ไม่เสถียร กลับพบว่าเว็บโหลดช้าอย่างน่าใจหาย การโหลดหน้าแรกครั้งแรกใช้เวลาเกือบ 8 วินาที และไฟล์ JavaScript หลักมีขนาดใหญ่ถึง 1.8 เมกะไบต์
บทความนี้จะพาไปดูวิธีตรวจสอบความอืดขนานใหญ่ การลดเวลาโหลดลงถึง 47 เปอร์เซ็นต์ และกฎการเพิ่มประสิทธิภาพง่ายๆ ที่นักพัฒนาทุกคนควรทราบ
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
เมื่อเว็บไซต์ทำงานช้า สัญชาตญาณแรกมักจะพุ่งเป้าไปที่แบ็กอัป API หรือการคูรีฐานข้อมูลที่หนักหน่วง แต่จากการตรวจสอบประสิทธิภาพกลับพบว่าแบ็กอัปไม่ใช่ปัญหาเลย ปัญหาหลักคือหน้าแรกอัดแน่นไปด้วยสิ่งของมากเกินไป
สาเหตุหลักมีดังนี้:
- โหลดไลบรารีแผนภูมิขนาดใหญ่ ตารางแอดมินที่ซับซ้อน และป๊อปอัปตั้งแต่ผู้ใช้เพิ่งเข้าหน้าแรก
- ส่งรูปภาพขนาดยักษ์ไปยังหน้าจอมือถือขนาดเล็ก ทำให้แบนด์วิดท์หมดไปก่อนที่ปุ่มกดจะใช้งานได้
- การอัปเดตสเตตเดียวที่ด้านบนสุดของแอป ทำให้คอมโพเนนต์ลูกที่มองไม่เห็นคำนวณและเรนเดอร์ซ้ำโดยไม่จำเป็น
แทนที่จะเขียนโค้ดใหม่ทั้งหมด ทีมงานเลือกมุ่งเน้นไปที่การแก้ปัญหา 3 ส่วนสำคัญ เริ่มจากการไม่โหลดสิ่งใดจนกว่าผู้ใช้จะร้องขอ โดยแบ่งแอปเป็นชิ้นเล็กๆ และให้ผู้ใช้ดาวน์โหลดเฉพาะสิ่งที่จำเป็นจริงๆ เท่านั้น
ถัดมาคือการจัดการสินทรัพย์อัจฉริยะ ด้วยการเปลี่ยนแท็กรูปภาพปกติมาใช้รูปแบบเว็บสมัยใหม่ เช่น WebP และ AVIF ซึ่งช่วยปรับขนาดอัตโนมัติ ทำให้รูปภาพขนาด 2 เมกะไบต์เหลือเพียง 150 กิโลไบต์โดยคุณภาพไม่ตก
การทำ Code Splitting หรือการแบ่งโค้ดโหลดเฉพาะส่วนที่จำเป็น (Lazy Loading) เป็นหัวใจสำคัญของเว็บสมัยใหม่ เพราะผู้ใช้มือถือส่วนใหญ่มีข้อจำกัดด้านปริมาณข้อมูลและหน่วยประมวลผล การส่งโค้ดทั้งหมดไปรวดเดียวในครั้งแรกมักสร้างภาระหนักโดยเปล่าประโยชน์ แนวทางนี้ช่วยประหยัดทั้งทรัพยากรเครือข่ายและพลังงานแบตเตอรี่ของอุปกรณ์ผู้ใช้
สุดท้ายคือการลดเสียงรบกวนจากการเรนเดอร์ซ้ำ โดยแยกสถานะของคอมโพเนนต์ออกจากกัน เปรียบเสมือนการปิดไฟในห้องที่ไม่มีคนอยู่ หากพิมพ์ข้อความในช่องค้นหา ควรมีเพียงช่องค้นหานั้นที่อัปเดต ไม่ใช่เรนเดอร์เลย์เอาต์ทั้งหน้าใหม่ทั้งหมด
ที่มา: Dev.to
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น