Core Web Vitals คืออะไร?​ เช็กคะแนน & ปรับเว็บให้ดี (ฟรี)

ช่วงไม่กี่ปีที่ผ่านมา Google หันมาให้ความสำคัญกับ User Experiences หรือประสบการณ์ของผู้ใช้งานเว็บไซต์มากขึ้นเรื่อยๆ และตัว Core Web Vitals ก็เป็นหนึ่งในปัจจัยในการจัดอันดับที่ Google เริ่มนำมาใช้อย่างจริงจัง ต่อจากเรื่องความเร็วของเว็บไซต์ และการใช้งานบนมือถือค่ะ วันนี้เราจะมาดูกันว่า Core Web Vitals คืออะไร แล้วเราจะปรับเว็บไซต์ให้ดีต่อการติดอันดับบน Google ได้ยังไงบ้าง?

Core Web Vitals คืออะไร?​

Core Web Vitals คือ ปัจจัยที่ Google ใช้เพื่อวัดมาตรฐานประสบการณ์การใช้งานเว็บไซต์​ หรือ คะแนนของ UX (User Experiences) โดย เป็นส่วนหนึ่งของการปรับปรุง Page Experiences หรือการใช้งานในเว็บทั้งหมดเลยค่ะ เช่นพวกความเร็วเว็บไซต์ (Pagespeed), การใช้งานบนมือถือ (Mobile-friendly), HTTPs หรือลงโทษเว็บที่ป๊อปอัปเยอะๆ (Intrusive Popup)

โดยจะจริงจังถึงขนาดอาจจะมีป้าย Label บน SERPs เลยว่าเว็บไหนผ่าน Core Web Vitals และเว็บไหนไม่ผ่านค่ะ ทาง Google จะเริ่ม Core Web Vitals ใช้อย่างเป็นทางการพฤษภาคม 2021 ดังนั้นสำหรับการทำ SEO แล้ว ตัว Core Web Vitals เป็นเรื่องที่เราไม่สนใจไม่ได้เลยค่ะ

ตัว Core Web Vitals นี้ประกอบไปด้วยสามปัจจัยย่อยก็คือ largest contentful paint, first input delay และ cumulative layout shift ค่ะ เดี๋ยวมาดูกันว่าแต่ละตัวหมายถึงอะไรบ้าง

Largest Contentful Paint (LCP) คืออะไร?

Largest Contentful Paint (LCP) คือการดูว่าเว็บเราโหลดเร็วหรือเปล่า โดยโฟกัสไปที่คอนเทนต์ที่มีขนาดใหญ่ที่สุดบนเว็บไซต์ของเราค่ะ เช่นถ้าเว็บเรามีแบนเนอร์ใหญ่ๆ หรือวิดีโออาจจะต้องใช้เวลาโหลดนาน มากกว่าตัวหนังสือ ตรงนี้ก็จะทำให้คะแนน LCP ของเราน้อยลงค่ะ

Cumulative Layout Shift (CLS) คืออะไร?

Cumulative Layout Shift (CLS) คือ ตัวที่ดูว่าเว็บเรากระตุก หรือเคลื่อนไหวมากแค่ไหนนั่นเองค่ะ เช่นบางทีเวลาเราโหลดเว็บอะไรในมือถือ แล้วกำลังจะกดปุ่ม แต่ปุ่มดันเลื่อนไปจนนิ้วไปโดนอย่างอื่น หรือเวลาเข้าเว็บแล้วรูปสั่นๆ แบบนี้ก็คือว่ามีการขยับและกระตุกเยอะค่ะ ดังนั้นเราเลยควรพยายามให้เว็บเราซ่าแต่แบบสั่นๆ น้อยที่สุด

จากตัวอย่างด้านล่างจะเห็นว่าหน้าหลักของเมมีรูป แต่ตอนแรกไม่โหลด มันเลยขึ้นตัวหนังสือมา เสร็จแล้วพอรูปขึ้น มันดันตัวหนังสือลงไป ถ้าจ้องอยู่จะเห็นหน้าเว็บขยับค่อนข้างเยอะ คะแนน CLS เลยไม่ดี ถึงคะแนน Speed Score รวมๆ จะดีก็ตามค่ะ

