ภาพเคลื่อนไหวส่งผลต่อ Core Web Vitals อย่างไร (LCP, INP และ CLS)
วิธีที่ภาพเคลื่อนไหวและรันไทม์ของภาพเคลื่อนไหวส่งผลต่อ LCP, INP และ CLS อย่างไร และวิธีปฏิบัติในการรักษาภาพเคลื่อนไหวให้สมบูรณ์โดยไม่กระทบต่อ Core Web Vitals
หลัก Takeaway
แอนิเมชันอาจส่งผลเสียต่อ Core Web Vitals ทั้ง 3 รายการ ได้แก่ ไฟล์แอนิเมชันจำนวนมากและรันไทม์อาจทำให้ LCP ล่าช้าได้ แอนิเมชันที่ขับเคลื่อนด้วย JavaScript สามารถบล็อกเธรดหลักและทำให้ INP แย่ลงได้ และการสร้างภาพเคลื่อนไหวคุณสมบัติเค้าโครงหรือการโหลดแอนิเมชันโดยไม่มีพื้นที่สงวนทำให้เกิด CLS รักษาเนื้อหา Hero โดยไม่ขึ้นอยู่กับภาพเคลื่อนไหว รันไทม์โหลดแบบ Lazy Load ใต้ครึ่งหน้าบน สร้างภาพเคลื่อนไหวและความทึบ และสงวนพื้นที่สำหรับองค์ประกอบภาพเคลื่อนไหวทุกรายการ
เมตริกทั้งสามและเป้าหมาย
Core Web Vitals ของ Google ซึ่งบันทึกไว้ใน web.dev วัดการโหลด (Largest Contentful Paint ดีที่ 2.5 วินาทีหรือน้อยกว่า) การตอบสนอง (การโต้ตอบกับ Next Paint ดีที่ 200 มิลลิวินาทีหรือน้อยกว่า) และความเสถียรของภาพ (Cumulative Layout Shift ดีที่ 0.1 หรือน้อยกว่า) วัดที่เปอร์เซ็นไทล์ที่ 75 ของการโหลดหน้าเว็บจริง
LCP: อย่าให้ฮีโร่รอแอนิเมชั่น
หากองค์ประกอบที่ใหญ่ที่สุดบนหน้าจอเป็นภาพเคลื่อนไหวที่ต้องมีรันไทม์และไฟล์ที่จะโหลดก่อน LCP จะรอทั้งสองอย่าง แสดงรูปภาพแบบคงที่หรือข้อความจริงก่อน จากนั้นจึงปรับปรุง และโหลดรันไทม์ของแอนิเมชันสำหรับเนื้อหาที่อยู่ใกล้หรือครึ่งหน้าล่างเมื่อจำเป็นเท่านั้น
INP: ทำให้เธรดหลักว่าง
INP วัดว่าหน้าเว็บตอบสนองต่อการแตะและคลิกเร็วแค่ไหน Web.dev อธิบายว่างานที่ยาวบนเธรดหลักทำให้การตอบสนองต่ออินพุตล่าช้า แอนิเมชันที่ใช้ JavaScript ที่ซับซ้อนในทุกเฟรม หรือแอนิเมชันหลายรายการเริ่มต้นพร้อมกันสามารถทำให้เกิดปัญหาดังกล่าวได้ ต้องการการเปลี่ยน CSS ในการแปลงและความทึบสำหรับเอฟเฟกต์ธรรมดา หยุดภาพเคลื่อนไหวนอกหน้าจอชั่วคราว และหลีกเลี่ยงการเริ่มทำงานหนักเพื่อตอบสนองต่อปฏิสัมพันธ์
CLS: พื้นที่สงวนและการแปลงภาพเคลื่อนไหว
Web.dev ขอแนะนำให้ใช้คุณสมบัติการแปลง CSS เพื่อทำให้เคลื่อนไหวโดยไม่ทำให้เกิดการเปลี่ยนแปลงเลย์เอาต์: ปรับขนาดแทนการเปลี่ยนความกว้างและความสูง แปลแทนการเปลี่ยนด้านบนหรือซ้าย กำหนดขนาดคงที่ให้กับองค์ประกอบภาพเคลื่อนไหวทั้งหมด รวมถึงภาพเคลื่อนไหวบนแคนวาสก่อนที่จะโหลด เพื่อให้หน้าไม่ข้ามเมื่อปรากฏขึ้น
รันไทม์ของ Canvas
รันไทม์ที่ใช้ Canvas เช่น Canvas Renderer ของ Lottie, Rive และ ExodeUI ดึงออกมานอก DOM ซึ่งหลีกเลี่ยงการทำงานเลย์เอาต์ต่อเฟรม แต่เพิ่มรันไทม์เพื่อดาวน์โหลดและรัน วัดข้อดีข้อเสียของเพจของคุณ: โหลดรันไทม์แบบ Lazy Loading, ปรับขนาด Canvas ใน CSS ไว้ด้านหน้า และทดสอบบนโทรศัพท์ระดับกลาง
คีย์ Principles ที่ต้องจำ
- เป้าหมาย: LCP ≤ 2.5 วินาที, INP ≤ 200 ms, CLS ≤ 0.1 ที่เปอร์เซ็นไทล์ที่ 75
- อย่าทำให้องค์ประกอบ LCP ขึ้นอยู่กับรันไทม์ของภาพเคลื่อนไหว
- รักษาเธรดหลักให้ว่างระหว่างการโต้ตอบ
- เคลื่อนไหวการเปลี่ยนแปลงและความทึบ; สงวนพื้นที่สำหรับองค์ประกอบภาพเคลื่อนไหว
- รันไทม์โหลดแบบ Lazy และทดสอบบนโทรศัพท์ระดับกลาง
คำถามที่พบบ่อย
แหล่งที่มา
- Web Vitals — web.dev
- Interaction to Next Paint (INP) — web.dev
- Cumulative Layout Shift (CLS) — web.dev