ความเร็วไม่ใช่แค่คะแนน

เว็บที่เร็วในรายงาน performance แต่ตอนใช้งานจริงยังหน่วง ยังเลื่อนกระตุก หรือยังรอภาพหลักนานเกินไป คนใช้ก็ยังรู้สึกว่าเว็บช้าอยู่ดี.

เป้าหมายของ performance ไม่ใช่ทำให้ dashboard สีเขียวอย่างเดียว แต่คือทำให้คนเปิดเว็บแล้วเข้าใจทันทีว่ากำลังดูอะไร กดอะไรได้ และควรรอตรงไหน.

สิ่งที่ควรจัดก่อน

1. ทำ hero ให้เห็นเร็วที่สุด เพราะเป็น first impression ของทั้งหน้า
2. ลด script ที่ไม่จำเป็นในช่วงแรก อย่าให้ของที่คนยังไม่เห็นมาแย่งโหลด
3. กำหนดขนาดภาพและ card ให้แน่น ลด layout shift
4. ใช้ skeleton เฉพาะจุดที่ต้องรอจริง ไม่ใช้พร่ำเพรื่อจนหน้าเหมือนยังไม่เสร็จ
5. ทำ interaction ให้ตอบสนองไว แม้ข้อมูลจริงจะยังโหลดอยู่

ตัวอย่าง pattern เล็ก ๆ

export function StableImageFrame({ children }: { children: React.ReactNode }) {
  return (
    <div className="relative aspect-[16/10] overflow-hidden rounded-[14px] bg-black/5">
      {children}
    </div>
  );
}

ความลื่นคือการออกแบบความคาดหวัง

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

เว็บที่ดีไม่ใช่แค่เร็ว แต่มันต้อง “รู้สึกเร็ว” ตั้งแต่วินาทีแรก.