ความเร็วเว็บ

เว็บช้าแค่ไหนถึงเรียกว่าช้า: วัดด้วย Core Web Vitals

Google มีตัววัดมาตรฐาน 3 ตัวที่ใช้ตัดสินว่าเว็บใช้งานดีหรือไม่ เข้าใจ 3 ตัวนี้ แล้วจะรู้ทันทีว่าเว็บช้าตรงไหน

โดยทีม webpangอ่าน 6 นาที
หน้าปัด LCP INP และ CLS แบ่งโซนดี ควรปรับปรุง และแย่

Core Web Vitals คืออะไร

เป็นตัวชี้วัด 3 ตัวที่ Google ใช้ดูว่าคนใช้เว็บจริง ๆ แล้วรู้สึกยังไง ตั้งแต่ปี 2024 ตัวที่วัดการตอบสนองเปลี่ยนจาก FID เป็น INP ซึ่งวัดทุกครั้งที่ผู้ใช้กด ไม่ใช่แค่ครั้งแรก เลยมีเว็บสอบไม่ผ่านมากขึ้น

ตัววัดวัดอะไรดีแย่
LCPนานแค่ไหนกว่าเนื้อหาหลัก เช่น รูปใหญ่ หรือหัวข้อ จะขึ้นครบ≤ 2.5 วินาที> 4 วินาที
INPกดปุ่มแล้วหน้าจอตอบสนองไวแค่ไหน≤ 200 มิลลิวินาที> 500 มิลลิวินาที
CLSหน้าเว็บกระโดดไปมาระหว่างโหลดมากแค่ไหน≤ 0.1> 0.25

Google ดูที่ผู้เข้าชม 75% ของทั้งหมด หมายความว่าต้องมีผู้เข้าชมอย่างน้อย 3 ใน 4 ที่ได้ค่า "ดี" ทั้ง 3 ตัว ถึงจะนับว่าผ่าน

LCP วัดตอนที่เนื้อหาหลักของหน้า เช่น รูปใหญ่ ขึ้นครบ ในภาพนี้ขึ้นที่ 2.1 วินาที จึงอยู่ในโซนดี
LCP วัดตอนที่เนื้อหาหลักของหน้า เช่น รูปใหญ่ ขึ้นครบ ในภาพนี้ขึ้นที่ 2.1 วินาที จึงอยู่ในโซนดี

วัดเว็บตัวเองฟรี

  1. เข้า PageSpeed Insights ของ Google แล้ววางลิงก์เว็บ
  2. ดูส่วนบนก่อน ถ้ามีข้อมูลจากผู้ใช้จริง จะบอกว่าผ่านหรือไม่ผ่าน
  3. ถ้าเว็บยังมีคนเข้าน้อย จะเห็นแค่ผลทดสอบจำลอง ใช้ดูทิศทางได้ แต่ไม่ใช่คะแนนจริงที่ Google ใช้
  4. ทดสอบแบบมือถือเป็นหลัก เพราะลูกค้าส่วนใหญ่ใช้มือถือ

สาเหตุที่เว็บร้านค้าช้าบ่อยที่สุด

รูปใหญ่เกินจำเป็น ทำให้ LCP แย่

แบบที่ควรเลี่ยงอัปโหลดรูปจากกล้องขนาด 4000 พิกเซล ไฟล์ 5 MB แต่แสดงจริงแค่กว้าง 800 พิกเซล
แบบที่ควรทำย่อรูปให้พอดีขนาดที่แสดง ใช้ WebP หรือ AVIF และกำหนดให้รูปแรกของหน้าโหลดก่อน

ปลั๊กอินและสคริปต์เยอะเกิน ทำให้ INP แย่

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

ไม่จองพื้นที่ให้รูปและโฆษณา ทำให้ CLS แย่

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

เว็บ 3D จะช้าไหม

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

อยากให้เราดูเว็บของคุณ

ส่งลิงก์เว็บมาให้ webpang ตรวจฟรี เราจะบอกว่าตรงไหนควรแก้ก่อน พร้อมราคา ตอบกลับภายใน 24 ชั่วโมง

แหล่งข้อมูล