Core Web Vitals คืออะไร?​ เข้าใจปัจจัย SEO ตัวใหม่ พร้อมวิธีปรับเว็บ 2023

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

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

Core Web Vitals คือมาตรฐานที่ Google นำมาใช้วัดประสบการณ์การใช้งานเว็บไซต์ หรือ UX (User Experiences) ซึ่งถูกใช้เป็นหนึ่งในปัจจัยการจัดอันดับ SEO โดย Core Web Vitals ประกอบไปด้วยปัจจัยสามตัวคือ Largest Contentful Paint (วัดความเร็วในการโหลด), First Input Delay (วัดความเร็วในการตอบสนอง) และ Cumulative Layout Shift (วัดความเสถียร)

Page Experiences จาก Google มีอะไรบ้าง?

Google จัดให้ Core Web Vitals เป็นส่วนหนึ่งของ Page Experiences หรือมาตราฐานประสบการณ์ในการการใช้งานในเว็บทั้งหมดเลยค่ะ ใน Page Experiences ก็จะประกอบไปด้วย

• Core Web Vitals: Largest Contentful Paint (LCP)
• Core Web Vitals: Cumulative Layout Shift (CLS)
• Core Web Vitals: First Input Delay (FID)
• HTTPS Security การติด SSL บนเว็บ
• Absence of intrusive interstitials พวกแบนเนอร์ ป็อปอัปต่างๆ ที่บังคอนเทนต์หลัก
• Mobile friendliness วัดประสบการณ์ใช้งานบนมือถือ

ตอนแรกมีรวมเรื่อง Safe Browsing หรือการใช้งานเว็บอย่างปลอดภัยด้วย แต่ตอนนี้เอาออกไปแล้วค่ะ

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

เริ่มใช้ Core Web Vitals เป็นปัจจัยการจัดอันดับ SEO ตั้งแต่เมื่อไหร่?

Google เริ่มใช้ Core Web Vitals เป็นปัจจัยในการจัดอันดับ SEO บนมือถือตั้งแต่ 16 มิถุนายน 2021 และเริ่มใช้ Core Web Vitals เป็นปัจจัยจัดอันดับบน Desktop ในเดือนกุมภาพันธ์ 2022 ค่ะ

Core Web Vitals กระทบกับ SEO มากแค่ไหน?

Google บอกว่า Page Experiences จะใช้ตัดสินก็ต่อเมื่อคอนเทนต์คุณภาพใกล้ๆ กัน เว็บที่เร็วกว่าและประสบการณ์การใช้งานดีกว่า ก็อาจจะชนะไปค่ะ เรียกกันว่าเป็น “Metrics เจาะยาง” คือถ้าคะแนนไม่ดี รถยนต์ก็ยังวิ่งได้ แต่จะหน่วงๆ ช้าๆ เหมือนรถยนต์ยางแบนค่ะ อันดับเราก็จะขึ้นแบบหน่วงๆ หน่อยนั่นเอง หรือ John Mueller จาก Google ก็บอกไว้ ว่ามันจะฟิลเหมือนติดๆ หน่วงๆ เหมือนเวลาเราบีบให้กราฟมันเตี้ย จะขึ้นก็ขึ้นได้ไม่สุดค่ะ

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

สำหรับการทำ SEO แล้ว เราก็ควรจะทำเว็บไซต์ให้ดีที่สุดในทุกๆ ด้าน เพื่อช่วยให้คอนเทนต์ที่ดีของเรา ได้ Performance ที่ดีขึ้นไปอีก ตัว Core Web Vitals เป็นเรื่องอีกหนึ่งเรื่องที่เราไม่สนใจไม่ได้เลยค่ะ โดยตัว Core Web Vitals นี้ประกอบไปด้วยสามปัจจัยย่อยก็คือ Largest Contentful Paint, First Input Delay และ Cumulative Layout Shift ค่ะ เดี๋ยวมาดูกันว่าแต่ละตัวหมายถึงอะไรบ้าง

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

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

มาตราฐานของ Google สำหรับ LCP

ตัวนี้ Google อยากให้คอนเทนต์ที่ใหญ่ที่สุด ใช้เวลาโหลดไม่เกิน 2.5 วินาทีค่ะ หรือถ้าเกิน 4 วินาทีไปก็คือจะกลายเป็นสีแดง คือแย่ที่สุดเลย

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

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

มาตราฐานของ Google สำหรับ CLS

ตัวนี้จะคำนวณซับซ้อนนิดนึงค่ะ ไม่ได้เป็นวินาทีเหมือนตัวอื่นๆ แต่จะดูว่าขนาดของ element ที่มีการขยับนั้นใหญ่แค่ไหน แล้วขยับไปไกลมากแค่ไหนค่ะ โดยคะแนนไม่ควรจะเกิน 0.1 หรือสุดๆ คือไม่เกิน 0.25 ค่ะ

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

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

มาตราฐานของ Google สำหรับ FID

ตัว FID เราจะดูว่าหลังจากกดหรือ action แล้ว การตอบสนองของเว็บเราเร็วแค่ไหนค่ะ ซึ่งการตอบสนองไม่ควรใช้เวลาเกิน 0.1 วินาที หรือสุดๆ ก็ 0.3 วินาที ซึ่งอันนี้ไม่นับการตอบสนองกับการซูม หรือ scroll เลื่อนจอค่ะ

อะไรคือสาเหตุของการดีเลย์ใน FID?

