วิธีเพิ่มประสิทธิภาพสื่อด้วยงบประมาณ

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

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

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

งบประมาณประสิทธิภาพ

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

— ทิม Kadlec

งบประมาณด้านประสิทธิภาพในฐานะกลไกในการวางแผนประสบการณ์ใช้งานเว็บและการป้องกันการสลายตัวของประสิทธิภาพอาจประกอบด้วยปทัฏฐานต่อไปนี้:

• น้ำหนักหน้าโดยรวม
• จำนวนคำขอ HTTP ทั้งหมด
• เวลาในการโหลดหน้าเว็บบนเครือข่ายมือถือเฉพาะ
• ความล่าช้าในการป้อนข้อมูลครั้งแรก (FID)
• First Contentful Paint (FCP),
• การเปลี่ยนแปลงเค้าโครงสะสม (CLS),
• Largest Contentful Paint (LCP)

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

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

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

ผลการดำเนินงาน

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

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

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

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

นักประสาทวิทยาของ MIT ระบุว่า สมองของเราสามารถซึมซับและเข้าใจสื่อที่มองเห็นได้ในเวลาน้อยกว่า 13 มิลลิวินาที ในขณะที่ข้อความอาจใช้เวลาโดยเฉลี่ยของผู้อ่านมากกว่า 3.3 นาทีในการทำความเข้าใจ บ่อยครั้งหลังจากอ่านซ้ำและอ้างอิงโยงที่อื่นๆ ไม่น่าแปลกใจเลยที่เนื้อหาไมโครวิดีโอ (โดยปกติจะมีความยาวเพียง 10–20 วินาที) มักจะสร้างการมีส่วนร่วมและการแปลงจำนวนมาก

การอุทธรณ์ของวิดีโอ

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

นอกเหนือจากประสบการณ์ส่วนตัวของฉันแล้ว งานวิจัยจำนวนมากยืนยันถึงความสำคัญของเนื้อหาวิดีโอ:

• 96% ของผู้บริโภคพบว่าวิดีโอมีประโยชน์ในการตัดสินใจซื้อทางออนไลน์
• 79% ของนักช็อปออนไลน์ชอบดูวิดีโอเพื่อดูข้อมูลเกี่ยวกับผลิตภัณฑ์มากกว่าอ่านข้อความบนหน้าเว็บ
• วิดีโอผลิตภัณฑ์ที่เหมาะสมสามารถเพิ่ม Conversion ได้มากกว่า 80%

เมื่อพูดถึงการส่งวิดีโอบนเว็บ

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

— สกอตต์ Jehl

ความรู้สึกเดียวกันนี้ถ่ายทอดโดยสถานะการสตรีมในไตรมาสที่ 4 ปี 2020 ของ Conviva (ต้องลงทะเบียน) ซึ่งตั้งข้อสังเกตว่าโทรศัพท์มือถือพบ ปัญหาบัฟเฟอร์มากขึ้น 20% ความล้มเหลวในการเริ่มวิดีโอสูงขึ้น 19% และเวลาเริ่มต้นนานกว่าอุปกรณ์อื่น 5%

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

ในทำนองเดียวกัน รูปภาพที่ไม่ได้รับการปรับแต่งเป็นสาเหตุหลักของการบวมของหน้า ตาม Web Almanac ความแตกต่างของไบต์รูปภาพที่ส่งไปยังอุปกรณ์พกพาหรือเดสก์ท็อปนั้นน้อยมาก ซึ่งทำให้ สิ้นเปลืองแบนด์วิดท์ มากขึ้นสำหรับอุปกรณ์ที่ไม่ต้องการไบต์พิเศษทั้งหมด

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

ศิลปะแห่งการปรับสมดุลประสิทธิภาพด้วยเนื้อหาสื่อ

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

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

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

ทำความเข้าใจการใช้งานปัจจุบันของคุณ

ศึกษาน้ำหนักของหน้าเว็บของคุณและขนาดของเนื้อหาสื่อ ผู้เชี่ยวชาญด้านการวิจัยบนเว็บ Tammy Everts แนะนำให้ตรวจสอบให้แน่ใจว่าหน้าเว็บมีขนาดเล็กกว่า 1 MB สำหรับมือถือและน้อยกว่า 2 MB สำหรับอย่างอื่น นอกจากนี้ ให้ระบุทรัพยากรที่แสดงบนหน้าที่สำคัญ

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

นอกจากนี้ อย่าลืมติดตาม Core Web Vitals (CWV) ของ Google อย่างสังเคราะห์ซึ่งเป็นส่วนหนึ่งของชุดเครื่องมือของคุณด้วยเครื่องมืออย่าง LightHouse คุณยังสามารถวัด CWV ผ่านการตรวจสอบผู้ใช้จริง (RUM) เช่น CrUX เนื่องจาก CWV จะเป็นสัญญาณสำหรับ Google ต่อโปรแกรมรวบรวมข้อมูลด้วย การตรวจสอบและเพิ่มประสิทธิภาพสำหรับตัวชี้วัดเหล่านั้นจึงเหมาะสม: Largest Contentful Paint (LCP), First Input Delay (FID) และ Cumulative Layout Shift (CLS)

เสิร์ฟในรูปแบบที่เหมาะสม

แสดงรูปภาพหรือวิดีโอในรูปแบบที่เหมาะสมที่สุดในแง่ของขนาดและความละเอียดสำหรับอุปกรณ์รับชมหรือเบราว์เซอร์ คุณอาจต้องใช้อิมเมจ CDN เพื่อจุดประสงค์นั้น หรือสร้างรูปแบบต่างๆ เช่น WebM, AVIF, JPEG-XL, HEIC เป็นต้น และเลือกให้บริการประเภทเนื้อหาที่เหมาะสมตามส่วนหัว User-Agent และ Accept ที่ร้องขอ

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

เสิร์ฟขนาดที่เหมาะสม

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

เพิ่มคำบรรยายให้กับวิดีโอของคุณ

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

ส่งผ่าน CDN หลายรายการ

CDN สามารถบรรเทาเวลาในการตอบสนองของไมล์สุดท้าย ลดเวลาเริ่มต้นของวิดีโอ และอาจลดปัญหาบัฟเฟอร์ได้ จากการศึกษาของ Citrix กลยุทธ์ multi-CDN สามารถลดเวลาแฝงได้ดียิ่งขึ้น และให้ความพร้อมใช้งานอย่างต่อเนื่องในกรณีที่มีการหยุดทำงานเฉพาะที่ในโหนดขอบของ CDN

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

เรนเดอร์วิดีโออย่างค่อยเป็นค่อยไป

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

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

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

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

ห่อ

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

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

— ทิม Kadlec

นั่นเป็นคำแนะนำที่ดีที่ควรจำไว้