Core Web Vitals คืออะไรและจะปรับปรุงได้อย่างไร [2020]

จากข้อมูลของ Google ประสบการณ์ของผู้ใช้เป็นหนึ่งในหลายปัจจัย (ประมาณ 200) การจัดอันดับที่พวกเขาใช้ในการจัดอันดับเว็บไซต์ในหน้าผลการค้นหา

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

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

Core Web Vitals คืออะไร?

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

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

มี Web Vitals อื่นๆ อีกหลายอย่าง เช่น เป็นมิตรกับอุปกรณ์เคลื่อนที่ การท่องเว็บอย่างปลอดภัย HTTPS ไม่มีโฆษณาคั่นระหว่างหน้า ฯลฯ ที่วัดประสบการณ์ของผู้ใช้บนเว็บไซต์ แต่เป็นเรื่องยากมากสำหรับผู้ใช้บางรายในการติดตามเมตริกการใช้งานทั้งหมดในคราวเดียว นั่นคือเหตุผลที่ Google นำเสนอแนวคิด Web Vitals หลัก โดยมุ่งเน้นที่การ โหลดเมตริกหลัก การโต้ตอบ และความเสถียรของภาพ เท่านั้น

คุณสามารถติดตามข้อมูล Web Vitals หลักของเว็บไซต์ได้ในส่วน "การปรับปรุง" ของบัญชีคอนโซลการค้นหาของคุณ คุณสามารถดูรายการของหน้าที่ผู้ใช้ได้รับประสบการณ์ที่ไม่ดี และยังแนะนำวิธีที่คุณสามารถปรับปรุงได้

เหตุใด Core Web Vitals จึงมีความสำคัญสำหรับ SEO

ปีนี้ Google ประกาศในบล็อกศูนย์กลางการค้นหาเกี่ยวกับสัญญาณประสบการณ์หน้า

ก่อนหน้านี้ Google พิจารณาสัญญาณประสบการณ์การใช้งานหน้าเว็บหลายประการสำหรับการจัดอันดับ ได้แก่:

• HTTPS
• เป็นมิตรกับมือถือ
• ไม่มีป๊อปอัปคั่นระหว่างหน้า
• “การท่องเว็บอย่างปลอดภัย” (โดยทั่วไป ไม่มีมัลแวร์บนหน้าของคุณ)

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

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

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

ในบทความนี้ เราจะแนะนำวิธีปรับปรุงคะแนน Web Vitals หลักของคุณ

Largest Contentful Paint (LCP)

LCP วัดประสิทธิภาพการโหลดของเว็บไซต์ หมายความว่าเว็บไซต์ใช้เวลานานเท่าใดในการโหลดหน้าให้สมบูรณ์

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

ตาม Google LCP ไม่เกิน 2.5 วินาทีเมื่อหน้าเริ่มโหลด

LCP แตกต่างจากเมตริกอื่นๆ เช่น Time To First Byte (TTFY) และ First contentful paint เนื่องจากจะวัดประสิทธิภาพในโลกแห่งความเป็นจริงจากรายงาน UX ของ Chrome

โดยเน้นที่เวลาในการโหลดหน้าเพื่อดูผู้ใช้จริงและเริ่มโต้ตอบกับหน้าเว็บ

คุณสามารถตรวจสอบคะแนน LCP ได้ใน Google Page Speed ​​Insight โดยจะแสดงข้อมูลโดยการตรวจสอบทั้งเว็บไซต์และแสดงรายการ URL ที่ต้องปรับปรุง

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

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

คุณยังสามารถดูการแจ้งเตือนเกี่ยวกับ Large Contentful Paint ใน คอนโซลการค้นหาของ Google (กศน.)

LCP ยังแบ่งออกเป็นสามประเภทเพิ่มเติม

1. ดี
2. ต้องการการปรับปรุง
3. ยากจน.

หาก LCP ของคุณต่ำกว่า 2.5 วินาที ถือว่าดี คะแนนระหว่าง 2.5 วินาทีถึง 4 วินาทีจะถือว่าจำเป็นต้องปรับปรุง และคะแนนมากกว่า 4 วินาทีถือว่าต่ำ

คุณสามารถสังเกตได้ว่าการบรรลุ LCP ที่น้อยกว่า 2.5 บนอุปกรณ์มือถือนั้นยากมาก พยายามให้ต่ำกว่า 4 วินาทีเสมอ

