ปัญหา Cumulative Layout Shift (CLS) และวิธีแก้ไข: ทำให้เว็บของคุณไม่ขยับไปมา น่ารำคาญ

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

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

CLS วัดอะไรกันแน่?

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

CLS เกิดขึ้นเมื่อไหร่?

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

ทำไม CLS ถึงสำคัญ?

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

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

สาเหตุหลักที่ทำให้เกิด CLS

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

1. รูปภาพที่ไม่มีขนาดกำกับ

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

รูปภาพมีผลกระทบอย่างไร?

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

ตัวอย่างที่พบบ่อย

• รูปภาพโฆษณาที่โหลดช้า
• รูปโปรไฟล์ หรือแบนเนอร์ที่ยังไม่พร้อมแสดง

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

2. โฆษณาที่โหลดเข้ามาทีหลัง

โฆษณาเป็นอีกหนึ่งแหล่งที่มาสำคัญของ CLS โดยเฉพาะโฆษณาที่มักจะแทรกเข้ามาในหน้าเว็บ หลังจากที่เนื้อหาหลักเริ่มแสดงผลแล้ว

ปัญหาจาก AdSense และอื่น ๆ

• ขนาดไม่แน่นอน: โฆษณาอาจมีขนาดที่เปลี่ยนแปลงได้ หรือมีขนาดใหญ่กว่าที่คาดการณ์ไว้
• การโหลดแบบ Dynamic: ระบบโฆษณาอาจมีการแสดงผลโฆษณาที่แตกต่างกันไปในแต่ละครั้ง ทำให้การจองพื้นที่ยากขึ้น

สิ่งที่ควรระวัง

• พื้นที่ยึดโฆษณา (Ad Placeholder): ควรมีการกำหนดพื้นที่คงที่สำหรับโฆษณา แม้จะยังไม่มีโฆษณาแสดงก็ตาม
• การโหลดโฆษณา: พิจารณาการโหลดโฆษณาที่ส่งผลกระทบต่อการแสดงผลเนื้อหาหลักน้อยที่สุด

3. iframe และ Multimedia ที่ไม่มีขนาด

iframe, วิดีโอ, หรือคอนเทนต์อื่นๆ ที่ฝังเข้ามาจากภายนอก (เช่น YouTube, Google Maps) ก็สามารถเป็นต้นเหตุของ CLS ได้เช่นกัน หากไม่มีการกำหนดขนาดที่ชัดเจน

ข้อควรพิจารณาสำหรับ iframe

• ขนาดไม่ตายตัว: iframe ที่มีเนื้อหาตอบสนอง (responsive) อาจมีขนาดที่เปลี่ยนไปตามอุปกรณ์
• การโหลดเนื้อหา: เนื้อหาภายใน iframe อาจมีการเปลี่ยนแปลงเลย์เอาต์ของตัวเอง

การจัดการ Embeds

• ตั้งค่าขนาด: ควรกำหนด width และ height ให้กับ iframe หรืออิลิเมนต์ที่ใช้ฝังคอนเทนต์
• Placeholder: ใช้ placeholder ที่มีขนาดเท่ากับ iframe ที่จะมาแสดง

4. ฟอนต์เว็บ (Web Fonts) ที่โหลดล่าช้า

ปัญหาจากฟอนต์เว็บสามารถส่งผลต่อ CLS ได้ในสองลักษณะหลัก คือ Flash of Invisible Text (FOIT) และ Flash of Unstyled Text (FOUT)

Flash of Invisible Text (FOIT)

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

Flash of Unstyled Text (FOUT)

• ลักษณะ: หน้าเว็บใช้ฟอนต์เริ่มต้นของระบบ (system font) ไปก่อนในช่วงที่ฟอนต์เว็บกำลังโหลด เมื่อฟอนต์เว็บโหลดเสร็จ จึงสลับไปใช้ฟอนต์เว็บที่สวยงามกว่า
• ผลกระทบ: แม้จะเห็นข้อความ แต่การเปลี่ยนฟอนต์อาจทำให้เลย์เอาต์ของบรรทัดต่างๆ เปลี่ยนไปเล็กน้อย ส่งผลให้เกิด CLS

วิธีการจัดการฟอนต์

