Core Web Vitals: การเปลี่ยนแปลงเค้าโครงสะสม – คืออะไรและจะปรับปรุงสำหรับ SEO ได้อย่างไร

ด้วยการเปิดตัวการอัปเดตประสบการณ์การใช้เพจของ Google เว็บไซต์ที่ปรับแต่งมาอย่างดีจะมีโอกาสในการจัดอันดับใหม่ๆ

โดยเฉพาะอย่างยิ่ง เว็บไซต์สามารถเข้าเกณฑ์สำหรับการเพิ่มอันดับโดยพิจารณาจากตัวชี้วัดประสิทธิภาพใหม่หลายตัวที่ Google เรียกว่า “core Web Vitals”

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

Google ได้กำหนด Web Vitals หลักสามประการ:

• Largest Contentful Paint (LCP)
• ความล่าช้าในการป้อนข้อมูลครั้งแรก (FID)
• การเปลี่ยนแปลงเค้าโครงสะสม (CLS)

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

• CLS คืออะไร?
• คุณวัด CLS ได้อย่างไร?
• CLS ส่งผลต่อ SEO อย่างไร
• ฉันจะปรับปรุงคะแนน CLS ของฉันได้อย่างไร

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

CLS วัดการเปลี่ยนแปลงการจัดรูปแบบหน้าเว็บหลังจากการเรนเดอร์ครั้งแรกในเบราว์เซอร์ โดยปกติแล้วจะเกิดจากการแทรกเนื้อหาแบบไดนามิกที่อยู่เหนือสิ่งที่แสดงอยู่แล้ว

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

Google กล่าวถึง CLS ที่นี่:

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

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

ที่สำคัญ Google ชี้แจงว่าการเปลี่ยนเลย์เอาต์ไม่ได้ถือว่าแย่ทั้งหมด:

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

การเปลี่ยนเค้าโครงที่เกิดขึ้นภายใน 500 มิลลิวินาทีของการป้อนข้อมูลของผู้ใช้จะมีการตั้งค่าสถานะ hadRecentInput เพื่อให้สามารถแยกออกจากการคำนวณได้

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

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

หน้าต่างเซสชันคือช่วงกะ 5 วินาทีใดๆ ที่เกิดขึ้นในขณะที่ผู้ใช้เข้าชมหน้า Google จะค้นหาช่วง 5 วินาทีที่มีบทลงโทษกะสูงสุด และนั่นคือคะแนนสำหรับการดูหน้าเว็บนั้น

ในการคำนวณคะแนนกะการจัดวาง Google จะคูณ เศษส่วนกระทบ และเศษ ระยะทาง ฉันจะทำลายสิ่งเหล่านี้ลง

เศษส่วนผลกระทบคือจำนวนพื้นที่วิวพอร์ตที่องค์ประกอบที่ไม่เสถียรใช้ระหว่างสองเฟรม

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

ตัวอย่างการเลื่อนเลย์เอาต์ระหว่างสองเฟรม Google Developers

เศษส่วนระยะทาง คือระยะทางที่องค์ประกอบที่ไม่เสถียรเคลื่อนตัว ตัวอย่างด้านล่างแสดงให้เห็นว่าองค์ประกอบได้ย้าย 25% ของความสูงของวิวพอร์ต

ตัวอย่างการเปลี่ยนระยะทางในวิวพอร์ต Google Developers

สรุป: CLS ถูกวัดโดยคะแนนการเปลี่ยนเลย์เอาต์ ซึ่งคำนวณด้วยวิธีนี้:

เศษส่วนกระทบ * เศษระยะทาง = คะแนนการเลื่อนเค้าโครง

จากตัวอย่างข้างต้น การคำนวณจะเป็นดังนี้: 0.75 * 0.25 = 0.1875 Google กล่าวว่าหน้าเว็บควรรักษา CLS ให้น้อยกว่า 0.1 ในทุกหน้าหรือการดูหน้าเว็บในเว็บไซต์ของคุณ ตัวอย่างนี้จะเกินเป้าหมายนั้น ดังนั้นจะทำคะแนนได้ไม่ดี

ภาพประกอบหนึ่งเพื่อให้คุณเห็นภาพที่ชัดเจนขึ้นว่า CLS ถูกทำคะแนนอย่างไร: หากทุกอย่างในวิวพอร์ตเลื่อนออกจากวิวพอร์ตในเฟรมเดียว นั่นก็จะมีคะแนนเลย์เอาต์ 1.0 (ดูตัวอย่างอื่นๆ ใน GitHub)

ยิ่งคุณมีองค์ประกอบบนหน้าที่เปลี่ยนวิวพอร์ตมากเท่าใด คะแนนของคุณก็จะยิ่งแย่ลง

เป้าหมายคะแนน CLS ของ Google

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับคะแนนการเปลี่ยนเลย์เอาต์ได้ที่นี่ และวิธีที่ Google กำหนดเกณฑ์ที่นี่

Cumulative Layout Shift (CLS) ส่งผลต่อ SEO อย่างไร

เช่นเดียวกับ Web Vitals หลักอื่นๆ CLS ช่วยให้มั่นใจว่าประสบการณ์ใช้งานหน้าเว็บจะราบรื่นสำหรับผู้เยี่ยมชมของคุณ ทั้งบนมือถือและเดสก์ท็อป

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

จากการวิจัยของ Screaming Frog URL ในตำแหน่งที่ 1 ของผลการค้นหามีแนวโน้มที่จะผ่านการประเมิน core Web Vitals มากกว่า URL ในตำแหน่งที่ 9 ถึง 10% แน่นอนว่าข้อมูลนี้สะท้อนถึงหน้าที่มีอยู่ — ซึ่งอาจไม่ได้รับการปรับแต่งให้เหมาะสม ปฏิบัติตามหลัก Web Vitals — ก่อนที่ปัจจัยเหล่านี้จะนำไปใช้กับอัลกอริธึมการจัดอันดับ

