การเปลี่ยนแปลงเค้าโครงสะสม: ปรับปรุง Google CLS Score

คุณเคยอยู่ในสถานการณ์ที่ปุ่มชำระเงินหายไปเมื่อคุณพยายามทำการสั่งซื้อหรือไม่?

ใช่! มันน่าผิดหวัง

ความจริงก็คือ มันเกิดขึ้นบ่อยเกินไปและเกิดขึ้นกับเรามากเกินไป

โชคดีที่เช่นเคย Google ให้ความสำคัญกับประสบการณ์ของผู้ใช้เหนือสิ่งอื่นใด

ด้วยเหตุนี้จึงจะเปิดตัวเมตริกประสิทธิภาพใหม่ 3 รายการโดยเป็นส่วนหนึ่งของ Web Vitals หลัก เริ่มในปี 2564

Core Web Vitals ออกแบบมาเพื่อวัดความเร็วในการโหลด การโต้ตอบ และความเสถียรของภาพของหน้าเว็บ

ตัวชี้วัดสามตัวแสดงถึงสิ่งเหล่านี้:

1. Largest Contentful Paint (LCP)

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

3. รูปแบบสะสม Shift (CLS)

มาทำความเข้าใจ CLS จากมุมมองของทั้งผู้ใช้และผู้ดูแลเว็บ (SEO)

Cumulative Layout Shift คืออะไร?

Cumulative Layout Shift (CLS) แสดงถึงความเสถียรของภาพของเว็บไซต์

มันวัดจำนวนการเปลี่ยนแปลงเค้าโครงที่ไม่สำคัญบนหน้า

การเปลี่ยนเลย์เอาต์ที่ไม่คาดคิดเป็นผลมาจากหน้าเว็บที่เคลื่อนที่ไปมาโดยที่ผู้ใช้ไม่ต้องป้อนข้อมูล

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

การเปลี่ยนแปลงในเลย์เอาต์อาจเกิดขึ้นได้ทุกเมื่อเมื่อองค์ประกอบที่มองเห็นได้เปลี่ยนตำแหน่งจากเฟรมที่แสดงผลหนึ่งไปยังเฟรมถัดไป

เรามาลองทำความเข้าใจความหมายทั่วไปและให้คำจำกัดความในคำง่ายๆ ว่า "Cumulative Layout Shift":

สะสมคือปริมาณที่เพิ่มขึ้น

เลย์เอาต์คือ Frame

กะคือการเปลี่ยนตำแหน่ง

พูดง่ายๆ ก็คือ Cumulative Layout Shift คือผลรวมของการเปลี่ยนแปลงเฟรมแต่ละรายการในตำแหน่งการออกแบบเว็บไซต์

ภาพที่มาจาก web.dev

คะแนน CLS มาตรฐานควรต่ำกว่า 0.1

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

ในภาพด้านบนเป็นที่ชัดเจนว่า ตาม Google:

1. หากคะแนน CLS น้อยกว่า 0.1 แสดงว่าเป็นสัญญาณที่ดี หมายความว่าไซต์ของคุณไม่มีปัญหากับการเปลี่ยนเลย์เอาต์ใดๆ

2. หากคะแนน CLS อยู่ระหว่าง 0.1 ถึง 0.25 แสดงว่าเว็บไซต์ของคุณต้องการการปรับปรุงบางอย่างในเลย์เอาต์ภาพ

3. หากคะแนน CLS มากกว่า 0.25 แสดงว่าเป็นสัญญาณที่ไม่ดี ซึ่งหมายความว่าการเคลื่อนไหวขององค์ประกอบภาพเกิดขึ้นบ่อยมาก

การคำนวณกะเค้าโครงสะสมคำนวณอย่างไร

Google คำนวณ CLS ของหน้าโดยคำนวณเศษส่วนผลกระทบและเศษระยะทางสำหรับการเปลี่ยนเลย์เอาต์ที่ไม่คาดคิดแต่ละครั้ง

ผลกระทบเศษส่วนของ CLS

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

สูตรคำนวณ Impact Fraction สำหรับ CLS

ในการคำนวณคะแนน Layout Shift เราจำเป็นต้องมี Impact Fraction

จะคำนวณ Impact Fraction สำหรับ CLS ได้อย่างไร?

การแสดงภาพกราฟิกจะช่วยให้คุณเข้าใจเศษส่วนผลกระทบได้ดีขึ้น

 เศษส่วนกระทบ = [พื้นที่ของพื้นที่กระทบ] / [พื้นที่ของวิวพอร์ต] เศษส่วนกระทบ = [330 x 490] / [375 x 667] เศษส่วนกระทบ = [161700] / [250125] เศษส่วนกระทบ = 0.645

เศษส่วนระยะทางของ CLS

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

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

สูตรคำนวณเศษส่วนระยะทางสำหรับ CLS

จะคำนวณเศษส่วนระยะทางสำหรับ CLS ได้อย่างไร

การแสดงกราฟิกจะช่วยให้คุณเข้าใจเศษส่วนระยะทางได้ดีขึ้น

