Cumulative Layout Shift (CLS): มันคืออะไร & วิธีเพิ่มประสิทธิภาพเว็บไซต์ของคุณให้เหมาะสม

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

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

สมัครสมาชิกช่อง Youtube ของเรา

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

ไม่มีวิธีใดที่ดีไปกว่าในการแสดงให้เห็นว่าคะแนน CLS ที่สูง (หมายถึงอะไรที่มากกว่า 0.10 จาก PageSpeed ​​Insights ของ Google) แสดงถึงอะไรที่ดีไปกว่าการแสดงตัวอย่างด้วยภาพ นี่คือเว็บไซต์ที่มีเลย์เอาต์ที่เปลี่ยนแปลงตลอดเวลาเมื่อโหลดหน้าเว็บ โปรดทราบว่าเราไม่ได้เลื่อนเลยเมื่อถ่ายภาพนี้ วิวพอร์ตของเรายังคงเหมือนเดิม แต่หน้าจะเปลี่ยนไปอย่างมากในตัวเอง:

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

และผู้ใช้ของคุณจะเป็นเช่นนั้น

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

ไม่ได้หมายความว่าเว็บไซต์ที่ซับซ้อนทั้งหมดมีคะแนน CLS สูง ยกตัวอย่าง Amazon คงไม่มีใครบอกว่ายักษ์ใหญ่ด้านอีคอมเมิร์ซใช้การออกแบบเว็บที่ตรงไปตรงมา ทว่าแทบไม่มีการเปลี่ยนเลย์เอาต์ให้เห็นเลยขณะเรียกดูแค็ตตาล็อก

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

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

CLS เป็นหนึ่งในสาม Core Web Vitals ที่ Google ใช้วัดเพื่อช่วยในการพิจารณาว่าเว็บไซต์ของคุณมอบประสบการณ์ผู้ใช้ที่ดี (UX) หรือไม่ Core Web Vitals อื่นๆ ได้แก่ First Input Delay (FID) และ Largest Contentful Paint (LCP) ซึ่งคุ้มค่ากับความพยายามที่คุณใช้ในการเพิ่มประสิทธิภาพอย่างแน่นอน

วิธีการวัด CLS

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

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

บริการนี้ช่วยให้คุณสามารถป้อน URL และรับคะแนนประสิทธิภาพโดยรวมโดยอิงจากข้อมูลที่ Google รวบรวมในช่วง 28 วันที่ผ่านมา คะแนนนั้นพิจารณาเมตริกหลายตัว รวมถึง CLS, FCP และ LCP

สำหรับการทดสอบนี้ เราเลือกเว็บไซต์ที่ไม่มี CLS ที่มองเห็นได้ PageSpeed ​​Insights ยืนยันข้อสงสัยของเรา เนื่องจากให้ผลลัพธ์ที่เป็นบวกอย่างท่วมท้นด้วยคะแนน CLS ที่แข็งแกร่ง

โปรดสังเกตว่า PageSpeed ​​Insights มีการแบ่งเปอร์เซ็นต์สำหรับแต่ละคะแนน ในกรณีนี้ 91% ของผู้ใช้พบว่าไม่มีการเปลี่ยนเลย์เอาต์ขณะโหลดเว็บไซต์ทดสอบ อย่างไรก็ตาม ผู้เยี่ยมชมที่เหลือประสบกับการเปลี่ยนเลย์เอาต์ในระดับหนึ่ง

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

นอกจากข้อมูลภาคสนามแล้ว PageSpeed ​​Insights ยังเสนอสิ่งที่เรียกว่า ข้อมูลแล็บ นี่คือคะแนนประสิทธิภาพจากการทดสอบครั้งเดียว แทนที่จะเป็นข้อมูลที่รวบรวมในระยะเวลานาน (ซึ่งถือเป็น ข้อมูลภาคสนาม )

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

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

วิธีการระบุสาเหตุของการเปลี่ยนแปลงเค้าโครง

หากคุณต้องการระบุองค์ประกอบที่ทำให้เกิดการเปลี่ยนแปลงรูปแบบบนเว็บไซต์ของคุณ คุณสามารถทำได้โดยใช้เครื่องมือ Chrome Dev หากคุณเปิดเครื่องมือ (CTRL-SHIFT-I) และข้ามไปที่แท็บ ประสิทธิภาพ คุณจะสามารถบันทึกการทดสอบประสิทธิภาพในขณะที่คุณท่องเว็บ

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

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

หากคุณต้องการตรวจสอบ Core Web Vitals ของเว็บไซต์ของคุณ เราขอแนะนำให้คุณตั้งค่าบัญชี Google Search Console คุณจะสามารถตรวจสอบเมตริกประสิทธิภาพและ Core Web Vitals จาก Search Console ซึ่งเป็นประโยชน์สำหรับ Search Engine Optimization (SEO) เรารู้สึกว่าคุณควรตรวจสอบ Search Console อย่างสม่ำเสมอ อย่างไรก็ตาม การมีเมตริกเฉพาะที่คุณกำลังติดตามอยู่นั้นไม่ใช่เรื่องเสียหาย

วิธีเพิ่มประสิทธิภาพคะแนน CLS ของคุณ

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

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

ลักษณะแอตทริบิวต์เหล่านั้นมีลักษณะอย่างไรใน HTML:

<img src="http://imageurl.com" width="120" height="90" alt="Image Alt Text">

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

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

img {
max-width: 90vw;
height: auto;
}

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

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

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

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

Cumulative Layout Shift (CLS) คำถามที่พบบ่อย

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

CLS ส่งผลต่อประสิทธิภาพของเว็บไซต์ของฉันอย่างไร

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

CLS สำคัญน้อยกว่าคะแนน FCP หรือ LCP หรือไม่

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

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

คะแนน CLS ที่ดีคืออะไร?

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

บทสรุป

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

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

คุณมีคำถามเกี่ยวกับ CLS หรือวิธีลด CLS ของคุณอย่างไร? พูดคุยเกี่ยวกับพวกเขาในส่วนความคิดเห็นด้านล่าง!

ภาพเด่นผ่านพี่ชาย / shutterstock.com