แนวทางปฏิบัติแนะนำสำหรับภาพสไลด์

เพิ่มประสิทธิภาพภาพหมุนเพื่อประสิทธิภาพและความสามารถในการใช้งาน

Katie Hempenius
Katie Hempenius
X

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

บทความนี้จะพูดถึงประสิทธิภาพและแนวทางปฏิบัติแนะนำด้าน UX สำหรับภาพสไลด์

รูปภาพที่แสดงภาพสไลด์

ประสิทธิภาพ

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

  • LCP (การแสดงผลเนื้อหาขนาดใหญ่ที่สุด)

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

  • INP (การโต้ตอบกับ Next Paint)

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

  • CLS (Cumulative Layout Shift)

    มีภาพหมุนจำนวนไม่มากนักที่ใช้ภาพเคลื่อนไหวที่ไม่สอดคล้องกันและไม่มีการประสาน สามารถสนับสนุน CLS ได้ ในหน้าที่มีภาพหมุนอัตโนมัติ จะมี ที่อาจทำให้เกิด CLS ได้ไม่รู้จบ CLS ประเภทนี้มักไม่ชัดเจน ทางสายตามนุษย์ ทำให้มองข้ามปัญหานี้ได้ง่าย เพื่อหลีกเลี่ยงปัญหานี้ ให้หลีกเลี่ยงการใช้ภาพเคลื่อนไหวที่ไม่ได้ทำการ Composite ในภาพสไลด์ (เช่น ระหว่างการเปลี่ยนสไลด์)

แนวทางปฏิบัติแนะนำด้านประสิทธิภาพ

โหลดเนื้อหาภาพสไลด์โดยใช้ HTML

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

ควรทำ
<div class="slides">
  <img src="https://example.com/cat1.jpg">
  <img src="https://example.com/cat2.jpg">
  <img src="https://example.com/cat3.jpg">
</div>
ไม่ควรทำ
const slides = document.querySelector(".slides");
const newSlide = document.createElement("img");
newSlide.src = "htttp://example.com/cat1.jpg";
slides.appendChild(newSlide);

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

หลีกเลี่ยงการเปลี่ยนแปลงเลย์เอาต์

การเปลี่ยนสไลด์และการควบคุมการนำทางเป็นแหล่งที่มา 2 ที่ การเปลี่ยนแปลงเลย์เอาต์ในภาพสไลด์

  • การเปลี่ยนสไลด์: การเปลี่ยนเลย์เอาต์ที่เกิดขึ้นระหว่างการเปลี่ยนสไลด์ มักเกิดจากการอัปเดตคุณสมบัติที่ทำให้เกิดเลย์เอาต์ขององค์ประกอบ DOM ตัวอย่างพร็อพเพอร์ตี้บางส่วน ได้แก่ left, top, width และ marginTop ใช้ CSS แทนเพื่อหลีกเลี่ยงการเปลี่ยนเลย์เอาต์ transform เพื่อเปลี่ยนองค์ประกอบเหล่านี้ ช่วงเวลานี้ การสาธิต แสดงวิธีใช้ transform เพื่อ สร้างภาพหมุนพื้นฐานได้

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

ต่อไปนี้คือประเด็นที่ทำให้เกิดความสับสนที่พบบ่อยเกี่ยวกับการวัด CLS สำหรับ ภาพสไลด์:

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

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนเลย์เอาต์ได้ที่แก้ไขข้อบกพร่องของเลย์เอาต์ กะ

ใช้เทคโนโลยีสมัยใหม่

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

อย่างไรก็ตาม คุณอาจไม่จําเป็นต้อง JavaScript เลย การเลื่อนใหม่ สแนป API ทำให้สามารถใช้การเปลี่ยนที่เหมือนภาพหมุน โดยใช้เฉพาะ HTML และ CSS

ลองดูแหล่งข้อมูลเกี่ยวกับการใช้ scroll-snap ที่อาจเป็นประโยชน์กับคุณ

เพิ่มประสิทธิภาพเนื้อหาในภาพสไลด์

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

การวัดประสิทธิภาพ

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

การวัด LCP สำหรับภาพสไลด์

