หลีกเลี่ยงปัญหาแอนิเมชั่นที่ไม่คอมโพสิต

คุณเคยคลิกบนเว็บไซต์เพียงเพื่อจะพบว่ามันกระตุกและกระตุกเมื่อคุณเลื่อนดูหรือไม่?

น่าหงุดหงิดใช่ไหม?

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

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

แต่ไม่ต้องกังวล มีวิธีแก้ไขปัญหานี้อยู่

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

เอาล่ะ.

แอนิเมชั่นแบบไม่คอมโพสิตคืออะไร?

แอนิเมชั่นแบบไม่คอมโพสิตคือเว็บแอนิเมชั่นประเภทหนึ่งที่ประมวลผลโดย CPU เป็นหลัก แทนที่จะเป็น GPU (หน่วยประมวลผลกราฟิก)

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

การตัดทอน Cumulative Layout Shift (CLS) จะช่วยเพิ่มประสิทธิภาพคะแนน Lighthouse Performance ของคุณ

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

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

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

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

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

หมายเหตุ: ต่อไปนี้เป็น เคล็ดลับง่ายๆ บางประการในการเร่งความเร็วไซต์ WordPress ของคุณเพื่อประสิทธิภาพที่ดีขึ้น

แอนิเมชั่นที่ไม่คอมโพสิตส่งผลต่อประสิทธิภาพของเพจและการแสดงผลของเบราว์เซอร์อย่างไร

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

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

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

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

จะตรวจจับแอนิเมชั่นที่ไม่คอมโพสิตได้อย่างไร

การตรวจจับภาพเคลื่อนไหวที่ไม่คอมโพสิตสามารถทำได้โดยใช้เครื่องมือวิเคราะห์ประสิทธิภาพ เช่น Google PageSpeed ​​Insights และ GTmetrix นี่คือ เครื่องมือทดสอบความเร็ว WordPress ที่ดีที่สุด 10 อันดับ ที่คุณสามารถใช้เพื่อตรวจจับภาพเคลื่อนไหวที่ไม่คอมโพสิต

เครื่องมือเหล่านี้จะวิเคราะห์แง่มุมต่างๆ ของประสิทธิภาพเว็บไซต์ของคุณ รวมถึงวิธีการแสดงภาพเคลื่อนไหว

คุณสามารถใช้มันได้ดังต่อไปนี้:

ข้อมูลเชิงลึกของ Google PageSpeed

• เยี่ยมชม เว็บไซต์ PageSpeed ​​Insights ป้อน URL หน้าเว็บของคุณ และคลิก 'วิเคราะห์' เครื่องมือนี้จะประเมินหน้าเว็บของคุณทั้งในด้านประสิทธิภาพบนมือถือและเดสก์ท็อป

• หลังจากการวิเคราะห์ PageSpeed ​​Insights จะให้คะแนนและรายงานโดยละเอียด ดูในส่วน "การวินิจฉัย" ของรายงาน
• มองหาคำเตือนที่ระบุว่า “หลีกเลี่ยงแอนิเมชั่นที่ไม่คอมโพสิต” สิ่งนี้บ่งชี้ว่าเพจของคุณมีภาพเคลื่อนไหวที่สามารถปรับให้เหมาะสมเพื่อประสิทธิภาพที่ดีขึ้น

จีที เมตริกซ์

• ไปที่เว็บไซต์ GTmetrix ป้อน URL เว็บไซต์ของคุณ และเริ่มการทดสอบ GTmetrix นำเสนอการวิเคราะห์ที่ครอบคลุมเกี่ยวกับประสิทธิภาพการโหลดเว็บไซต์ของคุณ

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

นอกจากนี้คุณยังสามารถทำการ ทดสอบความเครียด เพื่อพิจารณาประสิทธิภาพของเว็บไซต์ของคุณได้อีกด้วย

เบราว์เซอร์จัดการกับภาพเคลื่อนไหวได้อย่างไร?

