ความเร็วหน้าเว็บ · Core Web Vitals

เกณฑ์ Core Web Vitals กี่วินาที

เกณฑ์ที่ Google ถือว่า “ดี” คือ LCP ไม่เกิน 2.5 วินาที INP ไม่เกิน 200 มิลลิวินาที (0.2 วินาที) และ CLS ไม่เกิน 0.1 ต้อง “ดี” ครบทั้ง 3 ตัวชี้วัด จึงจะถือว่าหน้านั้นผ่าน Core Web Vitals

เกณฑ์ไม่ได้ดูจากการเข้าชมครั้งเดียว แต่ดูที่เปอร์เซ็นไทล์ที่ 75 ของการเข้าชม พูดง่าย ๆ คือ ในลูกค้า 100 คน ต้องมี 75 คนขึ้นไปที่ได้ความเร็วภายในเกณฑ์จึงจะ “ดี” มือถือกับคอมพิวเตอร์คำนวณแยกกัน

เดิมมีตัวชี้วัดชื่อ FID ที่วัดแค่การตอบสนองต่อการคลิกครั้งแรก แต่ตั้งแต่เดือน 3 ปี 2024 เปลี่ยนเป็น INP ที่ดูการตอบสนองต่อทุกการคลิก · แตะ ถ้าเห็นเกณฑ์ FID ในบทความเก่า ให้จำไว้ว่าต่างจากปัจจุบัน

วัดความเร็วเว็บไซต์ร้านเราด้วย PageSpeed Insights อย่างไร

แค่ใส่ที่อยู่ลงในเครื่องมือฟรีของ Google ชื่อ PageSpeed Insights ก็วัดได้ทันที หน้าผลลัพธ์แบ่งเป็น 2 ส่วน คือข้อมูลผู้เข้าชมจริง กับการวินิจฉัยที่เครื่องวัดซ้ำอีกครั้ง หัวใจสำคัญคืออ่านแยกสองส่วนนี้ออกจากกัน

1. 01เข้า pagespeed.web.dev ใส่ที่อยู่เว็บไซต์ร้าน แล้วกด “วิเคราะห์”
2. 02เมื่อผลออกมา ให้ดูแท็บ “อุปกรณ์เคลื่อนที่” ก่อน เพราะลูกค้าส่วนใหญ่เข้ามาด้วยมือถือ
3. 03ดูในส่วน “ประสบการณ์ของผู้ใช้จริง” ด้านบนว่า LCP · INP · CLS เป็น “ดี” หรือไม่ เป็นข้อมูลของผู้ใช้ Chrome ช่วง 28 วันล่าสุด จึงน่าเชื่อถือที่สุด
4. 04ถ้าผู้เข้าชมน้อย ข้อมูลจริงอาจขึ้นว่า “ไม่มีข้อมูล” กรณีนี้ให้ดูคะแนน “วินิจฉัยปัญหาประสิทธิภาพ” ด้านล่างแทน
5. 05แคปรายการแนะนำการปรับปรุงที่เกี่ยวกับรูปภาพ · JavaScript ใต้การวินิจฉัยไว้ จะขอบริษัทแก้ได้ตรงจุด
6. 06ไม่ใช่แค่หน้าแรก ลองวัดหน้าที่ลูกค้าดูบ่อยอย่างเมนู · การจอง · การเดินทางทีละหน้าด้วย

ทำไมคะแนน PageSpeed ถึงต่างกันทุกครั้งที่วัด

คะแนนวินิจฉัยด้านล่างคือค่าที่เซิร์ฟเวอร์ของ Google โหลดหน้านั้นใหม่และคำนวณในขณะนั้น จึงขึ้นลงหลายคะแนนตามสถานะเซิร์ฟเวอร์และเครือข่าย ควรดูแนวโน้มจากการวัดหลายครั้งมากกว่าตัวเลขจากการวัดครั้งเดียว

ถ้ามีโค้ดที่โหลดจากภายนอกอย่างโฆษณา · แชต · วิดเจ็ตรีวิว ผลจะแกว่งมากขึ้นตามสถานะเซิร์ฟเวอร์ฝั่งนั้น ถ้าคะแนนตกลงกะทันหัน ให้สงสัยโค้ดภายนอกที่เพิ่งติดตั้งก่อน

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

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

สาเหตุที่พบบ่อยที่ทำให้เว็บไซต์ช้าลงมีอะไรบ้าง

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

แต่ละสาเหตุทำให้ตัวชี้วัดคนละตัวแย่ลง รูปหลักที่หนักทำให้ LCP แย่ โค้ดภายนอกที่หนักทำให้ INP แย่ รูปที่ไม่ได้กำหนดขนาดและแบนเนอร์ที่ขึ้นช้าทำให้ CLS แย่

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

• อัปโหลดรูปต้นฉบับจากมือถือโดยไม่ย่อ
• วางวิดีโอเล่นอัตโนมัติหรือสไลด์ใหญ่ไว้ในหน้าจอแรก
• ติดวิดเจ็ตแชตปรึกษา · ฟีด Instagram · รีวิวไว้หลายตัว
• มีโค้ดติดตามที่ไม่ได้ใช้หรือโค้ดโฆษณาเก่าค้างอยู่
• โหลดฟอนต์หลายแบบ หรือใช้เซิร์ฟเวอร์ช้าที่อยู่ไกลจากลูกค้า

ฝากบริษัทปรับปรุงความเร็ว ควรขออะไร

แทนที่จะบอกว่า “ช่วยทำให้เร็วหน่อย” ควรตั้งเป้าหมายแล้วขอ เช่น “ทำให้ตัวชี้วัดนี้ของหน้านี้เป็นดี” จึงจะเปรียบเทียบก่อนและหลังทำได้ และมีเกณฑ์ตัดสินว่างานเสร็จแล้วหรือยัง

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

• รายการหน้าที่ต้องปรับและตัวชี้วัดเป้าหมาย (เช่น LCP บนมือถือของหน้าแรกเป็น “ดี”)
• ภาพแคปผล PageSpeed Insights ก่อนและหลังทำงาน
• รายการโค้ดภายนอก · วิดเจ็ตที่ติดอยู่ตอนนี้ พร้อมทำเครื่องหมายตัวที่จำเป็น
• เวลาอัปโหลดรูปใหม่ ย่อขนาดให้อัตโนมัติหรือไม่
• ระหว่างดูแลรักษา ถ้าความเร็วกลับมาแย่อีก ใครเป็นคนตรวจ เมื่อไร

เว็บไซต์ร้านเล็กดูแลเรื่องความเร็วอย่างไร

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

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

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

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