เมื่อดูที่ CLS แล้ว URL อุปกรณ์เคลื่อนที่น้อยกว่าครึ่งหนึ่ง (46%) และ URL เดสก์ท็อปน้อยกว่าครึ่งหนึ่ง (47%) มีคะแนน CLS ที่ “ดี” คะแนน CLS เฉลี่ยคือ 0.29 บนอุปกรณ์เคลื่อนที่และ 0.25 สำหรับเดสก์ท็อป กล่าวอีกนัยหนึ่ง มีพื้นที่สำหรับการปรับปรุง CLS ในเว็บไซต์ส่วนใหญ่

Screaming Frog แบ่งอัตราการผ่านตามตำแหน่ง และพบว่า URL ที่ "ดี" ลดลงเป็นเปอร์เซ็นต์เมื่อคุณเลื่อนตำแหน่งในหน้าผลการค้นหา ตัวอย่างต่อไปนี้คือผลลัพธ์สำหรับอุปกรณ์เคลื่อนที่ แต่ยังสร้างกราฟข้อมูลสำหรับเดสก์ท็อปด้วย

“มีเว็บไซต์กี่แห่งที่ผ่านการประเมิน Core Web Vitals” screamingfrog.co.uk

ฉันจะปรับปรุงคะแนนการเปลี่ยนแปลงเค้าโครงสะสม (CLS) ของฉันได้อย่างไร

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

เครื่องมือที่มีให้ ได้แก่:

• รายงานประสบการณ์ผู้ใช้ Chrome (ช่อง)
• PageSpeed ​​Insights (แล็บและภาคสนาม)
• Search Console (รายงาน Core Web Vitals) (ฟิลด์)
• Chrome DevTools (แล็บ)
• ประภาคาร (แล็บ)
• การทดสอบหน้าเว็บ (แล็บ)
• WaterFaller.dev (แล็บ)

อีกวิธีหนึ่งในการวัด CLS ใช้ไลบรารี JavaScript ของ web-vitals คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับเรื่องนี้ได้ที่นี่

สาเหตุทั่วไปของการเปลี่ยนเลย์เอาต์ ได้แก่:

• ภาพไม่มีมิติ
• โฆษณา วิดีโอ และออบเจ็กต์ฝังตัวอื่นๆ หรือ iframe ที่ไม่มีมิติ
• เนื้อหาที่ฉีดแบบไดนามิก
• CSS ที่โหลดล่าช้าซึ่งมีการนำสไตล์ไปใช้หลังจากโหลดรายการอื่นแล้ว
• แบบอักษรเว็บทำให้เกิดข้อความที่มองไม่เห็นหรือไม่มีรูปแบบกะพริบ
• องค์ประกอบบนหน้าที่รอให้โหลดรายการอื่นผ่านเครือข่ายก่อนที่จะปรากฏ
• องค์ประกอบเคลื่อนไหวตาม "ความสูง" และ "ความกว้าง" แทน "การแปลง: มาตราส่วน ()" ของ CSS
• องค์ประกอบเคลื่อนไหวโดย "บน", "ขวา", "ล่าง" หรือ "ซ้าย" แทน "การแปลง: แปล ()" ของ CSS

หลักการพื้นฐานที่จะปรับปรุง CLS ได้แก่ :

1. ใช้แอตทริบิวต์ขนาดสำหรับรูปภาพ วิดีโอ และรายการฝังตัวอื่นๆ หรือ iframe เสมอ หากองค์ประกอบโหลดแบบไดนามิก ให้ใช้ CSS เพื่อจัดรูปแบบองค์ประกอบคอนเทนเนอร์ใดๆ ให้มีขนาดหรืออัตราส่วนภาพเท่ากันก่อนโหลดเนื้อหา จากนั้น เมื่อเนื้อหาถูกโหลดลงในองค์ประกอบคอนเทนเนอร์เหล่านั้น หน้าจะไม่เปลี่ยน
2. อย่าแทรกเนื้อหาแบบไดนามิกเหนือเนื้อหาที่มีอยู่
3. หากใช้ CSS เพื่อทำให้องค์ประกอบเคลื่อนไหว ให้เลือกแอนิเมชั่น "แปลง"

และดูวิดีโอเกี่ยวกับ CLS จากนักพัฒนา Google Chrome บน YouTube:

ต้องการข้อมูลเชิงลึกเพิ่มเติมหรือไม่ ดูการสัมมนาผ่านเว็บแบบออนดีมานด์ 3 เคล็ดลับสำหรับผู้เชี่ยวชาญในการปรับปรุง Core Web Vitals รวมถึงการถาม & ตอบเพิ่มเติมในตอนท้าย

อ่านชุดประสบการณ์หน้าเว็บทั้งหมดของเราสำหรับข้อมูลเพิ่มเติมเกี่ยวกับการอัปเดตการจัดอันดับนี้:

1. การอัปเดตประสบการณ์การใช้งานเพจคืออะไร
2. วิธีสร้างเว็บไซต์ที่เหมาะกับอุปกรณ์พกพา
3. โฆษณาคั่นระหว่างหน้าที่ล่วงล้ำและเหตุใดจึงไม่ดีสำหรับ SEO
4. HTTPS สำหรับผู้ใช้และการจัดอันดับ
5. ภาพรวม Core Web Vitals
6. Core Web Vitals: LCP (ระบายสีเนื้อหาที่ใหญ่ที่สุด)
7. Core Web Vitals: FID (ความล่าช้าในการป้อนข้อมูลครั้งแรก)
8. Core Web Vitals: CLS (Cumulative Layout Shift)