เมื่อพูดถึงการจัดการภาพเคลื่อนไหว เบราว์เซอร์จะใช้สองส่วนหลักของคอมพิวเตอร์: CPU (หน่วยประมวลผลกลาง) และ GPU (หน่วยประมวลผลกราฟิก) แอนิเมชั่นธรรมดา เช่น การเปลี่ยนสีหรือข้อความ โดยปกติแล้ว CPU จะจัดการ

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

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

สาเหตุของแอนิเมชั่นที่ไม่คอมโพสิต

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

การสร้างภาพเคลื่อนไหวคุณสมบัติที่ไม่ใช่คอมโพสิต

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

คุณสมบัติเหล่านี้ไม่ได้รับการจัดการอย่างมีประสิทธิภาพโดย GPU ดังนั้นจึงทำให้ CPU มีภาระมากขึ้น ทำให้ภาพเคลื่อนไหวมีความราบรื่นน้อยลง

การใช้ JavaScript เพื่อสร้างภาพเคลื่อนไหว

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

พื้นที่ทาสีที่ซับซ้อน

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

กราฟิกหรือสื่อที่ไม่มีประสิทธิภาพ

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

การใช้เงาและฟิลเตอร์มากเกินไป

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

หมายเหตุ: เรียนรู้ สาเหตุอื่นๆ ของเว็บไซต์ที่ช้า

วิธีหลีกเลี่ยงภาพเคลื่อนไหวที่ไม่คอมโพสิต

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

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

• เมื่อมุ่งสู่การวินิจฉัย เราพบข้อผิดพลาด "หลีกเลี่ยงภาพเคลื่อนไหวที่ไม่คอมโพสิต"

ต่อไปนี้เป็นขั้นตอนที่คุณต้องปฏิบัติตามเพื่อแก้ไขปัญหานี้

• ไปที่แดชบอร์ด WordPress ของคุณ
• เลือก ลักษณะที่ปรากฏ > ปรับแต่ง
• คุณอาจพบโค้ด CSS ใต้ส่วน "CSS เพิ่มเติม" มีโอกาสสูงที่โค้ดนี้จะไม่ใช้ภาพเคลื่อนไหว CSS ที่ปรับให้เหมาะสม ซึ่งทำให้เกิดข้อผิดพลาดนี้

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

การเปลี่ยนแปลงที่ 1: การเพิ่มคุณสมบัติ Will-Change

การเปลี่ยนแปลงนี้เป็นการแจ้งเบราว์เซอร์เกี่ยวกับการเปลี่ยนแปลงแอนิเมชั่นที่กำลังจะเกิดขึ้น ซึ่งสามารถช่วยเพิ่มประสิทธิภาพการเรนเดอร์ได้

 .my-นิเมชั่น {

    ความกว้าง: 100px;

    ความสูง: 100px;

    สีพื้นหลัง: สีแดง;

    ตำแหน่ง: แน่นอน;

    ความตั้งใจที่จะเปลี่ยนแปลง: การเปลี่ยนแปลง, ความทึบ; /* เพิ่มบรรทัด */

    แอนิเมชั่น: complexMove 5s เชิงเส้นไม่มีที่สิ้นสุด;

}

/* คีย์เฟรมที่เหลือยังคงไม่เปลี่ยนแปลง */

การเปลี่ยนแปลงที่ 2: การลดความซับซ้อนของแอนิเมชั่น

ในที่นี้ การเปลี่ยนแปลงขนาดที่ 50% ได้รับการแก้ไขจากขนาด (2) เป็นขนาด (1.5) ซึ่งจะช่วยลดความซับซ้อนและความเข้มของภาพเคลื่อนไหว

 .my-นิเมชั่น {

    /* ... คุณสมบัติอื่นๆ ... */

    ความตั้งใจที่จะเปลี่ยนแปลง: การเปลี่ยนแปลง, ความทึบ; /* สมมติว่าการเปลี่ยนแปลง 1 ถูกเก็บไว้ */

    แอนิเมชั่น: complexMove 5s เชิงเส้นไม่มีที่สิ้นสุด;

}

@keyframes ซับซ้อนMove {

    /* ... คีย์เฟรม 0% และ 100% ... */

    50% {

        แปลงร่าง: แปล X (300%) หมุน (180 องศา) สเกล (1.5); /* แก้ไขบรรทัด */

        ความทึบ: 0.5;

    }

    /* ... คีย์เฟรม 100% ... */

}