• Preload ฟอนต์: ใช้ เพื่อบอกเบราว์เซอร์ให้ดาวน์โหลดฟอนต์มาก่อน
• ใช้ font-display: กำหนดค่า font-display ใน CSS เพื่อควบคุมพฤติกรรมของเบราว์เซอร์ในการแสดงผลฟอนต์
• Self-host ฟอนต์: หากเป็นไปได้ การโฮสต์ฟอนต์เองอาจช่วยให้ควบคุมการโหลดได้ดีขึ้น

5. เนื้อหาแบบ Dynamic ที่แทรกเข้ามา

เนื้อหาที่ถูกสร้างขึ้นหรือแทรกเข้ามาด้วย JavaScript หลังจากที่หน้าเว็บแสดงผลไปแล้ว เช่น กล่องข้อความแจ้งเตือน (pop-ups), สไลด์โชว์, หรือส่วนอัปเดตข้อมูลต่างๆ

ปัญหาจากการสร้างเนื้อหาแบบ Real-time

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

การป้องกัน CLS จาก Dynamic Content

• จองพื้นที่: หากทราบขนาดของเนื้อหาที่กำลังจะแทรกเข้ามา ควรจองพื้นที่ไว้ล่วงหน้า
• กำหนดขนาดขั้นต่ำ: ใช้ min-height เพื่อให้แน่ใจว่าพื้นที่ว่างจะไม่หายไป
• ควบคุมเวลาการแสดงผล: พิจารณาว่าจะให้เนื้อหา Dynamic แสดงเมื่อใด และอย่างไร

วิธีการแก้ไข CLS อย่างมีประสิทธิภาพ

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

1. กำหนดขนาดให้กับรูปภาพและวิดีโอ (Attributes)

นี่คือพื้นฐานสำคัญที่สุดในการป้องกัน CLS ให้กับองค์ประกอบภาพและวิดีโอ

การกำหนด width และ height

• HTML: ระบุ width และ height ในแท็ก หรือ โดยตรง

```html

```

• CSS: หากต้องการให้รูปภาพมีความยืดหยุ่น (responsive) สามารถใช้ CSS ร่วมกับการกำหนด width และ height ใน HTML ได้

```css

img {

max-width: 100%;

height: auto; / หรือกำหนด aspect ratio /

}

```

การกำหนด height: auto; จะช่วยให้สัดส่วนถูกต้องเมื่อปรับขนาด แต่การมี width และ height ใน HTML คือหัวใจสำคัญในการจองพื้นที่

การใช้ Aspect Ratio

สำหรับรูปภาพที่เป็น responsive การกำหนด aspect ratio จะช่วยให้เบราว์เซอร์จองพื้นที่อย่างถูกต้อง โดยไม่ต้องกำหนด height จริง แต่ใช้ aspect-ratio CSS property แทน

• CSS (แนะนำสำหรับ modern browsers):

```css

img {

width: 100%;

aspect-ratio: 16 / 9; / หรืออัตราส่วนของรูปภาพ /

object-fit: cover; / ถ้าต้องการให้รูปภาพเต็มพื้นที่ /

}

```

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

2. จัดการฟอนต์เว็บอย่างชาญฉลาด

ลดผลกระทบจากฟอนต์เว็บด้วยการปรับแต่งการโหลดและการแสดงผล

การใช้ font-display

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

```css

@font-face {

font-family: 'MyCustomFont';

src: url('myfont.woff2') format('woff2');

font-display: swap;

}

```

• optional: เบราว์เซอร์จะแสดงผลฟอนต์แค่ครั้งแรกที่โหลด หากฟอนต์เว็บโหลดไม่เสร็จภายในกรอบเวลาที่กำหนด ก็จะใช้ฟอนต์สำรองไปเลย ซึ่งเหมาะสำหรับคอนเทนต์ที่ไม่สำคัญมาก ทำให้ลด CLS ได้ดีในบางกรณี
• block: เหมือนกับ optional แต่ถ้าฟอนต์เว็บโหลดไม่เสร็จ จะไม่แสดงข้อความเลยในช่วงเวลาที่กำหนด (timeout) ซึ่งอาจทำให้เกิด FOIT ที่นานเกินไป

การ preload ฟอนต์

การบอกให้เบราว์เซอร์ดาวน์โหลดฟอนต์มาก่อนจะช่วยลดเวลาในการแสดงผล

• HTML (ใน ):

```html

```

