Core Web Vitals สามตัวในปี 2026

Google วัดตัวชี้วัดสนามหลักสามตัวสำหรับประสบการณ์หน้าเว็บ แต่ละตัวมีเกณฑ์สำหรับประสิทธิภาพ "ดี":

• Largest Contentful Paint (LCP) — เวลาในการแสดงองค์ประกอบที่มองเห็นได้ขนาดใหญ่ที่สุด ดี: ต่ำกว่า 2.5 วินาที
• Interaction to Next Paint (INP) — การตอบสนองต่อการโต้ตอบของผู้ใช้ทั้งหมด (แทนที่ FID ในเดือนมีนาคม 2024) ดี: ต่ำกว่า 200ms
• Cumulative Layout Shift (CLS) — ความเสถียรทางภาพระหว่างการโหลด ดี: ต่ำกว่า 0.1

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

แบนเนอร์ขอความยินยอมส่งผลเสียต่อ LCP อย่างไร

Largest Contentful Paint มักจะทำงานบนรูปภาพหลักหรือหัวเรื่อง รูปแบบการยินยอมหลายอย่างทำให้ล่าช้าโดยไม่จำเป็น:

สคริปต์ CMP ที่ขัดขวางการแสดงผล

การโหลด CMP แบบซิงโครนัสจากส่วนหัวของเอกสารจะหยุดการแยกวิเคราะห์ HTML จนกว่าสคริปต์จะดาวน์โหลดและทำงาน หาก CMP ถูกโฮสต์บน CDN ที่ช้าหรือมีแคชเย็น คุณสามารถเพิ่ม 200-800ms ให้กับ LCP ทั่วโลก

แบนเนอร์ที่ครอบองค์ประกอบหลัก

หากแบนเนอร์ขอความยินยอมถูกวางตำแหน่งเป็น modal overlay ที่ครอบองค์ประกอบ LCP เบราว์เซอร์ยังคงวัด LCP จากองค์ประกอบที่ถูกครอบ อย่างไรก็ตาม หากแบนเนอร์เป็นองค์ประกอบที่ถูกวาดขนาดใหญ่ที่สุด จะกลายเป็นผู้สมัคร LCP — และหากแสดงผลผ่าน JavaScript หลังจากโหลดหน้าเว็บ LCP จะสูงขึ้นอย่างเทียม

วิธีแก้ไข: การโหลดแบบ Async พร้อม Bootstrap ขนาดเล็กแบบ Inline

โหลด CMP เต็มรูปแบบแบบ async (`async` หรือ `defer`) โดยมีเพียงสคริปต์ inline ขนาดเล็กสำหรับการแสดงแบนเนอร์เริ่มต้น ตั้งเป้า bootstrap ที่เล็กกว่า 5KB แบบ gzipped ตรรกะพฤติกรรมเต็มรูปแบบ รายชื่อผู้ขาย และ UI chrome สามารถโหลดแบบ lazy หลังจากการวาดครั้งแรก

แบนเนอร์ขอความยินยอมส่งผลเสียต่อ INP อย่างไร

Interaction to Next Paint วัดเวลาตอบสนองที่แย่ที่สุดในคลิก การแตะ และการกดปุ่มทั้งหมดระหว่างเซสชัน การโต้ตอบการยินยอมคุกกี้มักเป็นการโต้ตอบแรกที่ผู้ใช้ทำ — ดังนั้นปุ่มยอมรับที่ช้าจึงทำลายคะแนน

งานหนักเมื่อยอมรับ

CMP หลายตัวทำงานแบบซิงโครนัสเมื่อยอมรับ: โหลดสคริปต์ผู้ขาย 40+ ตัว เขียนไปยัง localStorage ยิงเหตุการณ์ dataLayer กระตุ้นการอัปเดต Google Consent Mode หากเกิน 200ms INP จะได้รับผลกระทบ

วิธีแก้ไข: จัดคิวงานหลังการวาด

เมื่อคลิกยอมรับ ให้ซ่อนแบนเนอร์ทันทีและกำหนดเวลางานหนักด้วย `requestIdleCallback` หรือ `setTimeout(0)` ผู้ใช้เห็นแบนเนอร์หายไปทันที สคริปต์ผู้ขายโหลดในพื้นหลังโดยไม่ขัดขวางการโต้ตอบ

