Tinder PWA: Başarılı Bir Aşamalı Web Uygulaması Örneği

Tinder şimdiye kadar aşk hayatınızı nasıl etkiledi? Ve Tinder kullanma deneyiminiz nasıl? Yalnızca gerçek ilişkiler arayanlar için Tinder akıllarından bile geçmeyebilir. Ancak Tinder, onların yanıldıklarını kanıtlamaya karar verdi ve herkesin gerçek aşkını bulması için çok yönlü bir arkadaşlık sitesi olmayı hedefliyor. Sonuç olarak, Tinder PWA , dünyanın en büyük tanışma sitesinin bilinirliğini genişletmesine ve istedikleri trafiği, bahsetmeleri ve dönüşümleri gerçekleştirmesine yardımcı olmak için doğdu.

Bugünkü vaka çalışmasında, başarılı bir PWA benimsemesini ve bunun Tinder'ın hedeflerine ulaşmasına nasıl yardımcı olduğunu tanıtacağız. Tinder PWA'yı ortaya çıkaralım ve performansını keşfedelim.

Tinder'a Genel Bakış

Tinder, teknoloji meraklısı nesiller için yeni flört çözümü olarak geliştirildi. Popüler olarak bir bağlantı sitesi olarak anılabilir, ancak özünde Tinder, sınırlar ve zaman dilimleri arasında eşleştirme fikrine dayalı olarak çalışır.

Tinder 2012'de piyasaya çıktığında, çoğunlukla bekarlar Tinder'ın sık kullanıcıları haline geldi ve sıradan randevular için ortaklar bulmak için etrafta dolandı. Tinder'ın varlığı, canlı, sorumsuz, iplere bağlı olmayan ilişkileri teşvik eden bir flört dili setinin icadına katkıda bulunsa da, Tinder aynı zamanda birçok başarılı nişan ve evliliğe de ev sahipliği yapmaktadır.

Tinder'a katılmak için, benzer ilgi alanlarına sahip kişileri çekmek için bir avatar ve büyüleyici bir biyografi de dahil olmak üzere uygun bir profile ihtiyacınız var. Bir profil gördüğünüzde, geçmek veya devam etmek için sola veya sağa kaydırabilirsiniz. Birbirinizle eşleşirseniz, o kişiyle mesaj alışverişine devam edebilirsiniz.

Tinder, eşleşmeler oluşturmak için kullanıcılara menzilinizdeki yaşlar, cinsiyet, size yakın yerler ve mevcut herhangi bir ortak arkadaş gibi bilgiler sağlar. Aşkı bulmak için güvenli bir yer haline getirme çabalarına rağmen, Tinder aracılığıyla sürdürülebilir ilişkiler kazanmak zor ve artan sahtekarlıklar meydana geldi.

Kullanıcı sayısına göre, Tinder, her ay platformda 7,8 milyon ABD kullanıcısı olmak üzere 75 milyon kişiyi çeken, dünyanın en büyük tanışma sitesi olmaya devam ediyor.

Tinder PWA Entegrasyonuna Yol Açan Durum

Diğer markaların aksine Tinder önemli bir sorunla karşılaşmadı. İşletim sistemlerinde iyi performans gösteren iyi bir mobil yerel uygulamaya sahiplerdi. Tıklama oranları harikaydı, ancak daha iyi olabileceğini gördüler.

Tinder daha da genişlemek, yeni pazarları işgal etmek, yeni evlat edinme arayışında olmak ve diğer çevrimiçi buluşma platformları arasında pazar lideri olarak konumunu korumak istiyordu.

Rakiplerinin mobil sitede daha modaya uygun bir deneyim sunduğunu fark ettikten sonra, Tinder daha iyisini yapmaya karar verdi ve Tinder'ın V1 deneyiminde özellik eşitliği elde etmeyi hedefliyordu.

PWA'ya Geçmek Tinder'ın İsteğini Nasıl Çözebilir?

PWA, yerel uygulamaları keşfedilebilirlik konusunda geride bırakabilir. Arama motorlarında tanıtılabilir ve yerel uygulamalara benzer bir deneyim sunarken tarayıcılarda iyi çalışır. Bu, çeşitlilik açısından daha büyük bir izleyici grubunu çekebileceği için PWA'ya önemli bir rekabet avantajı sağlar.

Yeni pazarlara girmek ve onları tekrar eden kullanıcılara dönüştürmek için ilham vermek için hızlı ama güvenilir bir çözüm söz konusu olduğunda, bir PWA'dan önce hiçbir şey gelmemelidir.