เศษส่วนระยะทาง = [Max. ระยะทางเคลื่อนที่] / [ความสูงของวิวพอร์ต] เศษส่วนระยะทาง = [120] / [667] เศษส่วนระยะทาง = 0.179

สูตรคำนวณ Google CLS Score

คะแนนเค้าโครงสะสมคำนวณโดยการคูณเศษส่วนกระทบกับเศษส่วนระยะทาง:

 การเปลี่ยนเค้าโครงสะสม (CLS) = เศษส่วนผลกระทบ x เศษส่วนระยะทาง

CLS = 0.645 x 0.179 CLS = 0.1154 .

คะแนน CLS ยังคงเพิ่มขึ้นตามผลกระทบและส่วนระยะทางเพิ่มขึ้น

Cumulative Layout Shift พร้อมตัวอย่างง่ายๆ

คุณเยี่ยมชมไซต์และเห็นสิ่งที่น่าสนใจในการอ่าน

คุณไปข้างหน้าเพื่อคลิกที่ลิงค์

แต่เมื่อคุณกำลังจะคลิกลิงก์ หน้าเว็บจะเลื่อนลงมาครึ่งนิ้ว และสุดท้ายคุณคลิกโฆษณาที่อยู่เหนือลิงก์นั้น

ที่มา:nitropack.io

ฟังดูไม่ยุติธรรมใช่ไหม

เป็นการเปลี่ยนเลย์เอาต์ที่ไม่คาดคิด

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

นอกจากนี้เรายังมีบางอย่างที่เรียกว่าการเปลี่ยนเลย์เอาต์ที่คาดไว้

มันเกิดขึ้นเมื่อคุณคลิกที่บางอย่างบนหน้าเว็บ และจะเปลี่ยนเค้าโครงปัจจุบันของหน้า

ตัวอย่างเช่น คุณไปที่บล็อกเพื่อค้นหาข้อมูลบางอย่าง

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

ที่มา: nitropack.io

นี่เป็นผลลัพธ์ที่คาดหวังจากหน้าเว็บและถือได้ว่าเป็นการเปลี่ยนเลย์เอาต์ที่คาดไว้

อะไรทำให้เกิดปัญหา CLS?

ตาม Google ยักษ์ใหญ่ของเครื่องมือค้นหามี 5 สาเหตุที่เป็นไปได้สำหรับ Cumulative Layout Shift :

รูปภาพและวิดีโอที่ไม่มีมิติ

ขอแนะนำให้ระบุความกว้างและความสูงของรูปภาพและวิดีโอของคุณเสมอ

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

โฆษณา การฝัง และ iframes แบบไม่มีมิติ

ขนาดโฆษณาสามารถเพิ่มรายได้ด้วย CTR ที่สูง

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

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

เนื้อหาที่ฉีดแบบไดนามิก

หลีกเลี่ยงการแทรกเนื้อหาใหม่เหนือเนื้อหาที่มีอยู่ เว้นแต่เป็นการตอบสนองต่อการโต้ตอบของผู้ใช้

วิธีนี้จะช่วยให้มั่นใจได้ว่าการเลื่อนเลย์เอาต์ที่เกิดขึ้นมักจะเกิดขึ้นมากกว่าการทริกเกอร์รูปภาพหรือข้อความให้เคลื่อนไหวโดยไม่คาดคิด

แบบอักษรเว็บทำให้เกิด FOIT/FOUT

ลองใช้ font:display ค่ากับฟอนต์ที่คุณกำหนดเอง เช่น auto, swap, block, fallback และ optional เพื่อป้องกันการเปลี่ยนเลย์เอาต์ที่ไม่จำเป็น

เพื่อให้แน่ใจว่าไม่มีการเลื่อนเลย์เอาต์ ให้ใช้ font:display พร้อมกับ link rel=preload

องค์ประกอบใด ๆ ที่ใช้แบบอักษรนั้นจะถูกซ่อนไว้จนกว่าเนื้อหาแบบอักษรจะถูกดาวน์โหลดอย่างสมบูรณ์ เรียกว่า FOIT (แฟลชของข้อความที่มองไม่เห็น)

แหล่ง ที่มาของ nimation:malthemilthers.com

การแสดงแบบอักษรทางเลือกในกองแบบอักษรจนกระทั่งการโหลดแบบกำหนดเองเรียกว่า FOUT(แฟลชของข้อความที่ไม่ได้จัดรูปแบบ)

การดำเนินการที่รอการตอบสนองของเครือข่ายก่อนที่จะอัปเดต DOM

เลือกใช้แอนิเมชั่น "แปลง" เสมอสำหรับแอนิเมชั่นของคุณสมบัติที่ทริกเกอร์การเปลี่ยนแปลงเลย์เอาต์

คะแนน Google CLS ได้รับอิทธิพลจากโฆษณาอย่างไร

ในการจัดการกับโฆษณาที่ทำให้เกิด CLS คุณต้องจัดรูปแบบองค์ประกอบที่โฆษณาจะแสดง

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

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

อีกทางหนึ่ง โฆษณาอาจเติมทั้งแถวที่ด้านบนของคอลัมน์ในรางน้ำด้านขวาหรือด้านซ้ายของหน้าสำหรับการจัดวางบางรูปแบบ

