เพิ่มประสิทธิภาพและความสามารถในการใช้งานของภาพสไลด์
ภาพสไลด์คือคอมโพเนนต์ UX ที่แสดงเนื้อหาในลักษณะภาพสไลด์ ภาพหมุนสามารถ "เล่นอัตโนมัติ" หรือให้ผู้ใช้ไปยังส่วนต่างๆ ด้วยตนเองได้ แม้ว่าภาพสไลด์จะใช้ในที่อื่นๆ ได้ แต่ส่วนใหญ่จะใช้เพื่อแสดงรูปภาพ ผลิตภัณฑ์ และโปรโมชันในหน้าแรก
บทความนี้กล่าวถึงแนวทางปฏิบัติแนะนำด้านประสิทธิภาพและ UX สําหรับภาพสไลด์
ประสิทธิภาพ
ภาพสไลด์ที่ติดตั้งใช้งานอย่างถูกต้องควรส่งผลต่อประสิทธิภาพเพียงเล็กน้อยหรือไม่ส่งผลเลย แต่ภาพสไลด์มักจะมีชิ้นงานสื่อขนาดใหญ่ ชิ้นงานขนาดใหญ่อาจส่งผลต่อประสิทธิภาพ ไม่ว่าจะแสดงในภาพสไลด์หรือที่อื่น
LCP (การแสดงผลเนื้อหาขนาดใหญ่ที่สุด)
ภาพสไลด์ขนาดใหญ่เหนือส่วนเนื้อหามักจะมีองค์ประกอบ LCP ของหน้าเว็บ จึงอาจส่งผลต่อ LCP อย่างมาก ในสถานการณ์เหล่านี้ การเพิ่มประสิทธิภาพภาพสไลด์อาจช่วยปรับปรุง LCP ได้อย่างมาก ดูคำอธิบายเชิงลึกเกี่ยวกับวิธีการทํางานของการวัด LCP ในหน้าเว็บที่มีภาพสไลด์ได้ที่ส่วนการวัด LCP สําหรับภาพสไลด์
INP (การโต้ตอบกับการวาดภาพครั้งถัดไป)
ภาพสไลด์มีข้อกำหนด JavaScript ขั้นต่ำ จึงไม่ควรส่งผลต่อความลื่นไหลของหน้าเว็บ หากพบว่าภาพสไลด์ของเว็บไซต์ใช้สคริปต์ที่ทำงานเป็นเวลานาน คุณควรพิจารณาเปลี่ยนเครื่องมือภาพสไลด์
CLS (Cumulative Layout Shift)
ภาพสไลด์จํานวนมากใช้ภาพเคลื่อนไหวที่กระตุกและไม่ได้ผสม ซึ่งอาจส่งผลให้ CLS เพิ่มขึ้น ในหน้าเว็บที่มีภาพสไลด์ที่เล่นอัตโนมัติ การดำเนินการนี้อาจทําให้ CLS มีค่าไม่สิ้นสุด CLS ประเภทนี้มักไม่ชัดแจ้ง ในสายตามนุษย์ ซึ่งทำให้มองข้ามปัญหานี้ได้ง่าย หากต้องการหลีกเลี่ยงปัญหานี้ ให้หลีกเลี่ยงการใช้ภาพเคลื่อนไหวที่ไม่ได้ประกอบกันในภาพสไลด์ (เช่น ระหว่างการเปลี่ยนสไลด์)
แนวทางปฏิบัติแนะนำด้านประสิทธิภาพ
โหลดเนื้อหาภาพสไลด์โดยใช้ 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-2 วินาที การโหลดรูปภาพเพียงรูปเดียวก็อาจมีประสิทธิภาพเช่นเดียวกัน
หลีกเลี่ยงการเปลี่ยนแปลงเลย์เอาต์
การเปลี่ยนภาพสไลด์และการควบคุมการไปยังส่วนต่างๆ คือ 2 แหล่งที่มาที่พบบ่อยที่สุดของการเปลี่ยนเลย์เอาต์ในภาพสไลด์
การเปลี่ยนสไลด์: การเปลี่ยนแปลงเลย์เอาต์ที่เกิดขึ้นระหว่างการเปลี่ยนสไลด์มักเกิดจากการอัปเดตคุณสมบัติที่ทำให้เกิดเลย์เอาต์ขององค์ประกอบ DOM ตัวอย่างพร็อพเพอร์ตี้เหล่านี้ ได้แก่
left
,top
,width
และmarginTop
หากต้องการหลีกเลี่ยงการเปลี่ยนแปลงเลย์เอาต์ ให้ใช้พร็อพเพอร์ตี้ CSStransform
เพื่อเปลี่ยนองค์ประกอบเหล่านี้แทน การสาธิตนี้แสดงวิธีใช้transform
เพื่อสร้างภาพหมุนพื้นฐานการควบคุมการนําทาง: การย้ายหรือเพิ่ม/นําการควบคุมการนําทางของภาพสไลด์ออกจาก DOM อาจทําให้เลย์เอาต์เปลี่ยนรูปแบบ ทั้งนี้ขึ้นอยู่กับวิธีนําการเปลี่ยนแปลงเหล่านี้ไปใช้ ภาพสไลด์ที่แสดงลักษณะการทำงานนี้มักจะตอบสนองต่อการวางเมาส์เหนือของผู้ใช้
ต่อไปนี้คือข้อสับสนที่พบบ่อยเกี่ยวกับการวัด CLS สําหรับภาพสไลด์
ภาพสไลด์ที่เล่นอัตโนมัติ: การเปลี่ยนภาพสไลด์เป็นสาเหตุที่พบบ่อยที่สุดของการเปลี่ยนแปลงเลย์เอาต์ที่เกี่ยวข้องกับภาพสไลด์ ในภาพสไลด์แบบไม่เล่นอัตโนมัติ การเปลี่ยนเลย์เอาต์เหล่านี้มักจะเกิดขึ้นภายใน 500 มิลลิวินาทีหลังจากการโต้ตอบของผู้ใช้ และจึงไม่นับรวมใน Cumulative Layout Shift (CLS) อย่างไรก็ตาม สำหรับภาพสไลด์แบบเล่นอัตโนมัติ การเปลี่ยนแปลงเลย์เอาต์เหล่านี้ไม่เพียงแต่จะนับรวมใน CLS ได้เท่านั้น แต่ยังอาจแสดงซ้ำได้ไม่จำกัด ดังนั้น จึงเป็นเรื่องสำคัญอย่างยิ่งที่จะต้องยืนยันว่าภาพสไลด์แบบเล่นอัตโนมัติไม่ใช่แหล่งที่มาของการเปลี่ยนแปลงเลย์เอาต์
การเลื่อน: ภาพสไลด์บางรายการอนุญาตให้ผู้ใช้เลื่อนเพื่อไปยังส่วนต่างๆ ของภาพสไลด์ หากตําแหน่งเริ่มต้นขององค์ประกอบมีการเปลี่ยนแปลง แต่ค่าออฟเซตการเลื่อน (นั่นคือ
scrollLeft
หรือscrollTop
) เปลี่ยนแปลงในจํานวนเดียวกัน (แต่ทํางานในทิศทางตรงกันข้าม) จะไม่ถือว่าเป็นการเปลี่ยนเลย์เอาต์ ตราบใดที่การเปลี่ยนแปลงเกิดขึ้นในเฟรมเดียวกัน
ดูข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนแปลงเลย์เอาต์ได้ที่แก้ไขข้อบกพร่องเกี่ยวกับการเปลี่ยนแปลงเลย์เอาต์
ใช้เทคโนโลยีสมัยใหม่
เว็บไซต์จํานวนมากใช้ไลบรารี JavaScript ของบุคคลที่สามเพื่อติดตั้งใช้งานภาพสไลด์ หากปัจจุบันคุณใช้เครื่องมือภาพสไลด์รุ่นเก่าอยู่ คุณอาจปรับปรุงประสิทธิภาพได้ด้วยการเปลี่ยนไปใช้เครื่องมือรุ่นใหม่ เครื่องมือใหม่มักจะใช้ API ที่มีประสิทธิภาพมากขึ้นและมีโอกาสน้อยที่จะต้องใช้ทรัพยากรเพิ่มเติม เช่น jQuery
อย่างไรก็ตาม คุณอาจไม่จําเป็นต้องใช้ JavaScript เลย ทั้งนี้ขึ้นอยู่กับประเภทของภาพสไลด์ที่สร้าง Scroll Snap API ใหม่ทำให้คุณใช้ทรานซิชันแบบภาพสไลด์ได้โดยใช้เพียง HTML และ CSS
ลองดูแหล่งข้อมูลเกี่ยวกับการใช้ scroll-snap
ที่อาจเป็นประโยชน์กับคุณ
- การสร้างคอมโพเนนต์เรื่องราว (web.dev)
- การจัดรูปแบบเว็บรุ่นใหม่: Scroll Snap (web.dev)
- ภาพสไลด์ที่ใช้ CSS เท่านั้น (CSS Tricks)
- วิธีสร้างภาพสไลด์ที่ใช้ CSS เท่านั้น (CSS Tricks)
เพิ่มประสิทธิภาพเนื้อหาในภาพสไลด์
ภาพสไลด์มักจะมีรูปภาพขนาดใหญ่ที่สุดของเว็บไซต์ ดังนั้นคุณจึงควรใช้เวลาตรวจสอบว่ารูปภาพเหล่านี้ได้รับการเพิ่มประสิทธิภาพอย่างเต็มรูปแบบ การเลือกรูปแบบรูปภาพและระดับการบีบอัดที่เหมาะสม การใช้ CDN สำหรับรูปภาพ และการใช้ srcset เพื่อแสดงรูปภาพหลายเวอร์ชันล้วนเป็นเทคนิคที่ช่วยลดขนาดการโอนรูปภาพได้
การวัดประสิทธิภาพ
ส่วนนี้จะกล่าวถึงการวัด LCP เนื่องจากเกี่ยวข้องกับภาพสไลด์ แม้ว่าระบบจะถือว่าภาพสไลด์ไม่แตกต่างจากองค์ประกอบ UX อื่นๆ ในระหว่างการคํานวณ LCP แต่กลไกการคํานวณ LCP สําหรับภาพสไลด์ที่เล่นอัตโนมัติก็เป็นสิ่งที่ทําให้สับสนได้
การวัด LCP สําหรับภาพสไลด์
ต่อไปนี้คือประเด็นสําคัญที่จะช่วยให้เข้าใจวิธีการทำงานของการคํานวณ LCP สําหรับภาพสไลด์
- LCP จะพิจารณาองค์ประกอบของหน้าเว็บเมื่อมีการวาดองค์ประกอบนั้นลงในเฟรม ระบบจะไม่พิจารณาตัวเลือกใหม่สำหรับองค์ประกอบ LCP อีกต่อไปเมื่อผู้ใช้โต้ตอบกับหน้า (การแตะ การเลื่อน หรือกดแป้น) ดังนั้น สไลด์ใดก็ตามในภาพหมุนที่เล่นอัตโนมัติก็อาจเป็นองค์ประกอบ LCP สุดท้ายในภาพสไลด์ที่เป็นภาพนิ่ง เฉพาะสไลด์แรกอาจเป็นตัวเลือก LCP ที่เป็นไปได้
- หากแสดงผลรูปภาพ 2 รูปขนาดเท่ากัน ระบบจะถือว่ารูปภาพแรกเป็นองค์ประกอบ LCP องค์ประกอบ LCP จะอัปเดตก็ต่อเมื่อตัวเลือก LCP มีขนาดใหญ่กว่าองค์ประกอบ LCP ปัจจุบันเท่านั้น ดังนั้น หากองค์ประกอบภาพสไลด์ทั้งหมดมีขนาดเท่ากัน องค์ประกอบ LCP ก็ควรจะเป็นรูปภาพแรกที่แสดง
- เมื่อประเมิน LCP ที่เป็นไปได้ LCP จะพิจารณา "ขนาดที่มองเห็นได้หรือขนาดที่แท้จริง แล้วแต่ว่าขนาดใดจะเล็กกว่า" ดังนั้น หากภาพสไลด์ที่เล่นอัตโนมัติแสดงรูปภาพในขนาดที่สอดคล้องกัน แต่มีรูปภาพขนาดตามธรรมชาติที่ต่างกันซึ่งเล็กกว่าขนาดการแสดงผล องค์ประกอบ LCP อาจเปลี่ยนแปลงเมื่อสไลด์ใหม่แสดงขึ้น ในกรณีนี้ หากรูปภาพทั้งหมดแสดงในขนาดเดียวกัน ระบบจะถือว่ารูปภาพที่มีขนาดตามจริงใหญ่ที่สุดเป็นองค์ประกอบ LCP คุณควรตรวจสอบว่ารายการทั้งหมดในภาพสไลด์ที่เล่นอัตโนมัติมีขนาดตามจริงเท่ากันเพื่อให้ LCP ต่ำ
การเปลี่ยนแปลงการคำนวณ LCP สําหรับภาพสไลด์ใน Chrome 88
ตั้งแต่ Chrome 88 เป็นต้นไป ระบบจะถือว่ารูปภาพที่นําออกจาก DOM ในภายหลังเป็น Largest Contentful Paint ที่เป็นไปได้ ก่อน Chrome 88 รูปภาพเหล่านี้ไม่ได้ได้รับการพิจารณา สำหรับเว็บไซต์ที่ใช้ภาพสไลด์แบบเล่นอัตโนมัติ การเปลี่ยนแปลงคำจำกัดความนี้จะส่งผลต่อคะแนน LCP ที่เป็นกลางหรือดี
การเปลี่ยนแปลงนี้เกิดขึ้นจากการสังเกตการณ์ว่าเว็บไซต์จำนวนมากใช้การเปลี่ยนภาพสไลด์โดยนำรูปภาพที่แสดงก่อนหน้านี้ออกจากต้นไม้ DOM ก่อน Chrome 88 ทุกครั้งที่แสดงสไลด์ใหม่ การนําองค์ประกอบก่อนหน้าออกจะทริกเกอร์การอัปเดต LCP การเปลี่ยนแปลงนี้จะมีผลกับภาพสไลด์ที่เล่นอัตโนมัติเท่านั้น โดยคำจำกัดความแล้ว การวาดเนื้อหาที่ใหญ่ที่สุดที่เป็นไปได้จะเกิดขึ้นได้ก่อนที่ผู้ใช้จะโต้ตอบกับหน้าเว็บเป็นครั้งแรกเท่านั้น
การเปลี่ยนแปลงเกณฑ์ใน Chrome 121
Chrome 121 เปลี่ยนลักษณะการทำงานของรูปภาพที่เลื่อนในแนวนอน เช่น ภาพหมุน ซึ่งตอนนี้ใช้เกณฑ์เดียวกับการเลื่อนแนวตั้ง ซึ่งหมายความว่าสําหรับ Use Case ของภาพสไลด์ ระบบจะโหลดรูปภาพก่อนที่จะแสดงในวิวพอร์ต ซึ่งหมายความว่าผู้ใช้มีแนวโน้มที่จะสังเกตเห็นการโหลดรูปภาพน้อยลง แต่พวกเขาต้องเสียค่าใช้จ่ายในการดาวน์โหลดมากกว่า ใช้การสาธิตการโหลดแบบ Lazy Loading แนวนอนเพื่อเปรียบเทียบลักษณะการทำงานใน Chrome กับ Safari และ Firefox
ข้อควรพิจารณาอื่นๆ
ส่วนนี้จะกล่าวถึงแนวทางปฏิบัติแนะนำด้าน UX และผลิตภัณฑ์ที่คุณควรคำนึงถึงเมื่อใช้ภาพสไลด์ ภาพหมุนควรพัฒนาเป้าหมายทางธุรกิจของคุณ และนำเสนอเนื้อหาในลักษณะที่อ่านและอ่านได้ง่าย
แนวทางปฏิบัติแนะนำในการใช้การนำทาง
แสดงตัวควบคุมการนำทางที่โดดเด่น
การควบคุมการไปยังส่วนต่างๆ ของภาพสไลด์ควรคลิกได้ง่ายและมองเห็นได้ชัดเจน นี่เป็นสิ่งหนึ่งที่ไม่ค่อยมีใครทําได้ดี แถบภาพสไลด์ส่วนใหญ่มีการควบคุมการนําทางที่เล็กและสังเกตได้ยาก โปรดทราบว่าการควบคุมการนำทางที่มีสีหรือสไตล์เดียวมักจะทำงานได้ในบางสถานการณ์ เช่น ลูกศรที่มองเห็นได้ชัดเจนบนพื้นหลังสีเข้มอาจมองเห็นได้ยากบนพื้นหลังสีอ่อน
ระบุความคืบหน้าในการนําทาง
การควบคุมการไปยังส่วนต่างๆ ของภาพสไลด์ควรระบุบริบทเกี่ยวกับจํานวนภาพสไลด์ทั้งหมดและขั้นตอนที่ผู้ใช้ดูภาพสไลด์ ข้อมูลนี้ช่วยให้ผู้ใช้ไปยังสไลด์ที่ต้องการได้ง่ายขึ้นและเข้าใจว่าเนื้อหาใดที่ผู้ใช้ดูไปแล้ว ในบางสถานการณ์ การแสดงตัวอย่างเนื้อหาที่กำลังจะเผยแพร่ ไม่ว่าจะเป็นข้อความที่ตัดตอนมาจากสไลด์ถัดไปหรือรายการภาพปก ก็อาจเป็นประโยชน์และช่วยเพิ่มการมีส่วนร่วมได้เช่นกัน
รองรับท่าทางสัมผัสบนอุปกรณ์เคลื่อนที่
บนอุปกรณ์เคลื่อนที่ ควรรองรับท่าทางสัมผัสการปัดเพิ่มเติมจากการควบคุมการนำทางแบบดั้งเดิม (เช่น ปุ่มบนหน้าจอ)
ระบุเส้นทางการนำทางอื่น
เนื่องจากผู้ใช้ส่วนใหญ่อาจไม่มีส่วนร่วมกับเนื้อหาภาพสไลด์ทั้งหมด เนื้อหาที่ลิงก์กับภาพสไลด์จึงควรเข้าถึงได้จากเส้นทางการนําทางอื่นๆ
แนวทางปฏิบัติแนะนำเกี่ยวกับการอ่านง่าย
ไม่ใช้การเล่นอัตโนมัติ
การใช้การเล่นอัตโนมัติก่อให้เกิดปัญหา 2 อย่างซึ่งแทบจะขัดแย้งกัน ภาพเคลื่อนไหวบนหน้าจอมีแนวโน้มที่จะรบกวนผู้ใช้และดึงดูดความสนใจของผู้ใช้ให้ออกจากเนื้อหาที่สําคัญกว่า ในขณะเดียวกัน ผู้ใช้มักจะเชื่อมโยงภาพเคลื่อนไหวกับโฆษณา จึงจะละเว้นภาพสไลด์ที่เล่นอัตโนมัติ
ดังนั้น จึงมีโอกาสน้อยที่การเล่นอัตโนมัติเป็นทางเลือกที่ดี หากเนื้อหาสำคัญ การไม่ใช้การเล่นอัตโนมัติจะเพิ่มการแสดงผลสูงสุด หากเนื้อหาภาพสไลด์ไม่สำคัญ การใช้การเล่นอัตโนมัติจะลดการแสดงเนื้อหาที่สำคัญกว่า นอกจากนี้ ภาพหมุนเล่นอัตโนมัติอาจอ่านได้ยาก (และน่ารำคาญด้วย) คนเราอ่านด้วยความเร็วไม่เท่ากัน จึงเป็นไปได้น้อยที่ภาพหมุนจะเปลี่ยนอย่างสม่ำเสมอในเวลาที่ "เหมาะสม" สำหรับผู้ใช้แต่ละคน
โดยหลักการแล้ว การนำทางสไลด์ควรเป็นการนำทางที่ผู้ใช้ควบคุมผ่านตัวควบคุมการนำทาง หากจำเป็นต้องใช้การเล่นอัตโนมัติ คุณควรปิดใช้การเล่นอัตโนมัติเมื่อผู้ใช้วางเมาส์เหนือวิดีโอ นอกจากนี้ อัตราการเปลี่ยนสไลด์ควรคำนึงถึงเนื้อหาของสไลด์ด้วย ยิ่งสไลด์มีข้อความมากเท่าใด ก็ควรแสดงบนหน้าจอนานขึ้นเท่านั้น
แยกข้อความและรูปภาพออกจากกัน
เนื้อหาข้อความของภาพสไลด์มักจะ "ฝังอยู่ใน" ไฟล์รูปภาพที่เกี่ยวข้อง แทนที่จะแสดงแยกกันโดยใช้มาร์กอัป HTML แนวทางนี้ส่งผลเสียต่ออัตราการเข้าถึง การแปล และอัตราการบีบอัด และยังส่งเสริมแนวทางแบบ "ใช้กับทุกกรณี" ในการสร้างชิ้นงานด้วย อย่างไรก็ตาม การจัดรูปแบบรูปภาพและข้อความเดียวกันนั้นแทบจะอ่านได้ยากเท่าๆ กันในเดสก์ท็อปและอุปกรณ์เคลื่อนที่
ใช้ชื่อที่กระชับ
คุณมีเวลาเพียงเสี้ยววินาทีในการดึงดูดความสนใจของผู้ใช้ ข้อความสั้นกระชับและตรงประเด็นจะเพิ่มโอกาสที่ข้อความจะสื่อถึงผู้ชม
แนวทางปฏิบัติแนะนำสำหรับผลิตภัณฑ์
ภาพสไลด์เหมาะสําหรับสถานการณ์ที่การใช้พื้นที่แนวตั้งเพิ่มเติมเพื่อแสดงเนื้อหาเพิ่มเติมไม่ใช่ตัวเลือก ภาพหมุนในหน้าผลิตภัณฑ์ มักจะเป็นตัวอย่างที่ดีของกรณีการใช้งานนี้
อย่างไรก็ตาม ภาพหมุนไม่ได้มีประสิทธิภาพเสมอไป
- ภาพสไลด์ (โดยเฉพาะหากมีโปรโมชันหรือเลื่อนไปโดยอัตโนมัติ) มักทำให้ผู้ใช้เข้าใจผิดว่าเป็นโฆษณา ผู้ใช้มักจะไม่สนใจโฆษณา ซึ่งเป็นปรากฏการณ์ที่เรียกว่าการมองข้ามแบนเนอร์
- ภาพสไลด์มักใช้เพื่อทำให้แผนกต่างๆ พอใจและหลีกเลี่ยงการตัดสินใจเกี่ยวกับลำดับความสำคัญของธุรกิจ ด้วยเหตุนี้ ภาพสไลด์จึงอาจกลายเป็นที่ทิ้งเนื้อหาที่ไม่มีประสิทธิภาพได้ง่ายๆ
ทดสอบสมมติฐาน
คุณควรประเมินและทดสอบผลกระทบทางธุรกิจของภาพสไลด์ โดยเฉพาะในหน้าแรก อัตราคลิกผ่านของภาพสไลด์จะช่วยให้คุณทราบว่าภาพสไลด์และเนื้อหามีประสิทธิภาพหรือไม่
มีความเกี่ยวข้อง
ภาพหมุนจะทำงานได้ดีที่สุดเมื่อมีเนื้อหาที่น่าสนใจและเกี่ยวข้องซึ่งนำเสนอพร้อมบริบทที่ชัดเจน หากเนื้อหาไม่ดึงดูดผู้ใช้นอกภาพสไลด์ การวางเนื้อหาไว้ในภาพสไลด์จะไม่ทําให้เนื้อหามีประสิทธิภาพดีขึ้น หากจำเป็นต้องใช้ภาพสไลด์ ให้จัดลำดับความสำคัญของเนื้อหาและตรวจสอบว่าแต่ละสไลด์มีความเกี่ยวข้องมากพอที่ผู้ใช้จะต้องการคลิกไปยังสไลด์ถัดไป