Tinder'ın yüksek bir başarıya sahip olduğunu bildiğimiz halde, en üst düzeyde hızlı hızlı yükleme performansı ve tamamen duyarlı, sorunsuz bir kullanıcı macerası sunan bir Tinder PWA oluşturmak için büyük çaba harcandı.

Ardından, değiştirilen mobil uygulamalara kıyasla küçük bir PWA geliştirmek için çözüme gittiler. Ekip, modern web uygulaması teknolojisini hizmet çalışanları ile ustaca kullanarak ve JavaScript performansını optimize ederek, Tinder'ın iddialı hedefini gerçekleştirmeyi başardı.

Tinder PWA'nın Etkisi

Şimdiye kadar yapılmış en hızlı PWA'lardan biri, Tinder geliştirici ekibinin bu güçlü projeyi baştan sona tamamlaması için tam 3 ayını aldı. React, Tinder PWA'nın UI kütüphanesi için kullanıldı, Redux ise devlet yönetiminden sorumluydu.

Tinder Online olarak da anılan yeni web deneyimi, PWA'yı benimsemek ve onu en iyi kullanım için özelleştirmek için akıllıca bir hareket olduğunu kanıtladı. Ve sonuçlar beklentiye fazlasıyla değerdi.

Tinder'ın parası kesinlikle sallanmayı sevmiyordu. Temel Tinder deneyim paketi, böylesine veri maliyetli bir ortam için ön yatırımın %10'u kadar düşük bir fiyata teslim edildiğinde çabalarının karşılığını aldılar.

Kullanıcı Deneyimi İncelemesi

• Etkileşimler hızlı ve duyarlı bir şekilde alınır.
• Sezgisel ve zahmetsiz site navigasyonu, sabit ve basitleştirilmiş, tüm siteyi tamamen basit hale getirerek alt başlığı sembolize etti.
• Çok hızlı ve çok fazla sola kaydırdığınızda gecikme olabilir.
• Etrafta deneyimledikten sonra, Tinder PWA sizden onu ana ekrana eklemenizi ve açılır mesajlar almanızı isteyecektir.
• PWA henüz bu ekosistemden tam destek almadığı için iOS deneyimine müdahale edilebilir.

Sonuçlar

Tinder PWA, kaydırma, profil düzenleme ve kullanıcı başına oturum başına harcanan süre açısından yerel uygulamasından daha iyi performans gösterdi. Küçük boyutu tercih etmek, Tinder'ın önceki 11,9'lara göre 4,69 saniyelik minimum yükleme süresiyle kazanmasına yardımcı oldu ve tüm zamanların en yüksek düzeyde kullanıcı katılımı, yeniden etkileşim ve daha fazla sağ taraf kaydırmaya yol açtı.

Tinder PWA, alandaki en iyi progresif web uygulamalarından biri olarak seçildi. Mobil uygulamaya kıyasla hemen çıkma oranını %15 azaltarak ve tıklama oranlarını %30 artırarak üstün performans gösterdi.

Veriler her şeyi anlatıyordu: Kullanıcılar daha fazla kaydırma yapıyor, daha fazla mesajlaşıyor, daha fazla profil düzenlemesi yapıyor ve yerel uygulamalara kıyasla PWA'da daha uzun zaman harcıyor. Daha fazla etkileşim, daha az gereksiz adım.

Tinder Gibi Bir PWA Nasıl İnşa Edebilirsiniz?

Tinder'ın PWA'sı ile nasıl ötesine geçtiğini bilmek ister misiniz? Daha fazla konuşma. Size yaptıklarının bir özetini vereceğiz.

Çerçeveyi Ortaya Çıkarmak

Rota düzeyinde kod bölme

İlk başta, Tinder uygulamaları gereksiz kod içeren büyük, yekpare JavaScript paketlerini kullandı ve kullanıcılar uygulamalarda temel etkileşimler yaptığında hepsi açıldı.

İşte o zaman tüm deneyim ertelendi. Bu nedenle, yavaş yüklenen kodlar ortaya çıkmadan önce ihtiyaç duydukları kadar dinlenirken, en çok ihtiyaç duyulan kodu ön tarafa aktarmak için kod bölmeyi kullanmaya karar verdiler.

Tinder, fikri yürütmek için React Router ve React Loadable'a güveniyordu ve uygulamaları yapılandırma tabanlı bilgi işleme ile tüm yolları merkezileştirdiği için üst düzey kodu doğrudan bölmeye başladı.

React Loadable, James Kyle'ın React'te kod bölmeye yönelik küçük bileşen merkezli kitaplığına aittir.