หากหน้าไม่ปรากฏขึ้น จะไม่มีการเปลี่ยนแปลงและจะไม่สร้างความแตกต่างใดๆ บนมือถือหรือเดสก์ท็อป

อย่างไรก็ตาม คุณควรสังเกตว่ามันขึ้นอยู่กับเลย์เอาต์ของธีม และคุณจะต้องทดสอบว่ามีปัญหากับพื้นที่โฆษณาหรือไม่

CLS สามารถสไลด์ระหว่างการพัฒนาเว็บได้อย่างไร?

Google CLS สามารถผ่านขั้นตอนการพัฒนาได้

นี่คือสิ่งที่จะเกิดขึ้น

เนื้อหาจำนวนมากที่จำเป็นในการแสดงหน้าเว็บถูกโหลดลงในแคชของเบราว์เซอร์

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

ดังนั้นจึงแนะนำให้มีการวัดในสนามหรือในห้องปฏิบัติการ

การทดสอบการเปลี่ยนแปลงเค้าโครงสะสม

ตัวชี้วัดเว็บไซต์ประสิทธิภาพการเปลี่ยนแปลงเค้าโครงสะสมสามารถวัดได้ด้วยวิธีใดวิธีหนึ่งดังต่อไปนี้:

เครื่องมือภาคสนาม

ภาคสนาม: สำหรับผู้ใช้จริงที่โต้ตอบกับเพจ สามารถวัดได้โดยใช้เครื่องมือ Field ต่อไปนี้:

รายงานประสบการณ์ผู้ใช้ Chrome

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

PageSpeed ​​Insights

เครื่องมือนี้จะวิเคราะห์เนื้อหาของหน้าเว็บและสร้างคำแนะนำเพื่อทำให้หน้านั้นเร็วขึ้นกว่าเดิม

Search Console (รายงาน Core Web Vitals)

Search Console แสดงให้เห็นว่าหน้าเว็บของคุณทำงานอย่างไรโดยอิงตามข้อมูลการใช้งานจริง (บางครั้งเรียกว่าข้อมูลภาคสนาม)

เครื่องมือแล็บ

ในห้องปฏิบัติการ: การใช้เครื่องมือเพื่อจำลองการโหลดหน้าเว็บในสภาพแวดล้อมที่มีการควบคุมสามารถวัดได้โดยใช้เครื่องมือสำหรับห้องปฏิบัติการต่อไปนี้:

Chrome DevTools

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

ประภาคาร

LightHouse เป็นโอเพ่นซอร์ส เครื่องมืออัตโนมัติสำหรับการปรับปรุงคุณภาพของหน้าเว็บ

คุณสามารถเรียกใช้กับหน้าเว็บใด ๆ สาธารณะหรือต้องมีการตรวจสอบสิทธิ์

มีการตรวจสอบประสิทธิภาพ การเข้าถึง เว็บแอปแบบก้าวหน้า SEO และอื่นๆ

การทดสอบหน้าเว็บ

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

อ้างอิงจาก web.dev ; ข้อควรระวัง: เครื่องมือแล็บมักจะโหลดหน้าในสภาพแวดล้อมสังเคราะห์และวัดเฉพาะการเปลี่ยนแปลงของเลย์เอาต์ระหว่างการโหลดเพจ

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

เครื่องมือด่วนเพื่อตรวจสอบการเปลี่ยนแปลงเค้าโครงสะสม

1. CLS ในรูปแบบ GIF จาก Defaced Tool โดย Chris Johnson เพื่อระบุ LS ที่มีปัญหา

2. เครื่องคำนวณการเปลี่ยนแปลงเค้าโครงสะสม

ข้อบกพร่องในการคำนวณ CLS

Google ได้รับความคิดเห็นเกี่ยวกับเมตริก CLS ที่ไม่เพียงพอสำหรับการวัดหน้าเว็บที่เปิดเป็นเวลานาน โดยมีการลงโทษด้วยคะแนนที่ต่ำกว่า

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

Windows เซสชันสำหรับการวัด CLS

Google ใช้วิธีกรอบเวลาเซสชันเพื่อวัด CLS

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

คะแนนรวมสำหรับแต่ละหน้าต่างเซสชันคือการเปลี่ยนแปลงรูปแบบสะสม ซึ่งเป็นการเลื่อนทั้งหมดของหน้าทั้งหมด

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

การอัปเดตทำให้คะแนน CLS แม่นยำยิ่งขึ้น

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

ด้วยตัววัด Core Web Vitals ที่กำลังจะกลายเป็นปัจจัยการจัดอันดับในเดือนพฤษภาคม 2021 การเปลี่ยนแปลงสำคัญในนาทีสุดท้ายจึงเป็นการเปลี่ยนแปลงที่สำคัญ

บทสรุป

การทำความเข้าใจ Cumulative Layout Shift (CLS) จะช่วยให้คุณได้รับประสบการณ์การใช้งานที่ดีขึ้นในอีกไม่กี่วันข้างหน้า

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