ขั้นตอนในการปรับปรุงคะแนน LCP:

ตั้งค่าการโหลดแบบขี้เกียจ

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

ลบสคริปต์ของบุคคลที่สามโดยไม่จำเป็น:

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

อัพเกรดเว็บโฮสติ้ง:

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

หากคุณไม่ทราบวิธีการเลือกเว็บโฮสติ้งที่ดีที่สุด คุณควรไปที่ Guide on เว็บโฮสติ้งประเภทต่างๆ พร้อมคู่มือการซื้อ

ลบองค์ประกอบของหน้าขนาดใหญ่:

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

ลดขนาด CSS

องค์ประกอบ CSS ขนาดใหญ่ส่งผลต่อคะแนน LCP ของเว็บไซต์ นั่นเป็นเหตุผลที่คุณควรย่อโค้ด CSS ของคุณให้เล็กลงเพื่อปรับปรุง LCP

ความล่าช้าในการป้อนข้อมูลครั้งแรก (FID)

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

สาเหตุหลักของความล่าช้าในการโต้ตอบกับผู้ใช้คืองาน หลักของสคริปต์บล็อกเธรด

การรักษาเวลา FID ให้ต่ำเป็นสิ่งสำคัญมาก เนื่องจากจะส่งผลโดยตรงต่อประสบการณ์ของผู้ใช้ในเว็บไซต์ของคุณ Google กำหนดคะแนน FID ที่ยอมรับได้ต่ำกว่า 100 MS

สำหรับเว็บไซต์ เช่น บล็อกหรือบทความ FID ไม่ได้มีความสำคัญมากที่สุดเนื่องจากการโต้ตอบที่เกิดขึ้นคือการเลื่อนหน้าหรือย่อหรือขยาย ลงชื่อสมัครรับจดหมายข่าวทางอีเมล

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

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

ขั้นตอนในการปรับปรุงคะแนน FID:

ลบสคริปต์บุคคลที่สามที่ไม่จำเป็น:

คุณปรับปรุงคะแนน FID ได้โดยลบสคริปต์ที่ไม่จำเป็นออก (เช่น Google Analytics, แผนที่ความหนาแน่น, Onesignal ฯลฯ)

เลื่อน JavaScript:

หากเว็บไซต์ของคุณกำลังโหลดจาวาสคริปต์ในช่วงเริ่มต้นของการโหลดหน้า ผู้ใช้โต้ตอบอย่างรวดเร็วจะเป็นเรื่องยาก นั่นคือเหตุผลที่คุณสามารถเปิดใช้งาน Defer javascript โดยใช้แคชปลั๊กอิน เช่น WP-Rocket, Litespeed cache เป็นต้น

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

เปิดใช้งานแคชของเบราว์เซอร์:

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

เปิดใช้งานการบีบอัด Gzip

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

การเปลี่ยนแปลงเค้าโครงสะสม (CLS)

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

ตาม Google CLS ควรจะต่ำกว่า 0.1 คุณสามารถเข้าใจได้ดีขึ้นว่าการเปลี่ยนแปลงรูปแบบสะสมเกิดขึ้นบนเว็บไซต์ในกราฟิกด้านล่างอย่างไร

ขั้นตอนในการปรับปรุงคะแนน CLS

ใช้ไฟล์สื่อขนาดแอตทริบิวต์ขนาดที่กำหนด (วิดีโอ, รูปภาพ, GIF, อินโฟกราฟิก ฯลฯ):

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

พื้นที่สงวนไว้สำหรับวางโฆษณา

หากคุณกำลังใช้โฆษณาอัตโนมัติบน Adsense โฆษณาของคุณจะแสดงแบบสุ่มและบางครั้งก็ดันเนื้อหาด้านล่างเพื่อแสดงโฆษณา นั่นเป็นเหตุผลที่คุณต้องจองพื้นที่เฉพาะสำหรับตำแหน่งโฆษณาบนเว็บไซต์

เพิ่มองค์ประกอบ UI ใหม่ด้านล่างหน้าเว็บ:

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

บทสรุป

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

ตอนนี้ถึงคราวของคุณแล้ว

คุณจะลองวิธีไหนก่อน แจ้งให้เราทราบในส่วนความคิดเห็น

ถ้าคุณชอบบทความนี้ แชร์กับชุมชนบล็อกของคุณบนโซเชียลมีเดีย