หน้าเว็บเราตอบสนองช้าหรือเกิดการดีเลย์จน FID ไม่ดี เพราะว่า JavaScript ต้องแข่งเพื่อให้ตัวเองอยู่ใน main thread เหมือน tasks แต่ละตัวมันต้องรอคิวเพื่อที่จะให้ถึงคิวทำงานของตัวเองจนหมด แต่ระหว่างที่ tasks ยังรันอยู่หน้าเว็บก็จะไม่ต้องสนองกับผู้ใช้ค่ะ ก็จะนิ่งๆ ไป กดอะไรก็ไม่ติด ถ้าเราแบ่ง tasks ออกเป็นย่อยๆ หน้าเว็บก็จะถือโอกาสใช้เวลาระหว่าง ​tasks ไปตอบสนองผู้ใช้ก่อน แล้วค่อยกลับมาทำงานของตัวเองต่อ

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

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

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

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

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

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

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

คะแนน Core Web Vitals เป็นเส้นๆ เพราะเค้าจะให้คะแนนแบบ 75th percentile ค่ะ สมมติจากที่คนเข้าเว็บทั้งหมด 100 ครั้ง 70 ครั้ง เราทำคะแนนได้ดีในเกณฑ์สีเขียว แต่อีก 30 ครั้งเป็นสีแดง คะแนน Core Web Vitals ของเราที่จุด 75% ก็จะแดงไปด้วย เพราะ Google อยากรู้ว่าคนเข้าเว็บเราส่วนใหญ่ 3 ใน 4 นี้ ได้รับประสบการณ์ใช้งานที่ดีมากแค่ไหน ไม่ได้ดูเป็นคนๆ ไปค่ะ จากภาพตัวอย่างจะเห็นได้ว่าเส้น CLS ส่วนใหญ่ก็เป็นสีเขียว คือคนเข้าเว็บส่วนใหญ่ก็โหลดเร็วดี แต่ยังมีมากพอสมควรที่แดง แถมมีเหลืองอีกนิดหน่อย คะแนน CLS ในภาพเลยแดง สรุปออกมาว่า Failed ในวงกลมด้านบนค่ะ

คะแนนนี้เก็บ 28 วันย้อนหลัง จากการใช้งานเว็บจริงเลย ด้วย Chrome UX Report

นอกจากนี้ จะเห็นว่าเหนือ URLs จะมีสองตัวเลือกคือ This URL กับ Origin ข้อแตกต่างก็คือ This URL คือคะแนนของหน้าเว็บที่เรากำลังเช็ก ส่วน Origin คือคะแนนของทุกหน้าในเว็บเราแบบรวมๆ ค่ะ ดังนั้นถ้าเราเอาหน้าเว็บของเราที่คนเข้าน้อยๆ ไปเช็ก อาจจะมีข้อมูลไม่พอจนไม่เห็นข้อมูลใน This URLs (หมายความว่า Google ก็ไม่มีข้อมูลเหมือนกัน) แต่อย่างน้อยก็จะเห็นข้อมูลใน Origin ค่ะ (ซึ่ง Google ก็ใช้ตัวคะแนนของหน้าเว็บที่ใกล้เคียงในเว็บเรามาตัดสินใจแทน เมื่อหน้านั้นๆ เองมีข้อมูลไม่พอค่ะ)

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

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

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

พอเข้ามาดูที่เมนู Core Web Vitals แล้ว ก็จะเห็นข้อมูลแบบนี้ค่ะ ตรงนี้คือไม่ต้องเขียวก็ได้ แค่อย่าแดงก็พอนะคะ ถ้าเราอยากรู้ข้อมูลเพิ่ม ก็สามารถคลิกเข้าไปดูในแต่ละ Status ด้านล่างได้ แล้วก็จะมีรายงานอย่างละเอียดว่าแต่ละ URL ของเรามีปัญหาตรงไหนบ้างค่ะ ดูข้อมูลโดยรวมของทั้งเว็บได้ละเอียดสุดๆ

จากนั้นเราสามารถกดเข้ามาดูทีละปัญหาได้ อย่างในภาพด้านล่างเมกดเข้ามาดู CLS มันก็จะบอกเลยว่า URL ไหนบ้างที่มีปัญหา พอแก้เสร็จแล้วก็มากด Validate Fix เพื่อให้ Google เข้ามาเก็บข้อมูลใหม่ค่ะ :))

วิธีการปรับเว็บไซต์ให้คะแนน 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 ก็สามารถเอารูปไปลดขนาดในเว็บนี้ แล้วค่อยเอาไปใช้งานต่อได้ค่ะ ตัว Shortpixel ก็ทำได้ แต่เมเคยลองแล้วมีปัญหาการแสดงผลรูปอยู่บ้าง เลยชอบทาง Imagify มากกว่าค่ะ
• Minify your CSS/Javascript ตัวนี้เมใช้ปลั๊กอิน WP Rocket ทำค่ะ ถ้ายังไงอาจจะลองปรึกษาโปรแกรมเมอร์ให้ช่วยดูได้นะคะ
• ใช้ Cache การเก็บแคชคือเก็บข้อมูลการใช้งานเว็บเอาไว้ ถ้าคนเคยเข้าแล้วมาใหม่ก็ไม่ต้องโหลดใหม่อีกค่ะ ปลั๊กอินที่ช่วยในการ Cache มีเยอะมากๆ WP Rocket ก็ได้ หรือจะใช้ LiteSpeed Cache หรือ W3 Total Cache ก็นิยมใช้กันค่ะ
• กำหนด attribute dimensions ไว้เลย การทำแบบนี้จะช่วยให้หน้าจอไม่เลื่อนไปมา เพราะรู้อยู่แล้วว่าต้องเก็บพื้นที่ให้กับรูปภาพขนาดเท่าไหร่ค่ะ

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

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