การคอยติดตามนโยบายใหม่ๆ ของ Google และคอยอัปเดตเทรนด์ SEO ให้เป็นปัจจุบัน ถือเป็นหน้าที่ของคนทำเว็บไซต์ และ SEO Specialist ใน [บริษัทรับทำ SEO](https://nerdoptimize.com/seo/seo-agency-thailand/) ที่ต้องทำอยู่เป็นประจำเลยก็ว่าได้ครับ เพราะในปีปีหนึ่ง Google มักทำการอัปเดตนโยบายใหม่ๆ อยู่เสมอ ซึ่งการปรับเปลี่ยนแต่ละทีคนทำเว็บไซต์เองก็ต้องปรับรูปแบบการทำงานให้สอดคล้องตามไปด้วย หากยังไม่เข้าใจว่า [SEO คือ](https://nerdoptimize.com/seo/what-is-seo/)อะไร สามารถเข้ามาอ่านได้เพิ่มเติมได้ครับ อย่างล่าสุดที่ Google [ประกาศใช้เครื่องมือใหม่ในการจัดอันดับการค้นหา ที่จะมุ่งเน้นไปที่เรื่องของ Page Experience มากขึ้นกว่าเดิมในชื่อที่เรียกกันว่า “Core Web Vitals”](https://developers.google.com/search/blog/2020/11/timing-for-page-experience) เป็นเครื่องมือใหม่ของ Google ที่น่าสนใจมากว่า คืออะไร สำคัญยังไง แล้วเราจะปรับเว็บไซต์ให้ติดอันดับบน Google ได้ยังไง…วันนี้ผมหาคำตอบมาฝากกันแล้วครับ เลือกอ่านตามหัวข้อ - [Core Web Vitals คืออะไร](#core-web-vitals-) - [3 องค์ประกอบของ Core Web Vitals](#3--core-web-vitals) - [Supplemental Vitals หรือปัจจัยรองอื่น ๆ](#supplemental-vitals--) - [วิธีตรวจสอบ Core Web Vitals แบบฟรี ๆ](#-core-web-vitals--) - [สรุป](#hd-69f60aaaef849) ## Core Web Vitals คืออะไร Core Web Vitals คือปัจจัยที่ Google คิดขึ้นมาเพื่อจัดอันดับของเว็บไซต์ที่มีอยู่ทั้งหมด โดยเน้นให้ความสำคัญและมองว่าส่งผลต่อประสบการณ์การใช้งานบนเว็บไซต์ของผู้คน (User) เป็นหลัก หรือเรียกง่ายๆ ว่าการให้คะแนน UX สำหรับเว็บไซต์นั่นเองครับ ซึ่งเครื่องมือนี้จะเป็นหนึ่งในมาตรฐานของ Web Vitals ที่ช่วยทำให้เราปรับปรุงเว็บไซต์ให้โดนใจ Google ได้มากขึ้น และจะส่งผลต่อการพิจารณา ในการจัดอันดับผลการค้นหา ทั้งบน Mobile และ Desktop หากเว็บไซต์ไหนสามารถมอบประสบการณ์การใช้งานที่ดีกว่าได้ตามข้อกำหนดก็จะได้รับการจัดอันดับที่ดีกว่าคู่แข่ง ดังนั้น หากใครที่จ้าง[รับทำเว็บไซต์ WordPress](https://nerdoptimize.com/wordpress/) หรือใครที่อยากทำให้เว็บไซต์ของตัวเองได้รับคะแนนดีๆ จาก Google ละก็…อย่าพลาดในการเก็บปัจจัยที่ทำการเพิ่มมาใหม่นี้ให้ครบ เพื่อการจัดอันดับที่ดีขึ้นในอนาคตด้วยนะครับ ## 3 องค์ประกอบของ Core Web Vitals Core Web Vitals จะประกอบไปด้วย 3 เกณฑ์หลักที่ถูกเพิ่มเข้ามาในหมวด Page Experience หรือการสร้างประสบการณ์ที่ดีในการใช้งานเว็บไซต์ แบ่งเป็นเรื่องของความเร็วในการดาวน์โหลดคอนเทนต์, การตอบสนองของเว็บไซต์ และความเสถียรของดีไซน์ในเว็บไซต์ ดังนี้ - Largest Contentful Paint (LCP) - First Input Delay (FID) - Cumulative Layout Shift (CLS) ### Largest Contentful Paint (LCP) Largest Contentful Paint (LCP) คือ คะแนนวัดค่าความเร็วในการดาวน์โหลดหน้าเว็บไซต์ โดยวัดจากการดาวน์โหลดคอนเทนต์ที่ใหญ่ที่สุดในหน้าเพจนั้น เช่น รูปภาพ วิดีโอ Pop-up หรือแบนเนอร์ ว่าใช้เวลาในการแสดงผลนานแค่ไหน ซึ่งค่า LCP จะนับจากองค์ประกอบแต่ละส่วน ไม่ใช่ทั้งเว็บไซต์ เนื่องจากองค์ประกอบต่างๆ ในหน้านั้นจะถูกแบ่งการโหลดออกเป็นช่วงๆ ดังนั้น เวลาโหลดหน้าเว็บไซต์หนึ่งครั้ง อาจจะมีหลายองค์ประกอบที่นับเป็น LCP ได้ เช่น Heading, รูปภาพ, วิดีโอ เป็นต้น ตามตัวอย่างกรอบสีเขียวในรูปภาพด้านล่างนี้ครับ ซึ่งถ้าหากเว็บไซต์โหลดช้า คะแนนส่วนนี้ของเว็บไซต์ก็จะลดลง ดังนั้น จึงควรทำให้อยู่ในมาตรฐานที่ Google มองว่าดี ก็คือ ควรใช้เวลาโหลดไม่เกิน 2.5 วินาที เมื่อหน้าเพจกำลังโหลดครับ #### วิธีปรับปรุงค่า LCP หากคุณอยากได้คะแนนในส่วนนี้ แนะนำให้หลีกเลี่ยงการใช้ไฟล์ที่มีความละเอียดเกินความจำเป็นอย่างเช่น .png, วิดีโอ แบบ Autoplay รวมถึงการย่อไฟล์ให้มีขนาดเล็กลงและทำการเซฟไฟล์ภาพเป็นนามสกุล .webp ก็จะช่วยทำให้เว็บไซต์โหลดเร็วขึ้นได้ครับ นอกจากนี้คุณยังสามารถแก้ไขได้ด้วยการลบ Script ฟังก์ชันต่างๆ จาก Third-party และทำการประเพิ่มประสิทธิภาพให้กับ Server โดยการเช่าโฮสที่มีความเร็วในการดาวน์โหลดสูงขึ้นได้อีกด้วย ### First Input Delay (FID) First Input Delay (FID) คือ การวัดผลความหน่วง ระยะความเร็วในการตอบสนองของเว็บไซต์ เช่น เมื่อทำการคลิกแล้ว เว็บไซต์ตอบสนองเร็วแค่ไหน กระตุกหรือไม่ เวลาเลื่อน Scroll เมาส์แล้วกำลังจะกดปุ่ม แต่ดันกดไปโดนอย่างอื่นแทน รวมถึงการซูมเข้า-ออกมีอาการแปลกๆ หรือเปล่า หากเกิดเหตุการณ์นี้แสดงว่าเว็บไซต์กำลัง Delay ซึ่งมีผลทำให้ประสบการณ์การใช้งานของ User แย่ลงตามไปด้วย ดังนั้น ควรมีค่า FID ในการโหลดโดยใช้ระยะเวลาน้อยกว่า 100 มิลลิวินาที #### วิธีปรับปรุงค่า FID การที่เว็บไซต์มีอาการตอบสนองช้าส่วนใหญ่เกิดมาจากการที่ JavaScript ประมวลผลหนักเกินไป ใครที่ใช้ WordPress อยู่แนะนำให้ทำการลบ JavaScritp และปลั๊กอินที่ไม่ได้ใช้ออก รวมถึงทำการลดขนาดไฟล์ Media ที่ใช้บนเว็บไซต์ทั้งหมดก็ช่วยทำให้ตัวเว็บตอบสนองได้เร็วขึ้นด้วยเช่นกันครับ ### Cumulative Layout Shift (CLS) Cumulative Layout Shift (CLS) คือ คะแนนที่ใช้ในการประเมินความเสถียรของหน้าเว็บไซต์ครับ เช่น การจัดวาง Layout ข้อความเบี้ยวหรือตัวเล็กอ่านยากเกินไปไม่ ปุ่มเลื่อนอยู่ไปติดกับปุ่มอื่นๆ จนกดพลาดหรือเปล่า หรือเว็บมีการกระตุก ภาพและฟีเจอร์ต่างๆ สั่นหรือไม่ เพราะถ้าหากเกิดเหตุการณ์เหล่านี้ขึ้นในเว็บไซต์จะทำให้ User ได้รับประสบการณ์ใช้งานที่ไม่ดี Google จริงให้คะแนนในส่วนนี้ด้วยครับ โดยค่า CLS ที่ดีควรน้อยกว่า 0.1 เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ดีที่สุดนั่นเองครับ #### วิธีปรับปรุงค่า CLS สำหรับใครที่อยากได้คะแนนจากค่า CLS เยอะๆ แนะนำให้ทำการแก้ไขเรื่องของความเสถียรด้านดีไซน์ โดยตรวจสอบการแสดงผลของฟอนต์ในหน้าเว็บไซต์ และเนื้อหาทั้งการแทรกรูป แบนเนอร์ว่าไปแทรกกับองค์ประกอบอื่นๆ ในเว็บไซต์หรือเปล่า รวมถึงทำการปรับเปลี่ยนรูปภาพหรือวิดีโอที่มีขนาดไม่แน่นอนด้วยครับ ## Supplemental Vitals หรือปัจจัยรองอื่น ๆ นอกจาก 3 ปัจจัยหลักที่กล่าวมาในข้างต้นแล้วยังมีปัจจัยรองอื่นๆ ที่เป็นองค์ประกอบเสริมที่ช่วยทำให้ประสิทธิภาพการใช้งานของเว็บไซต์คุณดีขึ้นได้อีกครับ ถึงแม้ว่าจะไม่ใช่สิ่งที่คุณต้องให้ความสำคัญมากที่สุด แต่หากมีเวลาก็สามารถ Optimize เว็บไซต์ให้มีคะแนนเหล่านี้เพิ่มขึ้นได้ด้วย ไม่ว่าจะเป็น… - **Time to First Byte (TTFB) ** เป็นการวัดระยะเวลาที่เบราว์เซอร์ของผู้ใช้ ใช้ในการรับเนื้อหาไบต์ (Byte) แรก หลังจากได้รับการร้องขอบางอย่างบน Server ยิ่งมีค่านี้สูงเท่าไหร่ เท่ากับว่า เว็บไซต์ของคุณก็จะใช้เวลาโหลดนานขึ้นเท่านั้น ดังนั้น จึงควรมีระยะเวลาการตอบสนองจาก Server น้อยกว่า 200 มิลลิวินาที Google ถึงจะมองว่าดีครับ - **First Contentful Paint (FCP) ** เป็นค่าที่ใช้วัดตั้งแต่เริ่มโหลดหน้าเว็บไซต์ไปจนถึงการแสดงเนื้อหาแรกที่จะปรากฏขึ้น โดยเนื้อหานี้จะหมายถึงเค้าโครงเว็บไซต์ ตัวหนังสือและรูปภาพบางส่วน, <svg> Elements หรือ <canvas> Elements ที่ไม่ใช่สีขาว โดยมีหลักเกณฑ์ในการวัดผล ดังนี้ เว็บไซต์ใช้เวลาโหลด 0-1,000 ms เป็นเว็บไซต์ที่ดี เว็บไซต์ใช้เวลาโหลด 1,000 ms-3,000 ms เป็นเว็บไซต์ที่ต้องปรับปรุง เว็บไซต์ใช้เวลาโหลดเกิน 3,000 ms เป็นเว็บไซต์ที่แย่ - **Total Blocking Time (TBT) ** เป็นคะแนนที่ใช้วัดเวลาการรอ First Contentful Paint (FCP) และ Time to Interactive (TTI) ทำงาน ก่อนที่จะโต้ตอบได้อย่างสมบูรณ์กับผู้ใช้ โดยควรมีมีระยะเวลาของ TBT น้อยกว่า 300 มิลลิวินาที - **Time to Interactive (TTI)** เป็นคะแนนที่ใช้วัดเวลาตั้งแต่เริ่มโหลดหน้าเพจไปจนโหลดทั้งภาพ และข้อความต่างๆ จนครบ พร้อมจะที่ตอบสนองการใช้งานต่างๆ ของผู้ใช้ได้ โดยค่าที่ Google มองว่าดี คือ ความเร็วในการโต้ตอบของหน้าเว็บ ไม่ควรเกิน 3.8 วินาทีครับ ## วิธีตรวจสอบ Core Web Vitals แบบฟรี ๆ คุณสามารถตรวจสอบคะแนน Core Web Vitals แบบฟรีๆ ของเว็บไซต์ได้ด้วยตัวเองได้เลยครับ โดยพึ่งพา 2 เครื่องมือที่ใช้งานได้ฟรีที่คนคุ้นหน้าคุ้นตากันดี ใช้ง่าย ไม่ต้องไปเรียนรู้ฟังก์ชันอะไรใหม่ๆ และเป็นส่วนเครื่องมือส่วนใหญ่ที่ไว้เช็ค [Technical SEO](https://nerdoptimize.com/seo/technical-seo/) โดยไม่ยุ่งยาก ดังนี้ - **PageSpeed Insights** [PageSpeed Insights ](https://developers.google.com/speed/pagespeed/insights/)เป็นเว็บไซต์เดียวกันกับที่ใช้เช็กความเร็วเว็บไซต์ปกติเลยครับ วิธีใช้ก็แค่กรอกโดเมน หลังจากนั้นกด Analyze แล้วรอผลลัพธ์ค่าต่างๆ ขึ้นมา หลังจากนั้นให้ตรวจสอบ Metrics ต่างๆ แล้วทำตามคำแนะนำaที่อยู่ด้านล่าง (แต่อาจไม่จำเป็นต้องทำตามทุกอย่างนะครับ เพราะมันอาจทำให้เว็บไซต์คุณหน้าตาไม่เหมือนเดิมได้ด้วย หากเช็คแล้ว [Pagespeed](https://nerdoptimize.com/seo/pagespeed/) ของคุณทำคะแนนได้ถึง 90 คะแนนขึ้นไปก็ถือว่าทำตามเกณฑ์ได้ดีมากแล้ว) - **Google Search Console** คุณสามารถใช้ Google Search Console ในการดูรายงานภาพรวมทั้งหมดในเว็บไซต์ว่าหน้าไหนมีปัญหาอะไรบ้าง โดยให้คุณเข้าไปที่ [https://search.google.com/search-console/about](https://search.google.com/search-console/about) หาเมนู Core Web Vitals ทางซ้ายมือ หลังจากนั้นจะมีข้อมูลของเว็บไซต์ขึ้นมาทั้ง Mobile และ Desktop ให้โฟกัสที่ Mobile เป็นหลัก แล้วทำการดูภาพรวมทุกหน้าพร้อมกัน ไม่ต้องไล่เช็กทีละหน้า แต่ถ้าอยากเช็กแบบละเอียดให้ใช้ PageSpeed Insights ครับ ## สรุป Core Web Vitals เป็นเกณฑ์สำคัญของ Google ที่คุณต้องให้ความสำคัญ โดยการหมั่นตรวจสอบเว็บไซต์และทำการแก้ไข เพื่อให้เว็บไซต์ใช้งานได้ดี และมอบประสบการณ์ที่ดีที่สุดให้กับ User และเป็นส่วนหนึ่งของ [SEO Audit ](https://nerdoptimize.com/seo/seo-audit/)ที่ขาดไปไม่ได้เลย ซึ่งเราจะสรุปวิธีการแก้ไขแบบรวบรัดมาให้แบบเข้าใจง่ายๆ ดังนี้ - ลบโค้ดต่างๆ ปลั๊กอิน และมิเดียที่ไม่จำเป็นออกจากเว็บไซต์ - ลดขนาดภาพ หรือใช้ไฟล์รูป Webp จะช่วยทำให้เว็บเบาขึ้น - ลดขนาด Pop-up และ Banner - ปรับแก้เสถียรภาพของดีไซน์ เช่น ขนาดฟอนต์ที่เล็ก การแทรกเนื้อหาด้วยรูป วิธีโอ ไฟล์ต่างๆ ที่มีขนาดไม่เท่ากัน - ใช้การ Embed วิดีโอจากภายนอก แทนการอัปโหลดตรงๆ ลงในเว็บไซต์ - ลบ Script ฟังก์ชันต่างๆ จาก Third-party - เช่าโฮสที่มีความเร็วในการดาวน์โหลดสูง ยังไงก็ลองหยิบ Checklist นี้ไปลองทำตามดูกันเลยนะครับ แต่ถ้าหากต้องการหาบริษัท[รับทำ SEO](https://nerdoptimize.com/seo/) สามารถเข้ามาอ่านได้ดังนี้ - [FacebookFacebook](https://www.facebook.com/share.php?u=https%3A%2F%2Fnerdoptimize.com%2Fseo%2Fcore-web-vitals%2F) - [LINELine](https://lineit.line.me/share/ui?url=https%3A%2F%2Fnerdoptimize.com%2Fseo%2Fcore-web-vitals%2F)
