Core Web Vitals รู้จัก เข้าใจ ปรับเองได้ แม้โค้ดไม่เป็น (2024)

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

Core Web Vitals คือมาตรฐานที่ Google ใช้วัดประสบการณ์การใช้งานเว็บไซต์ หรือ UX (User Experiences) เพื่อให้คนใช้เว็บเราได้ลื่นและดีที่สุด นอกจากจะเป็นตัวช่วยจัดอันดับผลการค้นหาแล้ว คะแนน Core Web Vitals ที่ดียังส่งผลต่อธุรกิจ ช่วยให้ใช้เว็บเรานานขึ้น เพิ่มรายได้ให้เว็บได้มากขึ้นด้วย เพราะใครเจอเว็บช้าเข้าไป ก็หนีออกไปเว็บอื่นหมด

Core Web Vitals มีอะไรบ้าง?

ล่าสุดในปี 2024 Core Web Vitals ประกอบไปด้วยปัจจัยสามตัวคือ

• LCP – Largest Contentful Paint (วัดความเร็วในการโหลด)
• CLS – Cumulative Layout Shift (วัดความเสถียร)
• INP – Interaction to Next Paint (วัดความเร็วในการตอบสนอง)

ส่วนตัว First Input Delay (วัดความเร็วในการตอบสนองครั้งแรก) ที่เคยใช้นั้น ยังเช็คคะแนนได้อยู่ แต่เอาออกจากตัวหลักไปแล้ว และใช้ INP แทน เริ่มต้นในปี 2024

วิธีการเช็กคะแนน Core Web Vitals

1. PageSpeed Insights เช็ค Core Web Vitals ง่าย ได้ทุกเว็บ

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

• เขียว (Passed) คือดี ถ้ามีปัญหา จะขึ้นแดง (Failed)
• เลือกดูได้ทั้ง Mobile (มือถือ) และ Desktop (คอม)
• ตัวนี้เก็บข้อมูลจาก 75% ของคนเข้าเว็บจริง ย้อนหลัง 28 วัน
• ดูได้ทั้ง This URL หรือ Origin (ทั้งเว็บ)
• ถ้าคนเข้าเว็บน้อยอยู่ ก็อาจจะไม่มีข้อมูลขึ้น เพราะยังคนเข้าไม่พอที่จะวัดค่าได้ค่ะ

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

คลิกดูวิธีการใช้และติดตั้ง Google Search Console ได้ที่นี่ ในภาพรวมระยะยาว เราดูแค่ที่นี่ก็พอ ละเอียดและง่ายกว่า

เมนู Page Experiences เห็นภาพรวมประสบการณ์ใช้งานของทั้งเว็บเรา

เมนู Core Web Vitals ดูได้ทั้งมือถือและคอม

• คลิก Open Report ไปดูละเอียดเพิ่มได้ด้วย
• กด Open Report ดูละเอียดได้เลย

แก้ Core Web Vitals แบบง่าย ไม่ต้องแก้โค้ด

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

สำหรับคนที่ใช้ WordPress มีปลั๊กอินที่ใช้แก้เรื่องความเร็วเว็บและ Core Web Vitals ได้หลายตัวเลย เมลองใช้แล้ว ตัวฟรีบางทีมีปัญหาเว็บพัง ก็เลยมาจบที่ WP Rocket ทั้งเว็บเมและลูกค้า หมดปัญหาเลย

คลิกสมัครที่ลิงก์นี้ได้ลด 20% (และเมจะได้ใช้ฟรี 2 เดือนค่ะ -/\-) นี่ใช้มา 3 ปีแล้ว ดีจริงๆ ไม่ยุ่งยาก ทีเดียวจบ

คลิกดูการตั้งค่า WP Rocket ของเมได้ที่นี่ เป็นโบนัสแถมให้เพิ่มค่ะ :))

วิธีการปรับ Core Web Vitals เพิ่มเติม แบบเทคๆ หน่อย

บางตัวอาจฟังดูยาก ยังไงลองปรึกษาทีมโปรแกรมเมอร์ดูนะคะ 🙂

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

แวะคลิกดูคอร์สเรียน SEO จริงจัง มีที่มาที่ไปทุกอย่าง ถูกหลัก 100% สอนมาแล้ว 1000+ คน

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

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

แบบทางการ Google บอกว่า Page Experiences จะใช้ตัดสินก็ต่อเมื่อคอนเทนต์คุณภาพใกล้ๆ กัน เว็บที่เร็วกว่าและประสบการณ์การใช้งานดีกว่า ก็อาจจะชนะไปค่ะ ส่วน WIX ได้ทดลองไว้ แล้วพบว่า คะแนน Core Web Vitals เพิ่มนั้น ช่วยเพิ่มลูกค้าใหม่ได้ 32% เลย ดังนั้นมีโอกาสมากๆ ถ้า Core Web Vitals ดี ก็จะส่งผลดีกับเว็บเราไปหมด

รู้จักกับ Core Web Vitals แต่ละตัว แบบละเอียด

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

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

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

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

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

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

Interaction to Next Paint (INP) คืออะไร?

ดูว่าหลังจากคนทำ Actions เช่นการเลื่อน กด คลิก ฯลฯ แล้วเว็บเราตอบสนองเร็วพอหรือเปล่า ตลอดการใช้งาน โดยดูจาก Action ที่ใช้เวลาตอบสนองมากที่สุดค่ะ INP ตัวนี้ใหม่ล่าสุดเลย หลังจากเทสมานาน

เขียวคือ 0.2 วิ, เหลืองคือ 0.2-0.5 วิ, ถ้าเกินครึ่งวินาที จะแดง = ต้องแก้ ไม่มีใครชอบคลิกแล้วรอนานๆ หรอกเนอะ

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

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

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

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

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