แบนเนอร์ขอความยินยอมส่งผลเสียต่อ CLS อย่างไร

Cumulative Layout Shift ติดตามการเคลื่อนไหวทางภาพที่ไม่คาดคิด แบนเนอร์เป็นแหล่งที่มาคลาสสิกของ CLS เมื่อถูกฉีดเข้า DOM หลังจากเนื้อหาถูกวาด

การฉีดแบนเนอร์ล่าช้า

หากแบนเนอร์ปรากฏขึ้น 800ms หลังจาก LCP มันจะผลักเนื้อหาลงและสร้างการเลื่อนเค้าโครง แม้แต่แบนเนอร์ขนาดเล็กก็สามารถกระตุ้นคะแนน CLS 0.1+ หากส่งผลกระทบต่อส่วนใหญ่ของวิวพอร์ต

การแสดงผลซ้ำของ Widget การตั้งค่าคุกกี้

Widget การตั้งค่าในส่วนท้ายที่โหลดโลโก้ผู้ขายแบบ async อาจทำให้ส่วนท้ายทั้งหมดไหลใหม่หลายครั้ง ทำให้ CLS แย่ลง

วิธีแก้ไข: จองพื้นที่ล่วงหน้า

ใช้ CSS เพื่อจองพื้นที่ของแบนเนอร์ตั้งแต่การวาดครั้งแรก — placeholder ความสูงคงที่ `min-height` ที่ส่วนท้าย หรือแบนเนอร์ที่ติดไว้ที่ด้านล่างที่ไม่ผลักเนื้อหา CMP สมัยใหม่ควรเสนอการกำหนดค่าแบบไม่มี CLS นอกกล่อง

Google Consent Mode V2 และประสิทธิภาพ

Consent Mode V2 ให้แท็ก Google ทำงานในสถานะที่ไม่มีคุกกี้ก่อนการยินยอม โดยส่งสัญญาณผ่าน `gtag('consent', 'default', {...})` ซึ่งดีสำหรับความต่อเนื่องของการวัด แต่ไลบรารี gtag.js เองมีขนาด 50-90KB โหลดแบบ async และตั้งค่าเริ่มต้นให้เร็วที่สุดเพื่อหลีกเลี่ยงสภาพการแข่งขัน

• ตั้งค่าเริ่มต้นก่อนโหลด gtag — วางการเรียกค่าเริ่มต้นการยินยอมใน head ก่อนสคริปต์ gtag.js
• ใช้ `analytics_storage: 'denied'` เป็นค่าเริ่มต้น — ลดข้อมูลที่เก็บรวบรวมก่อนการยินยอมให้น้อยที่สุด
• อัปเดตเมื่อยอมรับผ่าน requestIdleCallback — หลีกเลี่ยงการขัดขวาง main thread

การวัดผลกระทบของ CMP ต่อ Core Web Vitals

อย่าเดา — วัด ใช้เครื่องมือเหล่านี้เพื่อวัดผลกระทบของแบนเนอร์ของคุณ:

• PageSpeed Insights — ข้อมูลสนามจาก Chrome UX Report พร้อมการตรวจสอบ Lighthouse ในห้องปฏิบัติการ เปรียบเทียบคะแนนโดยมีและไม่มีสคริปต์ CMP
• Web Vitals Chrome extension — LCP, INP, CLS overlay แบบ real-time ระหว่างการทดสอบภายใน
• WebPageTest.org — มุมมอง filmstrip และ waterfall ที่แสดงให้เห็นว่าแบนเนอร์แสดงผลเมื่อใดและขัดขวางอะไร
• Search Console Core Web Vitals report — ข้อมูลสนาม 28 วันจัดกลุ่มตามรูปแบบ URL ตรวจสอบว่าหน้า Landing Page ที่มีแบนเนอร์ของคุณได้คะแนนแตกต่างจากหน้าที่ไม่มีหรือไม่

FlexyConsent ยังคงรวดเร็วอย่างไร