ประเด็นสำคัญในการทำความเข้าใจวิธีการคำนวณ LCP สำหรับภาพสไลด์มีดังนี้

  • LCP จะพิจารณาองค์ประกอบของหน้าขณะระบายสีในเฟรม ผู้สมัครใหม่ สำหรับองค์ประกอบ LCP จะไม่ได้รับการพิจารณาอีกต่อไปเมื่อผู้ใช้โต้ตอบกับ (การแตะ เลื่อน หรือกดแป้น) ไปพร้อมกับหน้า ดังนั้นสไลด์ใดๆ ในการเล่นอัตโนมัติ ภาพสไลด์มีแนวโน้มที่จะเป็นองค์ประกอบ LCP สุดท้ายในขณะที่แบบคงที่ ภาพสไลด์เฉพาะสไลด์แรกจะเป็นตัวเลือก LCP ที่เป็นไปได้
  • หากแสดงรูปภาพ 2 รูปที่มีขนาดเท่ากัน ระบบจะพิจารณารูปภาพแรก องค์ประกอบ LCP องค์ประกอบ LCP จะอัปเดตก็ต่อเมื่อตัวเลือก LCP คือ ใหญ่กว่าองค์ประกอบ LCP ในปัจจุบัน ดังนั้นหากองค์ประกอบในภาพสไลด์ทั้งหมด องค์ประกอบ LCP ควรมีขนาดเท่ากัน องค์ประกอบ LCP ควรเป็นรูปภาพแรกที่แสดง
  • เมื่อประเมินตัวเลือก LCP LCP จะพิจารณา "ขนาดที่มองเห็นได้หรือ ขนาดที่แท้จริง แล้วแต่ว่าขนาดใดจะเล็กกว่า" ดังนั้น ถ้าการเล่นอัตโนมัติ ภาพสไลด์แสดงรูปภาพในขนาดที่สอดคล้องกัน แต่มีรูปภาพของ ต่างกันภายใน ขนาดต่างๆ ที่มีขนาดเล็กกว่าขนาดการแสดงผล องค์ประกอบ LCP อาจมีการเปลี่ยนแปลง สไลด์ปรากฏขึ้น ในกรณีนี้ ถ้ารูปภาพทั้งหมดแสดงพร้อมกัน ระบบจะพิจารณารูปภาพที่มีขนาดที่แท้จริงที่ใหญ่ที่สุดเป็น LCP หากต้องการให้ LCP ต่ำ คุณควรตรวจสอบว่าทุกรายการในการเล่นอัตโนมัติ ภาพหมุนมีขนาดภายในเหมือนกัน

การเปลี่ยนแปลงการคำนวณ LCP สำหรับภาพสไลด์ใน Chrome 88

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

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

การเปลี่ยนแปลงเกณฑ์ใน Chrome 121

Chrome 121 เปลี่ยนลักษณะการทำงานของรูปภาพที่เลื่อนในแนวนอน เช่น ภาพหมุน ซึ่งตอนนี้ใช้เกณฑ์เดียวกันกับการเลื่อนแนวตั้ง ซึ่งหมายความว่าสำหรับ Use Case ภาพหมุน ระบบจะโหลดรูปภาพก่อนที่จะแสดงในวิวพอร์ต ซึ่งหมายความว่าผู้ใช้มีแนวโน้มที่จะสังเกตเห็นการโหลดรูปภาพน้อยลง แต่พวกเขาต้องเสียค่าใช้จ่ายในการดาวน์โหลดมากกว่า ใช้การสาธิตการโหลดแบบ Lazy Loading แนวนอนเพื่อเปรียบเทียบลักษณะการทำงานใน Chrome กับ Safari และ Firefox

ข้อควรพิจารณาอื่นๆ

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

แสดงตัวควบคุมการนำทางที่โดดเด่น

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

ระบุความคืบหน้าในการนำทาง

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

รองรับท่าทางสัมผัสบนอุปกรณ์เคลื่อนที่

บนอุปกรณ์เคลื่อนที่ ควรรองรับท่าทางสัมผัสการปัดเพิ่มเติมจากแบบดั้งเดิม ตัวควบคุมการนำทาง (เช่น ปุ่มบนหน้าจอ)

ระบุเส้นทางการนำทางอื่น

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

แนวทางปฏิบัติแนะนำเพื่อให้อ่านได้ง่าย

ไม่ใช้การเล่นอัตโนมัติ

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

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

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

แยกข้อความและรูปภาพออกจากกัน

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

ใช้ชื่อที่กระชับ

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

แนวทางปฏิบัติแนะนำของผลิตภัณฑ์

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

อย่างไรก็ตาม ภาพหมุนไม่ได้มีประสิทธิภาพเสมอไป

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

ทดสอบสมมติฐานของคุณ

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

มีความเกี่ยวข้อง

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