กฎ 3 วินาทีของประสิทธิภาพเว็บ

คุณมีเวลาเพียง 3 วินาที

หลังจากนั้น ผู้ใช้งานของคุณจะจากไป

งานวิจัยจาก Google ระบุว่า 53% ของผู้ใช้งานมือถือจะละทิ้งเว็บไซต์หากใช้เวลาโหลดนานกว่า 3 วินาที

เว็บไซต์ที่โหลดช้าทำให้คุณเสียโอกาสทางธุรกิจ การปรับปรุงเวลาโหลดบนมือถือให้เร็วขึ้นเพียง 0.1 วินาที สามารถเพิ่มอัตราการซื้อ (conversions) ในธุรกิจค้าปลีกได้ถึง 8.4%

ประสิทธิภาพไม่ใช่แค่ตัวชี้วัดทางเทคนิค แต่มันคือตัวชี้วัดทางธุรกิจ

หากต้องการเป็นผู้ชนะ คุณต้องเข้าใจ Core Web Vitals:

• LCP (Largest Contentful Paint): ความเร็วที่ผู้ใช้เห็นเนื้อหาหลัก ควรตั้งเป้าให้ต่ำกว่า 2.5 วินาที • INP (Interaction to Next Paint): ความเร็วที่หน้าเว็บตอบสนองต่อการคลิก ควรตั้งเป้าให้ต่ำกว่า 200 มิลลิวินาที • CLS (Cumulative Layout Shift): ความเสถียรของเลย์เอาต์หน้าเว็บ ควรตั้งเป้าให้ต่ำกว่า 0.1

เลิกคาดเดาแล้วเริ่มปรับแต่ง (optimize) ได้เลย นี่คือวิธีเอาชนะเวลา:

JavaScript Optimization • ส่งโค้ดให้น้อยลง ใช้ dynamic imports เพื่อโหลดโค้ดเฉพาะเมื่อจำเป็นเท่านั้น • ใช้ tree-shaking เปลี่ยนจาก CommonJS เป็น ES modules เพื่อกำจัดโค้ดที่ไม่ได้ใช้งานออกไป • ย้ายงานหนักๆ ไปไว้ที่ Web Workers เพื่อให้ main thread ว่างสำหรับรับ input จากผู้ใช้ • ใช้ defer หรือ async เพื่อไม่ให้สคริปต์ขัดขวางการประมวลผล (parsing) HTML ของคุณ

CSS and Rendering • ทำ Inline critical CSS โหลดเฉพาะส่วนที่มองเห็นได้ทันที (above the fold) ก่อน • หลีกเลี่ยง layout thrashing ทำการอ่านและเขียนข้อมูลเป็นชุด (batch) เพื่อป้องกันการคำนวณใหม่ซ้ำๆ • ใช้ transform และ opacity ในการทำแอนิเมชัน เพราะสิ่งเหล่านี้ใช้ GPU และช่วยหลีกเลี่ยง layout shifts • ใช้ content-visibility: auto เพื่อข้ามการเรนเดอร์เนื้อหาที่อยู่นอกหน้าจอ

Image Strategy • ใช้ฟอร์แมตสมัยใหม่ WebP และ AVIF มีขนาดเล็กกว่า JPEG มาก • กำหนด attribute width และ height เพื่อป้องกันการขยับของเลย์เอาต์ (CLS) • ทำ Lazy-load สำหรับรูปภาพที่อยู่ด้านล่าง (below the fold) แต่ห้ามทำ lazy-load กับรูป LCP hero image ของคุณ • ใช้ srcset เพื่อส่งรูปภาพขนาดเล็กให้แก่ผู้ใช้งานมือถือ

Network and Caching • ใช้ CDN เพื่อนำเนื้อหาไปไว้ใกล้กับผู้ใช้งานมากขึ้นเพื่อลดค่า latency • เปิดใช้งานการบีบอัด (compression) ใช้ Brotli หรือ Zstandard เพื่อลดขนาดไฟล์ • ทำ Caching อย่างเต็มที่ ใช้ immutable cache headers สำหรับ assets ที่มีการทำ hashing • รักษาการทำงานของ bfcache ไว้ หลีกเลี่ยงการใช้ unload event เพื่อให้การกดปุ่ม back/forward ทำได้ทันที

เป้าหมายนั้นเรียบง่าย: คือการลดภาระงานให้น้อยที่สุด

โค้ดที่เร็วที่สุดคือโค้ดที่ผู้ใช้ไม่จำเป็นต้องดาวน์โหลดเลย และคำขอ (request) ที่เร็วที่สุดคือคำขอที่เบราว์เซอร์ไม่ต้องส่งออกไปเลย

Source: https://dev.to/utkarshbansal01/the-3-second-rule-of-web-performance-and-how-to-beat-it-1he1