Cara PWA, WebAssembly, dan ChromeOS membantu editor video berbasis web memberikan performa yang lebih baik dan pengalaman yang lebih menarik kepada 12 juta pengguna.
97%
Pertumbuhan bulanan penginstalan PWA
2,3 x
Peningkatan performa
9%
Retensi yang lebih tinggi pada pengguna PWA
Clipchamp adalah editor video online dalam browser yang memungkinkan siapa saja untuk menceritakan kisah yang layak dibagikan melalui video. Di seluruh dunia, lebih dari 12 juta kreator menggunakan Clipchamp untuk mengedit video dengan mudah. Kami menawarkan solusi sederhana untuk membuat video, mulai dari alat intuitif seperti pangkas dan pangkas, hingga fitur praktis seperti perekam layar kami, dan bahkan pembuat meme.
Siapa yang menggunakan Clipchamp?
Pengguna kami (atau editor sehari-hari yang kami sebut mereka) sangat beragam. Tidak diperlukan keahlian untuk menjadi editor video dengan Clipchamp. Secara khusus, saat ini kami memperhatikan tim penjualan, pelatihan dukungan, dan pemasaran produk menggunakan webcam dan perekam layar kami untuk konten penjelasan singkat dengan tambahan teks dan GIF agar membuatnya menarik. Kami juga mengamati banyak usaha kecil mengedit dan memposting video sosial saat dalam perjalanan.
Tantangan apa yang mereka hadapi?
Kami tahu bahwa pengeditan video pada awalnya bisa menakutkan. Asumsinya adalah sulit, mungkin karena pengalaman yang membuat frustrasi sebelumnya dengan software pengeditan yang kompleks. Sebaliknya, Clipchamp berfokus pada kemudahan dan kesederhanaan, yang memberikan dukungan dengan overlay teks, video stok dan musik, template, dan lain-lain.
Kami mendapati sebagian besar editor sehari-hari tidak ingin membuat karya terbaik film. Kami sering berbicara dengan pengguna dan terus diingatkan bahwa mereka sibuk dan hanya ingin menyebarkan kisahnya kepada dunia secepat dan semudah mungkin, jadi ini menjadi fokus kami.
Mengembangkan PWA Clipchamp
Di Clipchamp, kami ingin memberdayakan orang untuk menceritakan kisah mereka melalui video. Untuk mewujudkan visi ini, kami segera menyadari bahwa mengizinkan pengguna untuk menggunakan rekaman video mereka sendiri saat menyusun project video itu penting.
Insight tersebut memberikan tekanan pada tim engineer Clipchamp untuk menghasilkan teknologi yang dapat memproses file media berskala Gigabyte secara efisien dalam aplikasi web. Dengan mempertimbangkan batasan bandwidth jaringan, kami dapat dengan cepat kesampingkan solusi berbasis cloud tradisional. Mengupload file media besar dari koneksi internet retail akan selalu menimbulkan waktu tunggu yang sangat lama sebelum pengeditan bahkan dapat dimulai, yang secara efektif mengakibatkan pengalaman pengguna yang buruk.
Hal ini membuat kami beralih ke solusi yang sepenuhnya menggunakan browser, dengan semua pemrosesan video yang "berat" dilakukan secara lokal menggunakan resource hardware yang tersedia di perangkat pengguna akhir. Kami secara strategis bertaruh pada browser Chrome dan, dengan perlunya, platform ChromeOS untuk membantu kami mengatasi tantangan yang tak terhindarkan dalam membangun platform pembuatan video dalam browser.
Pemrosesan video menghabiskan resource yang sangat besar, sehingga dapat memengaruhi resource komputer dan penyimpanan. Kami mulai membangun versi pertama Clipchamp selain Native Client (PNaCl) Google (Portabel). Meskipun akhirnya dihentikan, PNaCl adalah konfirmasi bagus bagi tim kami bahwa aplikasi web dapat bekerja dengan cepat dan berlatensi rendah, sambil tetap berjalan pada hardware pengguna akhir.
Ketika kemudian beralih ke WebAssembly, kami senang melihat Chrome memimpin dalam menggabungkan fitur pasca-MVP seperti operasi memori massal, threading, dan yang terbaru: operasi vektor dengan lebar tetap. Fitur ini telah sangat dinantikan oleh tim engineer kami, yang memberi kami kemampuan untuk mengoptimalkan stack pemrosesan video untuk memanfaatkan operasi SIMD, yang umum digunakan di CPU kontemporer. Dengan memanfaatkan dukungan WebAssembly SIMD Chrome, kami dapat mempercepat beberapa beban kerja yang sangat berat, seperti decoding video 4K dan encoding video.
Dengan sedikit pengalaman sebelumnya dan upaya salah satu engineer kami, dalam waktu kurang dari satu bulan, kami berhasil meningkatkan performa sebesar 2,3x. Meskipun masih terbatas pada uji coba origin Chrome, kami sudah dapat meluncurkan peningkatan SIMD ini ke sebagian besar pengguna kami. Meskipun pengguna menjalankan penyiapan hardware yang sangat berbeda, kami dapat mengonfirmasi peningkatan performa yang sesuai dalam produksi tanpa melihat efek yang merugikan pada tingkat kegagalan.
Baru-baru ini, kami mengintegrasikan WebCodecs API baru, yang saat ini tersedia dalam uji coba origin Chrome lainnya. Dengan menggunakan kemampuan baru ini, kami dapat lebih meningkatkan performa decoding video pada hardware berspesifikasi rendah seperti yang ditemukan di banyak Chromebook populer.
Setelah PWA dibuat, penting untuk mendorong penggunaannya. Seperti banyak aplikasi web lainnya, kami berfokus pada kemudahan akses yang mencakup hal-hal seperti login ke media sosial termasuk Google, yang dengan cepat mengarahkan pengguna ke tempat mereka dapat mengedit video, lalu mempermudah pengeksporan video. Selain itu, kami mempromosikan perintah penginstalan PWA kami di toolbar dan sebagai notifikasi pop-up di navigasi menu kami.
Hasil
PWA Chrome kami yang dapat diinstal bekerja dengan sangat baik. Kami sangat senang melihat retensi 9% lebih tinggi pada pengguna PWA dibandingkan dengan pengguna desktop standar kami. Penginstalan PWA sangat besar, meningkat dengan tingkat 97% sebulan sejak kami diluncurkan lima bulan lalu. Dan, seperti yang disebutkan sebelumnya, SIMD WebAssembly meningkatkan performa 2,3x.
![Juni 2020: ~1 ribu penginstalan. Juli 2020: ~5 ribu penginstalan. Agustus 2020: ~12 rb penginstalan. September 2020: ~20 ribu penginstalan. Oktober 2020: ~30 ribu penginstalan.](https://web.developers.google.cn/static/case-studies/clipchamp/image/june-2020-1k-installs-4695334a9f617.png?authuser=8&hl=id)
Mendatang
Kami terkejut dengan keterlibatan dan penyerapan PWA kami. Menurut kami, retensi pengguna Clipchamp akan diuntungkan karena PWA diinstal dan lebih mudah diakses. Kami juga mencatat bahwa PWA berperforma lebih baik untuk editor, yang membuatnya lebih menarik dan membuat orang terus kembali.
Ke depannya, kami senang dengan peluang yang diberikan ChromeOS bagi lebih banyak pengguna untuk menyelesaikan lebih banyak hal dengan lebih mudah. Secara khusus, kami sangat antusias dengan beberapa integrasi praktis dengan OS lokal saat menangani file. Menurut kami, hal ini akan membantu mempercepat alur kerja bagi editor sehari-hari kami yang sibuk, dan itu adalah salah satu prioritas tertinggi kami.