ยอดติดตั้ง PWA ของโปรแกรมตัดต่อวิดีโอ Clipchamp เพิ่มขึ้น 97% ต่อเดือน

วิธีที่ PWA, WebAssembly และ ChromeOS ช่วยให้โปรแกรมตัดต่อวิดีโอบนเว็บมอบประสิทธิภาพที่ดีขึ้นและมอบประสบการณ์ที่น่าดึงดูดยิ่งขึ้นให้แก่ผู้ใช้ 12 ล้านคน

Sören Balko
Sören Balko

97%

การเติบโตรายเดือนของการติดตั้ง PWA

2.3 x

การปรับปรุงประสิทธิภาพ

9%

การคงผู้ใช้ไว้สูงขึ้นใน PWA

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

ใครใช้ Clipchamp

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

พวกเขาต้องเผชิญกับความท้าทายใดบ้าง

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

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

การพัฒนา PWA ของ Clipchamp

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

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

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

การประมวลผลวิดีโอทำให้กินทรัพยากรอย่างมหาศาล โดยจะส่งผลต่อคอมพิวเตอร์และทรัพยากรพื้นที่เก็บข้อมูลในลักษณะเดียวกัน เราเริ่มสร้าง Clipchamp เวอร์ชันแรก เพิ่มเติมจาก Native Client (PNaCl) ของ Google แม้ว่าจะยุติการให้บริการในที่สุด แต่ PNaCl สามารถยืนยันได้อย่างดีเยี่ยมสำหรับทีมของเราว่าเว็บแอปนั้นรวดเร็วและใช้เวลาในการตอบสนองต่ำ ในขณะที่ยังคงทำงานบนฮาร์ดแวร์ของผู้ใช้ปลายทาง

เมื่อเปลี่ยนมาใช้ WebAssembly ภายหลัง เราก็ดีใจที่ Chrome เป็นผู้นำในการผสานรวมฟีเจอร์หลัง MVP เช่น การดำเนินการหน่วยความจำจำนวนมาก การแยกชุดข้อความ และล่าสุดเรื่องการดำเนินการเวกเตอร์ที่มีความกว้างคงที่ ซึ่งทีมวิศวกรของเรากำลังเฝ้ารออย่างสุดความสามารถว่าเราจะเพิ่มประสิทธิภาพชุดการประมวลผลวิดีโอเพื่อใช้ประโยชน์จากการดำเนินการ SIMD ซึ่งพบได้บ่อยใน CPU สมัยใหม่ การใช้ประโยชน์จากการสนับสนุน WebAssembly SIMD ของ Chrome ช่วยให้เราเพิ่มภาระงานที่มากเป็นพิเศษได้ เช่น การถอดรหัสวิดีโอ 4K และการเข้ารหัสวิดีโอ

ประสิทธิภาพของโปรแกรมเปลี่ยนไฟล์ (1080p, 8.33 วินาทีที่ 30 FPS) ค่าที่กำหนดล่วงหน้าเริ่มต้นแบบไม่มี SIMD: 25 วินาที ค่าที่กำหนดล่วงหน้าเริ่มต้นพร้อม SIMD: ประมาณ 13 วินาที ค่าที่กำหนดล่วงหน้าของการบีบอัดโดยไม่ใช้ SIMD: ประมาณ 83 วินาที ค่าการบีบอัดที่กำหนดล่วงหน้าพร้อม SIMD: ประมาณ 33 วินาที ค่าคุณภาพที่กำหนดล่วงหน้า (ใหม่) โดยไม่ใช้ซิม: ประมาณ 75 วินาที ค่าคุณภาพที่กำหนดล่วงหน้าพร้อมซิม: ประมาณ 30 วินาที

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

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

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

ผลลัพธ์

Chrome PWA แบบติดตั้งได้ของเราทำงานได้ดีมาก เราดีใจมากที่พบว่าผู้ใช้ PWA คงผู้ใช้ไว้ได้มากขึ้น 9% เมื่อเทียบกับผู้ใช้เดสก์ท็อปมาตรฐาน การติดตั้ง PWA มีจำนวนมหาศาล โดยเพิ่มขึ้นในอัตรา 97% ต่อเดือน นับตั้งแต่ที่เราเปิดตัวเมื่อ 5 เดือนก่อน และอย่างที่บอกไปก่อนหน้านี้ WebAssembly SIMD ช่วยเพิ่มประสิทธิภาพได้มากขึ้น 2.3 เท่า

มิถุนายน 2020: มีการติดตั้งประมาณ 1 พันครั้ง กรกฎาคม 2020: ติดตั้งประมาณ 5 พันครั้ง สิงหาคม 2020: มีการติดตั้งประมาณ 1.2 หมื่นครั้ง กันยายน 2020: ติดตั้งประมาณ 2 หมื่นครั้ง ตุลาคม 2020: มียอดการติดตั้งประมาณ 3 หมื่นครั้ง
การติดตั้ง PWA ของ Clipchamp ในช่วง 6 เดือนที่ผ่านมา

โปรไฟล์

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

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