PWA'lar, WebAssembly ve ChromeOS, web tabanlı bir video düzenleyicinin 12 milyon kullanıcıya daha iyi performans ve daha ilgi çekici bir deneyim sunmasına nasıl yardımcı oluyor?
%97
PWA yükleme sayısındaki aylık büyüme
2,3x
Perf. iyileştirme
%9
PWA kullanıcılarında daha yüksek elde tutma oranı
Clipchamp, herkesle paylaşmaya değer hikayeler anlatmayı sağlayan, tarayıcı içinden kullanılabilen bir online video düzenleyicidir. Dünyada 12 milyondan fazla içerik üretici, videoları kolayca düzenlemek için Clipchamp'i kullanıyor. Kırpma ve kırpma gibi sezgisel araçlardan ekran kaydedicimiz ve hatta meme oluşturucu gibi pratik özelliklere kadar, video hazırlamak için basit çözümler sunuyoruz.
Clipchamp'i kimler kullanır?
Kullanıcılarımız (veya bizim adımıza günlük editörlerimiz) çeşitlilik gösterir. Clipchamp'ta video düzenleyici olmak için uzmanlık gerekmez. Özellikle, şu anda web kameramızı ve ekran kaydedicimizi kullanarak satış, destek eğitimi ve ürün pazarlama ekiplerini destekliyoruz. Bunlar ilgi çekici hale getirmek için eklenen metin ve GIF'lerle hızlı açıklayıcı içerikler oluşturur. Birçok küçük işletmenin hareket halindeyken sosyal videoları düzenleyip yayınladığını da gözlemliyoruz.
Ne gibi zorluklarla karşılaşıyorlar?
Video düzenlemenin başlangıçta göz korkutucu olabileceğinin farkındayız. Bunun zor olduğu varsayılır. Bu, muhtemelen karmaşık düzenleme yazılımlarıyla ilgili sinir bozucu deneyimlerden kaynaklanır. Öte yandan Clipchamp, kolaylık ve basitliğe odaklanarak metin yer paylaşımları, stok video ve müzik, şablonlar ve daha fazlasıyla destek sağlar.
Günlük editörlerin çoğunun sinema şaheserleri oluşturmak istemediğini görüyoruz. Kullanıcılarımızla sık sık konuşuyoruz ve sürekli meşgul olacaklarını, sadece hikayelerini dünyaya en hızlı ve kolay şekilde yaymak istediklerini hatırlatıyoruz. Bu nedenle, odaklandığımız nokta bu.
Clipchamp PWA geliştirme
Clipchamp'ta hepimiz, hikayelerini videolarla anlatmaları için insanlara destek olmayı amaçlıyoruz. Bu vizyonu gerçekleştirmek için kısa süre içinde kullanıcılarımızın bir video projesini oluştururken kendi çekimlerini kullanmalarına izin vermenin önemli olduğunu fark ettik.
Bu bilgi, Clipchamp'ın mühendislik ekibine, bir web uygulamasındaki Gigabayt ölçeğindeki medya dosyalarını verimli bir şekilde işleyebilen bir teknoloji bulmaları için baskı yaratmıştır. Ağ bant genişliği kısıtlamalarını göz önünde bulundurduğumuzda, geleneksel bulut tabanlı bir çözümü hızlıca eleyebilirdik. Büyük medya dosyalarının perakende satış internet bağlantısından yüklenmesi, düzenleme başlamadan önce mutlaka uzun bekleme sürelerine yol açacak ve sonuçta kötü bir kullanıcı deneyimine neden olacaktır.
Bu da, video işlemenin tüm "ağırlığının" son kullanıcının cihazında bulunan donanım kaynakları kullanılarak yerel olarak yapıldığı tamamen tarayıcı içinde bir çözüme geçiş yapmamızı sağladı. Tarayıcıda video oluşturma platformu oluşturmanın kaçınılmaz zorluklarını aşmamıza yardımcı olması için Chrome tarayıcıya ve ChromeOS platformuna stratejik olarak bahse girdik.
Video işleme, çok fazla kaynak ihtiyacı olduğundan bilgisayar ve depolama kaynaklarını da etkiliyor. Clipchamp'ın ilk sürümünü Google'ın (Taşınabilir) Native Client'ının (PNaCl) üzerine oluşturmaya başladık. PNaCl zaman içinde kullanımdan kalksa da ekibimiz için web uygulamalarının son kullanıcı donanımında çalışmaya devam ederken hızlı ve düşük gecikmeli olabileceğini gösteren mükemmel bir onay oldu.
Daha sonra WebAssembly'ye geçerken, Chrome'un toplu bellek işlemleri, iş parçacığı oluşturma ve en son olarak da sabit genişlikli vektör işlemleri gibi MVP sonrası özellikleri kullanmada öncülük ettiğini görmek bizi memnun etti. Mühendislik ekibimiz, modern CPU'larda yaygın olan SIMD işlemlerinden yararlanmak için video işleme yığınımızı optimize etme imkanı tanıyan yeni donanım teknolojisini yoğun olarak benimsedi. Chrome'un WebAssembly SIMD desteğinden yararlanarak 4K video kodu çözme ve video kodlama gibi çok zorlayıcı bazı iş yüklerini hızlandırabildik.
Çok az deneyimlilikle ve mühendislerimizden biri için bir aydan kısa bir çalışma sonunda performansı 2, 3 kat artırmayı başardık. Hâlâ Chrome kaynak denemesiyle sınırlı olmakla birlikte, bu SIMD geliştirmelerini kullanıcılarımızın çoğu için kullanıma sunabildik. Kullanıcılarımız oldukça farklı donanım kurulumları çalıştırsa da hata oranlarında hiçbir zararlı etki görmeden üretimde eşleşme performansı artışını onaylayabildik.
Kısa süre önce, şu anda başka bir Chrome kaynak denemesi kapsamında kullanılabilen yeni WebCodecs API'yi entegre ettik. Bu yeni özellik sayesinde, birçok popüler Chromebook'ta olduğu gibi, düşük özellikli donanımlarda video kodu çözme işleminin performansını daha da iyileştirebileceğiz.
Oluşturulan bir PWA'nın benimsenmesini teşvik etmek önemlidir. Birçok web uygulamasında olduğu gibi, Google dahil sosyal giriş bilgileri, kullanıcının hızlıca video düzenleyebileceği bir yere yerleştirilmesi ve videonun dışa aktarılmasını kolaylaştırma gibi özellikleri kapsayan erişim kolaylığına odaklandık. Buna ek olarak, PWA yükleme istemlerimizi araç çubuğunda ve menü gezinme menüsünde pop-up bildirim olarak tanıttık.
Sonuçlar
Yüklenebilir Chrome PWA'mız son derece başarılı. Standart masaüstü kullanıcılarımıza kıyasla PWA kullanıcılarımızın elde tutma oranında% 9'luk bir artış görmekten çok memnunuz. PWA'nın kurulumu, kullanıma sunduğumuz beş aydan bu yana ayda% 97 oranında artarak muazzam bir boyuta ulaştı. Daha önce de belirtildiği gibi WebAssembly SIMD geliştirmeleri performansı 2,3 kat artırdı.
![Haziran 2020: Yaklaşık 1.000 yükleme. Temmuz 2020: Yaklaşık 5.000 yükleme. Ağustos 2020: Yaklaşık 12 bin yükleme. Eylül 2020: Yaklaşık 20 bin yükleme. Ekim 2020: Yaklaşık 30 bin yükleme.](https://web.dev/static/case-studies/clipchamp/image/june-2020-1k-installs-4695334a9f617.png?authuser=5&hl=tr)
Gelecekteki
PWA'mızın etkileşimi ve artışı bizi oldukça şaşırttı. PWA'nın yüklü olması ve daha kolay erişilebilir olması nedeniyle Clipchamp'ın kullanıcıları elde tutma oranının yararlı olduğunu düşünüyoruz. Ayrıca, PWA'nın düzenleyici için daha iyi performans gösterdiğini, bu nedenle de PWA'nın daha ilgi çekici kıldığını ve kullanıcıların geri dönmesini sağladığını gördük.
Geleceğe baktığımızda, ChromeOS'in daha da fazla kullanıcının daha az çaba sarf ederek daha fazla şey yapmasını sağlama fırsatıyla karşı karşıyayız. Özellikle, dosyalarla çalışırken yerel işletim sistemiyle olan bazı kolaylık entegrasyonları bizi heyecanlandırıyor. Bu özelliğin, gündelik işleriyle uğraşan düzenleyicilerimizin iş akışlarını hızlandırmaya yardımcı olacağını düşünüyoruz ve bu en yüksek önceliklerimizden biri.