First Input Delay (FID) คืออะไร?

First Input Delay (FID) คือการวัดความเร็วของเว็บไซต์ของเรา เวลาที่ผู้ใช้งานทำ action อะไรบางอย่างค่ะ เช่น หลังจากกดเมนูแล้วหน้าต่อไปโหลดเร็วมั้ย หลังจากกดปุ่มแล้วตอบสนองเร็วมั้ย แบบนี้ค่ะ เพราะว่าถ้าสมมติเรากดอะไรสักอย่างแล้วมันโหลดนานๆ เราก็คงกดย้ำๆ ซ้ำๆ แบบงงๆ ใช่มั้ยคะว่าที่กดไปเมื่อกี้มันติดหรือเปล่า ทาง Google เลยเอามาเป็นปัจจัยในการจัดอันดับด้วยค่ะ

วิธีการเช็ก Core Web Vitals ของตัวเอง

วิธีเช็ก Core Web Vitals แบบฟรีๆ สามารถทำได้สองวิธีค่ะ ซึ่งก็คือการเช็กด้วย Google PageSpeed Insights และ Google Search Console ค่ะ

ดูคะแนน Core Web Vitals ด้วย Google PageSpeed Insights

PageSpeed Insights เป็นเครื่องมือของ Google ที่ไว้ให้เราสามารถใช้เช็กข้อมูลทางด้านความเร็วและ Performance ของเว็บเราเองได้แบบฟรีๆ ค่ะ วิธีการก็ง่ายมากๆ แค่ไปที่ https://developers.google.com/speed/pagespeed/insights/ แล้วใส่หน้าเว็บของเราที่ต้องการเช็กลงไป แล้วกด Analyze ค่ะ

วิธีการอ่านข้อมูลบน Google PageSpeed Insights

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

ส่วนด้านล่างที่มีคะแนน จะเห็นได้ว่าคะแนน Core Web Vitals จะมีป้ายสีน้ำเงินแปะอยู่ค่ะ ซึ่งคะแนนทั้งหมดนี้ไม่ต้องถึงขนาดเขียวหมดก็ได้ แต่ถ้าเป็นสีแดงคือต้องเริ่มดำเนินการแก้ไขแล้วค่ะ

ถ้าเว็บไซต์ที่มีข้อมูลเยอะๆ จะเห็นได้ว่าหลังจากการทดสอบ จะมีคะแนนขึ้นมาสามช่องตามนี้ค่ะ

• Field Data คือข้อมูลจากผู้ใช้งานจริงของหน้าที่เรากำลังเทส ที่ Google เก็บข้อมูลเอาไว้ย้อนหลัง 28 วัน ตัวนี้จะมีข้อมูล Core Web Vitals ครบทั้งสามตัว แต่ว่าข้อมูลอื่นๆ จะน้อยกว่า Lab Data ค่ะ
• Origin Summary คือข้อมูลของเว็บไซต์จากการใช้งานจริงย้อนหลัง เหมือนกับ Field Data แต่เป็นข้อมูลของทั้งเว็บ รวมทุกหน้า
• Lab Data คือการทดสอบใน controlled environment เหมือนห้องแลปที่ Google สร้างขึ้นมา ใช้ Debug ได้ ทดสอบผลได้เร็ว เพราะถ้าเราปรับเว็บตรงไหน ก็จะเห็นผลได้ทันที ไม่ต้องรอข้อมูลอีก 28 วันค่ะ ดังนั้นสามารถใช้คะแนนอันนี้เป็นหลักได้ แต่จะไม่มีข้อมูล First Input Delay (FID) ค่ะ

ดูคะแนน Core Web Vitals ด้วย Google Search Console

Google Search Console เป็นเครื่องมือที่ทุกคนสามารถติดตั้งให้กับเว็บไซต์ของตัวเองได้แบบฟรีๆ เหมือนกับ Google Analytics เลยค่ะ ถ้าใครยังไม่มี ดูวิธีการติดตั้งได้ที่นี่ในหัวข้อ วิธีการติดตั้ง Google Search Console ค่ะ

