กรณีศึกษา แก้เว็บช้าจากคะแนน 40 เป็น 92 บันทึกจากงานจริง

บทความนี้เป็นบันทึกการแก้ความเร็วเว็บจริง ไม่ใช่ทฤษฎี ทุกตัวเลขมาจากการวัดด้วย PageSpeed Insights ของ Google บนเว็บที่ใช้งานจริง

เล่าทั้งส่วนที่ได้ผลและส่วนที่วิเคราะห์ผิด เพราะส่วนหลังมีประโยชน์กว่าในการเรียนรู้

จุดเริ่มต้น

เว็บที่ทำด้วย Laravel และ Tailwind CSS วัดครั้งแรกได้คะแนนดังนี้

รอบที่หนึ่ง ลดขนาดสิ่งที่ต้องดาวน์โหลด

สิ่งที่ทำ

• แปลงรูปทั้งหมดเป็นรูปแบบ WebP โลโก้จาก 1.6 MB เหลือ 60 KB
• ย้ายฟอนต์มาเก็บไว้ที่เซิร์ฟเวอร์ตัวเอง แทนการดึงจากภายนอก
• เลิกใช้สคริปต์จากภายนอกทั้งหมด รวมเข้ามาในไฟล์เดียวและแยกส่วนที่ใช้เฉพาะบางหน้าออกไป
• ลดจำนวนชิ้นส่วนตกแต่งบนหน้าจอจากประมาณ 110 ชิ้น เหลือ 22–46 ชิ้น

ผลคือมือถือขึ้นจาก 40 เป็น 97 ซึ่งเป็นการกระโดดครั้งใหญ่ที่สุด

รอบที่สอง แก้การคำนวณตำแหน่งซ้ำซ้อน

PageSpeed แจ้งว่ามีการ "บังคับให้จัดเรียงใหม่" ต้นเหตุคือสคริปต์ที่ทำเอฟเฟกต์ตอนเลื่อนหน้า ไปอ่านค่าความสูงขององค์ประกอบทุกครั้งที่ผู้ใช้เลื่อนจอ

การอ่านค่าความสูงบังคับให้เบราว์เซอร์คำนวณตำแหน่งของทุกอย่างใหม่ทันที ทำแบบนี้หลายสิบครั้งต่อวินาทีจึงทำให้หน้าเว็บสะดุด

แก้โดยอ่านค่าเก็บไว้ครั้งเดียว แล้วอ่านใหม่เฉพาะตอนที่ขนาดหน้าจอเปลี่ยน ผลคือเดสก์ท็อปขึ้นจาก 72 เป็น 94

รอบที่สาม เจอของที่ไม่ได้ใช้แต่โหลดทุกหน้า

ตรวจไฟล์ที่เบราว์เซอร์ต้องดาวน์โหลด พบว่ามีไลบรารีสำหรับเรียกข้อมูลตัวหนึ่งขนาด 54 KB ถูกรวมอยู่ในไฟล์หลัก

ค้นทั้งโปรเจกต์แล้วพบว่าไม่มีโค้ดส่วนไหนเรียกใช้มันเลย เป็นของที่ติดมากับโครงเริ่มต้นตั้งแต่วันสร้างโปรเจกต์ ส่วนโค้ดที่เรียกข้อมูลจริงใช้ความสามารถที่มีอยู่ในเบราว์เซอร์อยู่แล้ว

ลบออกไปสองบรรทัด ไฟล์หลักลดจาก 82 KB เหลือ 47 KB หรือลดลง 43 เปอร์เซ็นต์

รอบที่สี่ ภาพที่โหลดช้าเพราะเบราว์เซอร์หาไม่เจอ

รายงานระบุว่าภาพพื้นหลังในส่วนหัวเป็นองค์ประกอบที่ใหญ่ที่สุดบนหน้าจอ และกว่าเบราว์เซอร์จะเริ่มโหลดก็ผ่านไป 1.4 วินาที ทั้งที่ไฟล์มีขนาดแค่ 11 KB

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

แก้ด้วยการประกาศไว้ตั้งแต่ส่วนหัวของหน้าว่าให้เริ่มโหลดรูปนี้ทันที ไม่ต้องรออ่านถึงตัวแท็ก

บทเรียนที่สำคัญที่สุด อย่าเชื่อการวัดครั้งเดียว

หลังแก้เสร็จ วัดสามครั้งติดกันโดยไม่แก้อะไรเลยระหว่างนั้น ได้ผลดังนี้

คะแนนมือถือต่างกันถึง 17 คะแนนโดยที่โค้ดเหมือนเดิมทุกตัวอักษร

ถ้าหยุดดูแค่การวัดครั้งแรกที่ได้เดสก์ท็อป 68 เราจะสรุปผิดว่างานที่ทำมาทั้งหมดไม่ได้ผล ทั้งที่จริงมันขึ้นไปถึง 89 ในการวัดถัดมา

สิ่งที่วิเคราะห์ผิดระหว่างทาง

ส่วนนี้มีประโยชน์กว่าส่วนที่ทำถูก

1. สรุปว่าโลโก้ใหญ่เกินไป แต่ที่วัดจริงคือไฟล์ไอคอนประจำเว็บ ไม่ใช่โลโก้ เพราะที่อยู่ของไอคอนปรากฏก่อนในโค้ดหน้าเว็บ
2. คิดว่าย้ายจังหวะการอ่านค่าความสูงจะแก้ปัญหาได้ แต่ตัวเลขไม่ลดเลย เพราะจังหวะที่ย้ายไปนั้นยังเป็นช่วงก่อนที่เบราว์เซอร์จะคำนวณตำแหน่งอยู่ดี ต้องเปลี่ยนไปใช้วิธีที่เบราว์เซอร์ส่งขนาดมาให้เองแทน

ทั้งสองครั้งถูกจับได้ด้วยการวัดซ้ำ ไม่ใช่ด้วยการคิดเอา

สรุปผลรวม

สามบทเรียนที่นำไปใช้ได้กับทุกเว็บ

1. ตรวจหาของที่โหลดแต่ไม่ได้ใช้ก่อนเสมอ มักเป็นของที่ลดได้มากที่สุดโดยไม่มีความเสี่ยง
2. วัดหลายครั้งก่อนสรุป คะแนนแกว่งได้มากกว่าที่คิด
3. ยืนยันตัวเลขจากไฟล์จริงเสมอ อย่าเชื่อคำแนะนำในรายงานโดยไม่ตรวจสอบ บางข้อเป็นการเข้าใจผิดของเครื่องมือเอง