นี่คือลักษณะของโค้ดสุดท้ายของคุณ:

 .my-นิเมชั่น {

    ความกว้าง: 100px;

    ความสูง: 100px;

    สีพื้นหลัง: สีแดง;

    ตำแหน่ง: แน่นอน;

    ความตั้งใจที่จะเปลี่ยนแปลง: การเปลี่ยนแปลง, ความทึบ; /* แจ้งเบราว์เซอร์ถึงการเปลี่ยนแปลงที่กำลังจะเกิดขึ้น */

    แอนิเมชั่น: complexMove 5s เชิงเส้นไม่มีที่สิ้นสุด;

}

@keyframes ซับซ้อนMove {

    0%, 100% {

        แปลงร่าง: แปล X (0) หมุน (0) สเกล (1);

        ความทึบ: 1;

    }

    50% {

        แปลงร่าง: แปล X (300%) หมุน (180 องศา) สเกล (1.5); /* ปรับมาตราส่วนเพื่อลดความซับซ้อน */

        ความทึบ: 0.5;

    }

}

• เพียงลบโค้ดก่อนหน้าแล้วคัดลอกและวางโค้ดใหม่นี้ลงใน CSS เพิ่มเติมของคุณ การดำเนินการนี้จะไม่เปลี่ยนภาพเคลื่อนไหว แต่จะลบข้อผิดพลาดนี้อย่างแน่นอน

• คุณสามารถเห็นข้อผิดพลาดไม่มีอยู่อีกต่อไป
• และข้อดีคือ ด้วยโค้ดที่ได้รับการปรับปรุงแล้ว คุณสามารถเพิ่มคะแนนประสิทธิภาพได้ เราเห็นตั้งแต่ตอนต้นของส่วนนี้ว่าคะแนนผลงานอยู่ที่ 77
• นี่คือคะแนนประสิทธิภาพที่ดีขึ้น:

ดังนั้นเคล็ดลับทั่วไปบางประการที่คุณต้องจำไว้เพื่อแก้ไขข้อผิดพลาดนี้คือ:

เคล็ดลับที่ 1: เพิ่มประสิทธิภาพภาพเคลื่อนไหว CSS

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

นี่คือโค้ดตัวอย่างก่อนและหลังการปรับให้เหมาะสม:

ก่อนการเพิ่มประสิทธิภาพ:

 .animate-ซ้าย {

    ตำแหน่ง: ญาติ;

    แอนิเมชั่น: moveLeft 2s เชิงเส้นไม่มีที่สิ้นสุด;

}

@keyframes ย้ายซ้าย {

    จาก { ซ้าย: 0; }

    ถึง { ซ้าย: 100px; }

}

หลังจากการเพิ่มประสิทธิภาพ:

 .animate-ซ้าย {

    ตำแหน่ง: ญาติ;

    แอนิเมชั่น: moveLeft 2s เชิงเส้นไม่มีที่สิ้นสุด;

}

@keyframes ย้ายซ้าย {

    จาก { แปลง: แปล X (0); }

    ถึง { แปลง: TranslateX(100px); }

}

เคล็ดลับ 2: การใช้ประโยชน์จากพลังของคุณสมบัติ 'Will-Change' ของ CSS

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

ต่อไปนี้เป็นวิธีใช้คุณสมบัติ will-change

• แทรกบรรทัดต่อไปนี้ในโค้ดของคุณ

 ความตั้งใจที่จะเปลี่ยนแปลง: การเปลี่ยนแปลง, ความทึบ; /* เพิ่มบรรทัด */

เคล็ดลับ 3: การถ่ายโอนภาพเคลื่อนไหวไปยัง GPU

การถ่ายโอนภาพเคลื่อนไหวไปยัง GPU (หน่วยประมวลผลกราฟิก) เป็นเทคนิคในการเพิ่มประสิทธิภาพภาพเคลื่อนไหวบนเว็บ ทำให้ภาพเคลื่อนไหวราบรื่นขึ้นและกินพื้นที่ CPU (หน่วยประมวลผลกลาง) น้อยลง