ถ้าใครติดตั้งไว้อยู่แล้ว ให้ไปที่ Search Console แล้วหาเมนู Core Web Vitals ทางซ้ายมือนะคะ พอกดเสร็จแล้ว จะมีข้อมูลของเว็บเราขึ้นมาทั้ง Mobile และ Desktop ให้เราโฟกัสที่ Mobile เป็นหลักค่ะ ตรงนี้คือไม่ต้องเขียวก็ได้ แค่อย่าแดงก็พอนะคะ ถ้าเราอยากรู้ข้อมูลเพิ่ม ก็ให้เกิด Open Report ทางด้านบนขวามือ แล้วก็จะมีรายงานอย่างละเอียดว่าแต่ละ URL ของเรามีปัญหาตรงไหนบ้างค่ะ ตัวนี้จะดูได้ทุกหน้าพร้อมกันเลย ไม่ต้องไล่เช็กทีละหน้าค่ะ

วิธีการปรับเว็บไซต์ให้คะแนน Core Web Vitals ดีขึ้น

ปกติแล้วเวลาเราเช็กข้อมูลบน Google PageSpeed Insights แล้ว ทาง Google ก็จะมีคำอธิบายมาช่วยด้านล่างค่ะ ว่าต้องปรับเว็บยังไงบ้าง ซึ่งเป็นคำอธิบายแบบรวมๆ ไม่ได้เจาะจงไปที่ปัจจัยใดปัจจัยหนึ่ง แต่ทาง Google ก็ได้ให้ Best Practice กับเราไว้เหมือนกันค่ะ ว่าต้องทำยังไงเพื่อให้คะแนน Core Web Vitals ของเราดี บางอันอาจจะ Technical หน่อย ยังไงลองปรึกษาทีมโปรแกรมเมอร์ดูนะคะ 🙂

• เอาโค้ดที่ไม่จำเป็นออก ทำได้ง่ายๆ ด้วยการไป Deactivate/Delete Plugins บน WordPress ที่เราไม่ได้ใช้ค่ะ
• เลือก Host ที่ดี เลือกโฮสที่โหลดเร็ว มีชัยไปกว่าครึ่งค่ะ
• Lazy Load การตั้ง Lazy Load คือการทำให้รูปโหลดขึ้นมาเมื่อต้องใช้เท่านั้น แล้วมันจะค่อยๆ โหลดขึ้นมาจนสมบูรณ์เองค่ะ อันนี้สามารถใช้ Plugin ช่วยได้ เช่น Shortpixel หรือ WP Rocket ค่ะ

• เอาคอนเทนต์ที่ขนาดใหญ่มากๆ ออก เช่นวิดีโอ หรือรูปภาพที่หนักๆ
• ลดขนาด (Compress) รูปภาพก่อนลง ตัวนี้เมใช้ Plugin Imagify อยู่ค่ะ แต่ถึงจะไม่ได้ใช้ WordPress ก็สามารถเอารูปไปลดขนาดในเว็บนี้ แล้วค่อยเอาไปใช้งานต่อได้ค่ะ
• Minify your CSS/Javascript ตัวนี้เมใช้ปลั๊กอิน WP Rocket ทำค่ะ ถ้ายังไงอาจจะลองปรึกษาโปรแกรมเมอร์ให้ช่วยดูได้นะคะ
• ใช้ Cache การเก็บแคชคือเก็บข้อมูลการใช้งานเว็บเอาไว้ ถ้าคนเคยเข้าแล้วมาใหม่ก็ไม่ต้องโหลดใหม่อีกค่ะ ปลั๊กอินที่ช่วยในการ Cache มีเยอะมากๆ WP Rocket ก็ได้ หรือจะใช้ LiteSpeed Cache หรือ W3 Total Cache ก็นิยมใช้กันค่ะ
• กำหนด attribute dimensions ไว้เลย การทำแบบนี้จะช่วยให้หน้าจอไม่เลื่อนไปมา เพราะรู้อยู่แล้วว่าต้องเก็บพื้นที่ให้กับรูปภาพขนาดเท่าไหร่ค่ะ

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

ใครอยากเรียน SEO เพิ่มเติม ตอนนี้เมมีคอร์สอยู่ ดูรายละเอียดเพิ่มเติมได้ที่นี่ หรือติดตามกันได้ใน Facebook นะคะ