Cumulative Layout Shifts (CLS) เป็นส่วนหนึ่งของ Web Vitals ซึ่งเป็นชุดของเมตริกที่มุ่งให้ผู้ใช้ได้รับประสบการณ์ที่ดีขึ้น Google ประกาศว่าตั้งแต่เดือนพฤษภาคม 2021 คะแนน Web Vitals จะส่งผลต่อการจัดอันดับเว็บไซต์ของคุณในผลการค้นหา แม้ว่าผู้เผยแพร่โฆษณาที่มีประสบการณ์จะทราบเกี่ยวกับ Web Vitals ส่วนใหญ่อยู่แล้ว เช่น ความเร็วของหน้าเว็บ Cumulative Layout Shift เป็นเมตริกใหม่ CLS จะพิจารณาการเคลื่อนไหวขององค์ประกอบในพื้นที่ที่มองเห็นได้ (หรือที่เรียกว่า “วิวพอร์ต”) ของเว็บไซต์ของคุณ เมื่อใดก็ตามที่องค์ประกอบที่มองเห็นได้เปลี่ยนตำแหน่งเริ่มต้น
จะวัด Cumulative Layout Shifts (CLS) ได้อย่างไร
มีเครื่องมือสามอย่างที่แนะนำในการวัด Web Vitals โปรดทราบว่าพวกเขามักจะให้ผลลัพธ์ที่แตกต่างกันเล็กน้อย ไปที่ PageSpeed Insights เพื่อวัดการเปลี่ยนแปลงของเค้าโครงสะสมหรือ Web Vitals อื่นๆ สำหรับเว็บไซต์ใดๆ ที่พร้อมให้บริการทางออนไลน์ นี่คือเครื่องมือที่ฉันแนะนำให้คุณใช้หากคุณไม่เคยวัด Cumulative Layout Shift มาก่อน หากคุณเชื่อมต่อเว็บไซต์กับ Google Search Console ให้ไปที่ Core Web Vitals เพื่อค้นหาปัญหาที่โปรแกรมรวบรวมข้อมูลของ Google พบสำหรับเว็บไซต์ของคุณ ขณะพัฒนา ฉันใช้การทดสอบ Lighthouse ใน Chrome คุณสามารถค้นหาได้เป็นแท็บในเครื่องมือสำหรับนักพัฒนา พวกเขาอนุญาตให้ฉันทำการทดสอบบนเว็บไซต์ใดๆ ได้อย่างรวดเร็ว และดูว่าการเปลี่ยนแปลงส่งผลต่อพวกเขาอย่างไร ข้อเสียคือผลลัพธ์อาจแตกต่างกันอย่างมากจากเครื่องมืออื่นๆ เมื่อคุณลงชื่อเข้าใช้ไซต์ของคุณและใช้แคชของเบราว์เซอร์ อัปเดต: ฉันพบเครื่องมือที่มีประโยชน์อีกสองสามตัวหลังจากเผยแพร่บทความนี้ในตอนแรก: https://webvitals.dev/cls แสดงภาพองค์ประกอบการขยับและแสดงรายการ ส่วนขยาย Chrome นี้ช่วยให้คุณเห็นเมื่อมีการวัดคะแนน CLS เชิงลบ ไม่มีความสามารถในการเน้นองค์ประกอบ แต่เป็นเครื่องมือที่ใกล้เคียงที่สุดกับเครื่องมือที่ไม่ใช่ด้านเทคนิคเพื่อระบุจุดทริกเกอร์ขณะเลื่อน คุณต้องเปิดใช้งานตัวเลือกโอเวอร์เลย์ในการตั้งค่าส่วนขยาย ในเบราว์เซอร์ Chrome เอง ให้เปิดตัวเลือกเครื่องมือ dev เลือก More Tools > Rendering > Layout Shift Regions โดยเน้นที่การขยับภูมิภาคในไซต์ที่เข้าชม
Google วัด CLS เป็นตัวเลขเศษส่วน โดยที่คะแนน
<= 0.1 ถือว่าดีมาก
< 0.25 จำเป็นต้องปรับปรุง และ
>= 0.25 ถือว่าแย่มากและต้องการการแก้ไขทันที
วิธีลด Cumulative Layout Shifts (CLS)
ในการแก้ไขการเลื่อนเลย์เอาต์ คุณต้องจองพื้นที่ที่จะเติมโฆษณาในภายหลัง ไม่ว่าในกรณีใด คุณต้องระวังว่าพื้นที่ที่สงวนไว้จะว่างเปล่าหากไม่มีโฆษณาปรากฏขึ้น หากคุณจะยุบพื้นที่นั้นเมื่อมันว่างเปล่า คุณจะต้องสร้างการเลื่อนเค้าโครงใหม่ ซึ่งเป็นสิ่งที่เราต้องการป้องกันตั้งแต่แรก การใช้ CSS แบบอินไลน์เพื่อสงวนความสูงสำหรับตำแหน่ง คุณสามารถแก้ไขคะแนน CLS เชิงลบสำหรับโฆษณาที่แสดงพร้อมกับตำแหน่งที่สะดวกที่สุดได้โดยใช้ตัวเลือก CSS แบบอินไลน์ที่คุณจะพบในตัวเลือกสำหรับแต่ละตำแหน่ง นี่เป็นวิธีแก้ปัญหาที่ง่ายที่สุดที่เราแนะนำให้ปรับปรุงคะแนน CLS ของเว็บไซต์ของคุณ นอกจากนี้ยังใช้งานได้หากคุณใช้การป้องกันแคชในตำแหน่งเหล่านี้
ins class=”adsbygoogle”
style=”display:block; min-height: 300px”
data-ad-client=”ca-pub-xxxxxxxx”
data-ad-slot=”xxxxxxx”
data-ad-format=”auto”
data-full-width-responsive=”true
แก้ไข min-height: 300px ถ้าหน่วยโฆษณาสูงกว่านี้ ให้ทดสอบ แล้ววัดผลเพื่อหาค่าที่ดีที่สุด