Bu, başka bir bileşen oluşturabilen bir işlevdir, bu nedenle demetleri bileşenlere ayırmak kolaydır. Sonuç, 166KB yerine 101KB boyutunda bir paket oldu ve DCL 5,46 saniyeden 4,69 saniyeye kısaltıldı.

React 16, sonunda, Roll-up ile daha iyi paketleme ve kullanılmayan kodu değiştirme stratejisinin bir parçası olan, önceki sürümlerden React'in paket boyutunu en aza indiren yükseltmeler yayınlamak zorunda kaldı.

Tinder ayrıca, rotalar arasında uzun bir süre boyunca tek paket dosyalarına kitaplık yığınlaması için popüler web paketi olan CommonsChunkPlugin'e de güveniyordu.

Uzun vadeli varlık önbelleğe alma

Her dosyaya bir önbellek bozucu eklemek için [chunkhash] kullanarak statik kaynak çıktısı ve web paketi ile uzun kullanımı çıkarın.

Bütçeleme hedeflerini karşılarken, 3G'nin yavaş bağlantısı olan mobil cihazlarda bile deneyimin iyi bir şekilde ayrılmasını sağlamak için Tinder, "gerçek dünya performans bütçeleri" ile temel kurallar belirledi.

Çekirdek ve satıcı parçaları için 155 KB'lık bir bütçe uygulanırken, yavaş yüklenen parçalar 55 KB ve geri kalanı 35 KB ile sınırlandırıldı. Bu minimum kurulum, sitenin hızlı bir şekilde başlamasını ve etkileşimli kalmasını sağladı.

Performansın gerilemesini önlemek için CSS'nin 20 KB sınırında olması gerekiyordu.

CSS Stratejisi

Tinder, ilk boyama ve diğer stil sayfası tabanlı yükleme CSS'si ile aynı çizgide kalan, Atomic CSS tarafından yeniden kullanılabilen yüksek kaliteli CSS stillerini yarattı. 20KB gzip'li önemli stiller için en üsttedir, ancak son zamanlarda 11KB'den daha az olacak şekilde yeniden oluşturulabilirler.

Workbox kullanımı ve çevrimdışı varlık önbelleğe alma

Tinder, Workbox Webpack eklentisi ile ağ müdahalesinden yararlanarak App Shell'lerini ve ana statik varlığı, yani CSS'yi ve tüm çekirdek, satıcı ve bildirim paketlerini önbelleğe aldı.

Bu şekilde, kullanıcılar ikinci ziyaretçi için yukarı geldiklerinde uygulamanın başlatılması daha hızlı hale gelir ve tüm tekrarlanan ziyaretler herhangi bir ağ bağlantısıyla esnektir.

Premium PWA Hizmetleri

Bilginize, progresif web uygulaması adı, PWA'nın her markanın çağdaş teknolojilerini kullanmasına ve her ayrıntıyı doğru kullanım için kullanmasına ve özelleştirmesine açık olduğu gerçeğinden gelir.

Çevrimiçi mağazanız için Tinder PWA gibi yüksek kaliteli işler üretmeyi hedefliyorsanız, öncelikli PWA hizmetlerini almaya başlayın. Her web geliştiricisi ve tasarımcısı PWA geliştirme konusunda rahat olmayabilir.

Bir PWA ajansına güvenirken, uzmanlık ve yılların deneyimi dikkate alınması gereken önemli noktalardır. Google, konsepti dünyaya tanıttığından beri Tigren'de PWA üzerinde çalışıyoruz. PWA ile liderliği üstlenmek ve gelişmek için birçok küresel e-ticaret işletmesine eşlik ettik.

Tigren, Magento PWA çözümlerinde uzmanlaşmış, Vietnam merkezli bir premium PWA geliştirme sağlayıcısıdır. Amacımız, çevrimiçi işletmelerin hedeflerine bütçe açısından en verimli şekilde ulaşmalarına yardımcı olmaktır.

PWA hakkında herhangi bir sorunuz varsa bize [email protected] adresinden bir mesaj bırakın.

Önemli Çıkarımlar

PWA, her web sitesi operasyonunun gelecekteki standardı olarak kabul edilir. Daha fazla potansiyel müşteri çeker, daha geniş bir kitleye ulaşır, ziyaretçilerle etkileşim kurar ve çoğunluğunun dönüşüm sağladığından emin olarak onları daha uzun süre etrafta tutar.

Tinder PWA, hız ve rahatlığa yönelik özel ince ayarlarla, daha fazla kullanıcının web'de etkileşim kurması, daha fazla eşleşme elde etmesi ve daha fazla uygulama dönüştürücüsü ile Tinder özellikleri için daha geniş pazar benimseme hedefine ulaşmıştı.