วิธีการนี้มีประสิทธิภาพโดยเฉพาะอย่างยิ่งในการแก้ไขปัญหาแอนิเมชั่นที่ไม่คอมโพสิต เนื่องจากเป็นการใช้ประโยชน์จากความสามารถของ GPU ในการจัดการงานกราฟิกได้อย่างมีประสิทธิภาพมากขึ้น

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

คุณสามารถใช้คุณสมบัติการแปลงและความทึบแทนซ้ายและขวาได้ นี่คือตัวอย่าง:

รหัสที่ไม่ได้เพิ่มประสิทธิภาพ:

 @keyframes ย้ายซ้าย {

    จาก { ซ้าย: 0; }

    ถึง { ซ้าย: 100px; }

}

รหัสที่ปรับให้เหมาะสม:

 @keyframes ย้ายซ้าย {

    จาก { แปลง: แปล X (0); }

    ถึง { แปลง: TranslateX(100px); }

}

เคล็ดลับ 4: การใช้ไลบรารีและเครื่องมือที่มีประสิทธิภาพ

การรวมไลบรารีที่มีประสิทธิภาพ เช่น GreenSock Animation Platform (GSAP) หรือ Velocity.js จะมีประสิทธิภาพสูงในการแก้ไขข้อผิดพลาดของแอนิเมชันที่ไม่ได้ประกอบ

ไลบรารีเหล่านี้ได้รับการปรับให้เหมาะสมเพื่อประสิทธิภาพ โดยนำเสนอภาพเคลื่อนไหวที่ราบรื่นและมีประสิทธิภาพมากกว่า CSS หรือ JavaScript มาตรฐาน

หากต้องการรวมไลบรารี GSAP ให้ทำตามขั้นตอนเหล่านี้

• ค้นหาลิงก์ CDN สำหรับ GSAP
• เปิดไฟล์ HTML ที่คุณต้องการใช้ GSAP
• คุณต้องวางลิงก์ CDN ไว้ในแท็ก <script> แท็กนี้ควรวางไว้ใกล้กับส่วนท้ายของส่วน <body> ของคุณ

 <!DOCTYPE html>

<html>

<หัว>

    <title>หน้าเว็บของคุณ</title>

    <!-- องค์ประกอบส่วนหัวอื่นๆ -->

</หัว>

<ร่างกาย>

    <!-- เนื้อหา HTML ของคุณอยู่ที่นี่ -->

    <!-- สคริปต์ GSAP CDN ที่ส่วนท้ายของเนื้อหา -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>

</ร่างกาย>

</html>

Cloudways Hosting สามารถเสริมภาพเคลื่อนไหวที่ปรับให้เหมาะสมที่สุดของคุณได้อย่างไร

Cloudways Hosting ปรับปรุงเว็บไซต์ด้วยภาพเคลื่อนไหวที่ปรับให้เหมาะสมโดยนำเสนอความเร็วที่รวดเร็วและสถานะการออนไลน์สูงจากผู้ให้บริการคลาวด์ชั้นนำเช่น DigitalOcean, AWS และ Google Cloud โซลูชันแคชขั้นสูง รวมถึง Memcached, Varnish และ Redis ช่วยให้มั่นใจได้ว่าสามารถโหลดภาพเคลื่อนไหวได้อย่างรวดเร็ว สแต็กที่ได้รับการปรับปรุงประสิทธิภาพของแพลตฟอร์ม ร่วมกับ Enterprise CDN ของ Cloudflare ช่วยเพิ่มประสิทธิภาพแอนิเมชันเพิ่มเติม โดยเฉพาะอย่างยิ่งในช่วงที่มีปริมาณการใช้งานสูงสุด เมื่อรวมกับคุณสมบัติความปลอดภัยที่แข็งแกร่ง Cloudways มอบสภาพแวดล้อมโฮสติ้งในอุดมคติและคุ้มค่าสำหรับเว็บไซต์ที่เต็มไปด้วยแอนิเมชั่น

สรุป

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

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

หากคุณมีคำถามใดๆ เกี่ยวกับหัวข้อนี้ โปรดติดต่อเรา