Découvrez comment les PWA, WebAssembly et ChromeOS permettent à une application de montage vidéo Web d'améliorer les performances et l'expérience de 12 millions d'utilisateurs.
97%
de croissance mensuelle des installations de PWA
2,3x
Amélior. des perf.
9 %
Amélioration de la fidélisation des utilisateurs de PWA
Clipchamp est un éditeur de vidéos en ligne intégré au navigateur. Il permet à quiconque de raconter des histoires qui méritent d'être partagées en vidéo. Dans le monde entier, plus de 12 millions de créateurs utilisent Clipchamp pour monter facilement des vidéos. Nous proposons des solutions simples pour créer des vidéos, depuis des outils intuitifs comme le recadrage et le découpage, des fonctionnalités pratiques comme notre enregistreur d'écran et même un générateur de mèmes.
Qui utilise Clipchamp ?
Nos utilisateurs (ou éditeurs du quotidien, comme nous les appelons) sont variés. Aucune expertise n'est nécessaire pour monter des vidéos avec Clipchamp. Plus précisément, nos équipes chargées des ventes, de l'assistance et du marketing produit utilisent notre webcam et notre enregistreur d'écran pour fournir des explications rapides avec du texte et des GIF plus attrayants. Nous observons également de nombreuses petites entreprises qui modifient et publient des vidéos sur les réseaux sociaux lorsqu'elles sont en déplacement.
Quelles difficultés rencontrent-ils ?
Nous sommes conscients que le montage vidéo peut être intimidant au premier abord. Il est difficile d'y parvenir, probablement en raison d'expériences frustrantes antérieures avec des logiciels de montage complexes. À l'inverse, Clipchamp met l'accent sur la facilité d'utilisation et offre une prise en charge des éléments textuels en superposition, des éléments de banque de vidéos et de la musique, des modèles, etc.
La plupart des éditeurs quotidiens ne veulent pas créer de chefs-d'œuvre de film. Nous parlons beaucoup avec nos utilisateurs et nous nous rappelons constamment qu'ils sont occupés et qu'ils veulent simplement faire connaître leur histoire au monde entier le plus rapidement et facilement possible. C'est donc notre priorité.
Développer une PWA Clipchamp
Chez Clipchamp, notre objectif est de permettre aux utilisateurs de raconter leur histoire en vidéo. Pour être à la hauteur de cette vision, nous avons vite compris qu'il était important pour nos utilisateurs d'utiliser leurs propres images lors de la préparation d'un projet vidéo.
Cette information a exercé la pression sur l'équipe d'ingénieurs de Clipchamp, qui a dû mettre au point une technologie capable de traiter efficacement les fichiers multimédias à l'échelle du gigaoctet dans une application Web. Compte tenu des contraintes de bande passante réseau, nous avons rapidement écarté une solution traditionnelle basée dans le cloud. L'importation de fichiers multimédias volumineux à partir d'une connexion Internet de vente au détail introduisait invariablement des temps d'attente considérables avant même que le montage ne puisse commencer, ce qui entraînait une mauvaise expérience utilisateur.
Nous sommes donc passés à une solution entièrement intégrée au navigateur, où toute la "charge importante" du traitement des vidéos est effectuée localement à l'aide de ressources matérielles disponibles sur l'appareil de l'utilisateur final. Nous misons stratégiquement sur le navigateur Chrome et, par extension, sur la plate-forme ChromeOS pour nous aider à relever les défis inévitables liés à la création d'une plate-forme de création vidéo intégrée au navigateur.
Le traitement vidéo consomme énormément de ressources, ce qui affecte à la fois les ressources informatiques et de stockage. Nous avons commencé par créer la première version de Clipchamp en plus du Native Client (PNaCl) de Google (portable). Bien qu'il ait finalement été abandonné, PNaCl a été une excellente confirmation pour notre équipe que les applications Web peuvent être rapides et à faible latence, tout en continuant à s'exécuter sur le matériel de l'utilisateur final.
Lors du passage ultérieur à WebAssembly, nous avons été heureux de voir Chrome prendre l'initiative d'intégrer des fonctionnalités post-MVP telles que les opérations de mémoire groupées, les threads et, plus récemment, les opérations vectorielles à largeur fixe. Notre équipe d'ingénieurs s'attendait à ce que ce dernier ait été très attendu par notre équipe d'ingénieurs. Il nous permet d'optimiser notre pile de traitement vidéo pour tirer parti des opérations SIMD, prédominantes sur les processeurs actuels. Grâce à la compatibilité avec WebAssembly SIMD de Chrome, nous avons pu accélérer certaines charges de travail particulièrement exigeantes, telles que le décodage vidéo 4K et l'encodage vidéo.
Avec peu d'expérience et en moins d'un mois de travail pour l'un de nos ingénieurs, nous avons réussi à multiplier les performances par 2,3. Bien que nous ne soyons toujours limités qu'à la phase d'évaluation de Chrome, nous avons déjà pu déployer ces améliorations SIMD auprès de la majorité de nos utilisateurs. Bien que nos utilisateurs exécutent des configurations matérielles très différentes, nous avons pu confirmer une amélioration équivalente des performances en production sans nuire aux taux d'échec.
Plus récemment, nous avons intégré l'API émergente WebCodecs, actuellement disponible dans le cadre d'une autre phase d'évaluation de Chrome. Cette nouvelle fonctionnalité nous permettra d'améliorer encore les performances du décodage vidéo sur du matériel peu spécifique, comme le font de nombreux Chromebooks courants.
Lorsqu'une PWA est créée, il est important de l'encourager à l'adopter. Comme pour de nombreuses applications Web, nous nous sommes attachés à la facilité d'accès, qui inclut par exemple les connexions à des réseaux sociaux, y compris Google, en permettant à l'utilisateur d'accéder rapidement à un endroit où il peut modifier les vidéos, puis en facilitant l'exportation de la vidéo. De plus, nous avons promu nos invites d'installation de PWA dans la barre d'outils et sous forme de notification pop-up dans le menu de navigation.
Résultats
Notre PWA Chrome à installer fonctionne très bien. Nous sommes ravis d'enregistrer une augmentation de 9% du taux de fidélisation des utilisateurs de PWA par rapport à ceux des utilisateurs standards sur ordinateur. L'installation de la PWA a été massive et a augmenté de 97% par mois depuis son lancement il y a cinq mois. Comme indiqué précédemment, les améliorations du service SIMD de WebAssembly ont permis de multiplier les performances par 2, 3.
Futur
Nous sommes agréablement surpris par l'engagement et l'adoption de notre PWA. Nous pensons que la fidélisation des utilisateurs de Clipchamp a été bénéfique, car la PWA est installée et plus facile à accéder. Nous avons également constaté que la PWA fonctionne mieux pour l'éditeur, ce qui la rend plus attrayante et incite les utilisateurs à revenir.
Nous nous réjouissons de proposer ChromeOS pour permettre à encore plus d'utilisateurs d'en faire plus avec plus de simplicité. Plus précisément, nous sommes ravis de certaines des intégrations pratiques avec le système d'exploitation local lorsque vous travaillez avec des fichiers. Nous pensons que cela accélérera les workflows de nos éditeurs quotidiens, et c'est l'une de nos priorités absolues.