Le installazioni con PWA dell'editor video di Clipchamp registrano una crescita mensile del 97%

Il modo in cui PWA, WebAssembly e ChromeOS stanno aiutando un editor video basato sul web a offrire prestazioni migliori e un'esperienza più coinvolgente a 12 milioni di utenti.

Sören Balko

Clipchamp è l'editor video online interno al browser che permette a chiunque di raccontare storie che vale la pena condividere con i video. In tutto il mondo, oltre 12 milioni di creator utilizzano Clipchamp per modificare i video in tutta semplicità. Offriamo soluzioni semplici per creare video, da strumenti intuitivi come ritaglio e ritaglio a funzionalità pratiche come il nostro registratore dello schermo e persino la creazione di meme.

Chi usa Clipchamp?

I nostri utenti (o editor quotidiani come li chiamiamo) sono diversificati. Non è necessaria alcuna esperienza per essere un editor video di Clipchamp. Nello specifico, stiamo notando che i team addetti alle vendite, all'assistenza e al marketing dei prodotti utilizzano la nostra webcam e registratore dello schermo per contenuti esplicativi rapidi con testo e GIF aggiunti per renderli coinvolgenti. Stiamo anche osservando molte piccole imprese che modificano e pubblicano video sui social mentre sono in viaggio.

Quali sfide deve affrontare?

Siamo consapevoli che all'inizio l'editing video può essere complicato. Si presume che sia difficile, probabilmente a causa di precedenti esperienze frustranti con software di editing complessi. Clipchamp si concentra sulla semplicità e la semplicità, fornendo il supporto con overlay di testo, video e musica di stock, modelli e altro ancora.

Abbiamo scoperto che la maggior parte dei redattori quotidiani non vuole creare capolavori cinematografici. Parliamo molto con i nostri utenti e ci ricordiamo costantemente che sono impegnati e vogliono solo mostrare la loro storia al mondo il più rapidamente e facilmente. Per questo motivo questa è una delle nostre priorità.

Sviluppo di una PWA Clipchamp

Per noi di Clipchamp, gli utenti possono raccontare le proprie storie tramite i video. Per realizzare questa vision, ci siamo resi conto che è importante consentire ai nostri utenti di usare le proprie riprese per realizzare un progetto video.

Queste informazioni hanno fatto pressione sul team di tecnici di Clipchamp per trovare una tecnologia in grado di elaborare in modo efficiente file multimediali in scala di gigabyte in un'applicazione web. Tenendo conto dei limiti di larghezza di banda della rete, siamo riusciti a escludere rapidamente una soluzione tradizionale basata su cloud. Il caricamento di file multimediali di grandi dimensioni da una connessione a internet di vendita al dettaglio comporta inevitabilmente molti tempi di attesa prima ancora di iniziare la modifica, con un conseguente peggioramento dell'esperienza utente.

Di conseguenza, siamo passati a una soluzione completamente integrata nel browser, in cui tutto il "gravoso" processo di elaborazione video viene eseguito localmente utilizzando le risorse hardware disponibili sul dispositivo dell'utente finale. Scommettiamo in modo strategico sul browser Chrome e, di conseguenza, sulla piattaforma ChromeOS per aiutarci a superare le inevitabili sfide della creazione di una piattaforma di creazione video nel browser.

L'elaborazione video richiede un'enorme quantità di risorse, con ripercussioni sia sulle risorse del computer sia sulle risorse di archiviazione. Abbiamo iniziato a creare la prima versione di Clipchamp sulla base di PNaCl (Portable) Native Client di Google. Mentre era stato eliminato, PNaCl è stata un'ottima conferma per il nostro team che le app web possono essere veloci e a bassa latenza, anche se sono ancora in esecuzione sull'hardware dell'utente finale.

Quando siamo passati a WebAssembly, siamo stati lieti di vedere che Chrome ha assunto un ruolo in testa all'incorporamento di funzionalità post-MVP come le operazioni collettive di memoria, l'organizzazione in thread e, più di recente, le operazioni vettoriali a larghezza fissa. Quest'ultimo aspetto è stato molto previsto dal nostro team di tecnici, che ci offre la possibilità di ottimizzare lo stack di elaborazione video per sfruttare le operazioni SIMD, prevalenti nelle CPU moderne. Sfruttando il supporto del SIMD WebAssembly di Chrome, siamo stati in grado di accelerare alcuni carichi di lavoro particolarmente impegnativi come la decodifica video 4K e la codifica video.

Con poca esperienza e in meno di un mese di impegno da parte di uno dei nostri tecnici, siamo riusciti a migliorare le prestazioni di 2,3 volte. Anche se siamo ancora limitati a una prova dell'origine di Chrome, siamo già riusciti a implementare questi miglioramenti SIMD per la maggior parte dei nostri utenti. Mentre i nostri utenti eseguono configurazioni hardware molto diverse, abbiamo potuto confermare un corrispondente aumento delle prestazioni in produzione senza notare effetti negativi sulle percentuali di errore.

Più di recente abbiamo integrato l'API WebCodecs emergente, attualmente disponibile nell'ambito di un'altra prova dell'origine di Chrome. Grazie a questa nuova funzionalità, saremo in grado di migliorare ulteriormente le prestazioni della decodifica video su hardware con basse specifiche, come accade in molti Chromebook noti.

Quando si crea una PWA, è importante incoraggiarne l'adozione. Come per molte app web, ci siamo concentrati sulla facilità di accesso, che include elementi quali l'accesso tramite social network, tra cui Google, consentendo all'utente di accedere rapidamente a un punto in cui modificare il video e quindi di esportarlo facilmente. Inoltre, abbiamo promosso le richieste di installazione di PWA nella barra degli strumenti e come avviso popup nella navigazione nei menu.

Risultati

La nostra PWA Chrome installabile sta funzionando molto bene. Siamo stati molto felici di vedere il 9% di fidelizzazione in più tra gli utenti PWA rispetto ai nostri utenti desktop standard. L'installazione della PWA è stata enorme, con un aumento del 97% al mese da quando abbiamo lanciato cinque mesi fa. Come accennato prima, i miglioramenti SIMD di WebAssembly hanno migliorato le prestazioni di 2, 3 volte.

Profilo

Siamo piacevolmente sorpresi dal coinvolgimento e dall'adozione della nostra PWA. Riteniamo che la fidelizzazione degli utenti di Clipchamp sia stata vantaggiosa perché la PWA è installata ed è più facile da raggiungere. Abbiamo anche notato che la PWA funziona meglio per l'editor, il che la rende più accattivante e invoglia gli utenti a tornare.

Guardando al futuro, siamo entusiasti dell'opportunità che ChromeOS offre a un numero ancora maggiore di utenti per fare di più con meno fatica. Nello specifico, siamo entusiasti di alcune delle comodità delle integrazioni con il sistema operativo locale quando si lavora con i file. Riteniamo che questa modifica possa velocizzare i flussi di lavoro dei nostri editor quotidiani più impegnativi e questa è una delle nostre massime priorità.