เว็บโหลดช้าเสียลูกค้า: รู้จัก Core Web Vitals และ 7 วิธีทำเว็บให้เร็ว
เว็บช้าทำให้ลูกค้ากดปิดก่อนเห็นสินค้า มาทำความรู้จัก Core Web Vitals (LCP, INP, CLS) ตัวชี้วัดที่ Google ใช้ และ 7 วิธีปรับเว็บให้เร็วขึ้นแบบทำตามได้จริง
ทีมงาน Codeza อ่าน 5 นาที
ลองนึกภาพว่าลูกค้าค้นหาร้านของคุณใน Google เจอแล้วกดเข้ามา แต่หน้าเว็บขาวโพลนอยู่ 4–5 วินาที สิ่งที่เกิดขึ้นบ่อยที่สุดคือเขากด "ย้อนกลับ" แล้วไปเข้าเว็บคู่แข่งแทน ความเร็วจึงไม่ใช่เรื่องของโปรแกรมเมอร์อย่างเดียว แต่เป็นเรื่องยอดขายโดยตรง
Core Web Vitals คืออะไร
Core Web Vitals คือชุดตัวชี้วัดที่ Google ใช้วัด "ประสบการณ์จริง" ของผู้ใช้บนหน้าเว็บ และเป็นหนึ่งในสัญญาณที่ Google นำมาพิจารณาเรื่องอันดับ ประกอบด้วย 3 ตัวหลัก
| ตัวชี้วัด | วัดอะไร | เกณฑ์ "ดี" |
|---|---|---|
| LCP (Largest Contentful Paint) | เนื้อหาหลักของหน้าแสดงเสร็จเร็วแค่ไหน | ไม่เกิน 2.5 วินาที |
| INP (Interaction to Next Paint) | กดปุ่มแล้วหน้าเว็บตอบสนองไวแค่ไหน | ไม่เกิน 200 มิลลิวินาที |
| CLS (Cumulative Layout Shift) | หน้าเว็บกระตุก/เลื่อนเองระหว่างโหลดมากแค่ไหน | ไม่เกิน 0.1 |
ตรวจเว็บของคุณได้ฟรีที่ PageSpeed Insights หรือดูรายงาน Core Web Vitals ใน Google Search Console
7 วิธีทำเว็บให้เร็วขึ้น
1. ย่อขนาดรูปภาพ และใช้ไฟล์ WebP/AVIF
รูปภาพคือสาเหตุอันดับต้นๆ ของเว็บช้า รูปจากกล้องหรือมือถือมักใหญ่หลาย MB ทั้งที่แสดงบนจอจริงแค่ไม่กี่ร้อยพิกเซล ให้ย่อรูปให้พอดีกับขนาดที่แสดง และแปลงเป็น WebP หรือ AVIF ซึ่งไฟล์เล็กกว่า JPEG มากในคุณภาพที่ใกล้เคียงกัน
2. โหลดรูปที่อยู่ด้านล่างเมื่อจำเป็น (Lazy Loading)
รูปที่อยู่ล่างๆ ของหน้าไม่จำเป็นต้องโหลดทันที ใส่ loading="lazy" ให้รูปเหล่านั้น แต่ อย่า ใส่ให้รูปใหญ่ด้านบนสุด (Hero) เพราะจะทำให้ LCP แย่ลง
3. กำหนดขนาดรูปและพื้นที่โฆษณาให้ชัดเจน
ถ้าไม่บอกเบราว์เซอร์ว่ารูปกว้าง-สูงเท่าไหร่ พอรูปโหลดเสร็จเนื้อหาจะถูกดันลงมา ทำให้คะแนน CLS แย่ ใส่ width และ height ให้ทุกรูป และจองพื้นที่ให้แบนเนอร์หรือวิดเจ็ตล่วงหน้า
4. ลด JavaScript ที่ไม่จำเป็น
ปลั๊กอิน สคริปต์ติดตาม แชท ป๊อปอัป ทุกตัวมีราคา ยิ่งมาก INP ยิ่งแย่ ลองไล่ดูว่าตัวไหนไม่ได้ใช้แล้วให้ถอดออก ตัวที่จำเป็นให้โหลดแบบ defer หรือหลังหน้าเว็บพร้อมใช้งาน
5. จัดการฟอนต์ให้ดี
ฟอนต์ภาษาไทยมักมีขนาดใหญ่ ใช้เฉพาะน้ำหนักที่ใช้จริง (เช่น 400 กับ 700) ตั้งค่า font-display: swap ให้ข้อความแสดงได้ทันที และโหลดฟอนต์จากโดเมนเดียวกับเว็บถ้าทำได้
6. ใช้ CDN และ Cache
CDN อย่าง Cloudflare จะเก็บสำเนาเว็บไว้ใกล้ผู้ใช้ ทำให้ไฟล์ถึงมือลูกค้าเร็วขึ้น ตั้งค่า Cache ให้ไฟล์ที่ไม่ค่อยเปลี่ยน (รูป, CSS, JS) ถูกเก็บไว้ในเบราว์เซอร์ได้นาน
7. เลือกเทคโนโลยีที่เหมาะกับงาน
เว็บบริษัทหรือเว็บแนะนำบริการส่วนใหญ่ไม่จำเป็นต้องดึงข้อมูลจากฐานข้อมูลทุกครั้งที่มีคนเข้า การสร้างเป็น Static Site (สร้างหน้า HTML ไว้ล่วงหน้า) ด้วยเครื่องมืออย่าง Next.js ทำให้เว็บเร็วมาก ปลอดภัยกว่า และค่าโฮสติ้งถูกลง
สรุป
ความเร็วเว็บวัดผลได้ชัดเจน และแก้ได้เป็นขั้นตอน เริ่มจากตรวจด้วย PageSpeed Insights ดูว่าตัวชี้วัดไหนแดง แล้วไล่แก้จากเรื่องที่กระทบมากที่สุด ซึ่งส่วนใหญ่คือ รูปภาพ และ สคริปต์ที่ไม่จำเป็น
ถ้าอยากให้ทีม Codeza ช่วยตรวจและวางแผนปรับความเร็วเว็บ ปรึกษาเราได้ฟรี ครับ
- Web Performance
- Core Web Vitals
- SEO