crossorigin จำเป็นต้องใส่เมื่อมีการโหลดฟอนต์ข้ามโดเมน หรือใช้ preload กับฟอนต์

3. กำหนดพื้นที่สำหรับโฆษณาและ iframe (Placeholders)

หลีกเลี่ยงการที่องค์ประกอบเหล่านี้เกิดการเลื่อนได้อย่างไร? ง่ายๆ คือการจองพื้นที่ให้พวกมันไว้ก่อน

การสร้าง Placeholder

• HTML: จอง div ที่มีขนาดคงที่ไว้ในตำแหน่งที่คาดว่าโฆษณาหรือ iframe จะปรากฏ

```html

```

เมื่อโฆษณาหรือ iframe โหลดเข้ามา มันจะเข้ามาแทนที่ div placeholder นี้แทนที่จะดันเนื้อหาอื่น

การใช้ CSS สำหรับการจองพื้นที่

• min-height: หากขนาดขององค์ประกอบที่กำลังจะโหลดไม่แน่นอน อาจใช้ min-height เพื่อให้แน่ใจว่าพื้นที่ว่างอย่างน้อยเท่านี้จะถูกสงวนไว้

```css

.dynamic-content {

min-height: 100px;

}

```

4. จัดการคอนเทนต์ Dynamic ที่โหลดด้วย JavaScript

เมื่อ JavaScript ต้องสร้างหรือปรับเปลี่ยนเลย์เอาต์ ควรทำอย่างระมัดระวัง

การคาดเดาขนาด

• คำนวณล่วงหน้า: หากเป็นไปได้ พยายามคำนวณขนาดของคอนเทนต์ที่จะแทรกเข้ามาให้ใกล้เคียงที่สุดก่อนที่จะทำการแทรก
• Fixed Size UI Elements: สำหรับ UI elements ที่มีความสำคัญ (เช่น ปุ่ม call-to-action) พยายามให้มันมีขนาดคงที่ เพื่อไม่ให้เกิดการเปลี่ยนตำแหน่ง

การควบคุมการโหลด

• Lazy Loading: ใช้เทคนิค lazy loading กับองค์ประกอบที่ไม่ใช่ส่วนที่สำคัญที่สุดในหน้าเว็บ เพื่อให้หน้าเว็บหลักโหลดเสร็จเร็วขึ้น
• รูปภาพ: ใช้ loading="lazy" ในแท็ก
• iframe: ใช้ loading="lazy" ในแท็ก
  • เริ่มต้นที่พื้นฐาน: กำหนดขนาดให้กับรูปภาพ วิดีโอ และ iframe คือจุดเริ่มต้นที่สำคัญที่สุด
  • ความคาดเดาได้: เป้าหมายคือทำให้เว็บแสดงผลได้อย่างสม่ำเสมอและคาดเดาได้
  • ทดสอบบ่อยๆ: ใช้เครื่องมือต่างๆ เพื่อตรวจสอบประสิทธิภาพและหาจุดที่ต้องปรับปรุง
  • ผู้ใช้ต้องมาก่อน: สุดท้ายแล้ว การแก้ไข CLS ก็เพื่อมอบประสบการณ์การใช้งานที่ดีที่สุดให้กับผู้ใช้ของเรา

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

  FAQs

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

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

  2. ทำไม Cumulative Layout Shift ถึงสำคัญ?

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

  3. วิธีการวัด Cumulative Layout Shift คืออะไร?

  CLS สามารถวัดได้โดยใช้ Chrome User Experience Report หรือ Lighthouse โดยการใช้ Core Web Vitals report ที่มีให้ใน Google Search Console

  4. วิธีการลด Cumulative Layout Shift คืออะไร?

  เพื่อลด CLS ควรใช้ขนาดขององค์ประกอบที่แน่นอน และใช้ค่าความกว้างและความสูงที่ถูกต้อง รวมถึงการใช้ CSS เพื่อรักษาพื้นที่สำหรับองค์ประกอบ

  5. การปรับปรุง Cumulative Layout Shift มีผลต่อ SEO หรือไม่?

  ใช่ การปรับปรุง Cumulative Layout Shift สามารถมีผลต่อการทำ SEO โดย Google ได้ประกาศว่า CLS จะเป็นหนึ่งในตัวชี้วัดสำคัญของ Core Web Vitals ที่มีผลต่อการจัดอันดับในการค้นหา