Pinterest PWA: Mobil Performansı Doğru Şekilde Artırma

E-ticaret işinizin büyümesini hızlandırmak için bir çözüm arıyorsanız, M-ticaret ve PWA'ya yatırım yapmanızı öneren gönderiler görmelisiniz. Bu öneriler, güvenebileceğiniz gerçek sayılara dayanmaktadır. Mobil tabanlı dönüşümleri artırmaktan, daha iyi kullanıcı deneyimi sağlayan site performansını iyileştirmeye kadar, PWA geliştirmek, M-ticaret stratejiniz için cennetten bir köşedir. Bununla ilgili daha fazla bilgi edinmek için sizi bugünün Pinterest PWA örnek olayını ziyaret etmeye davet ediyoruz: Gelecekteki bu web uygulamasını mobil performansı artırmak ve yatırım getirinizi zamanla büyütmek için nasıl kullanabilirsiniz.

Pinterest'e Genel Bakış

Resim sevenler, ilham arayanlar ve fikir bulanların takılabileceği bir sosyal platform olan Pinterest, herkesin yemek tarifleri, ev dekorasyonu fikirleri, kıyafet fikirleri, güçlendirici alıntılar ve sevimli hayvanlar için fikir koleksiyonlarına katılmasına ve girişimde bulunmasına olanak tanır. ve daha fazlası.

Pinterest'teki her gönderiye pin adı verilir. Pinterest'te milyarlarca pin vardır ve pinler metin yerine jpg veya png biçiminde yüklemenizi gerektirdiğinden bu platform görsel bir keşif motoru görevi görür. Pinleri özel veya genel panolarınıza kaydedebilir ve ilhamınızı tek bir yerde düzenli tutabilirsiniz, böylece bir dahaki sefere aradığınızı kolayca alabilirsiniz.

Pinterest, 12 yıl önce Paul Sciarra, Evan Sharp ve Ben Silbermann tarafından kuruldu. Pinterest kendisini "dünyanın fikir kataloğu" olarak adlandırıyor. Pinterest sayesinde, insanlar henüz isimlendirilmemiş olsalar bile fikirleri bulmanın çok daha kolay bir yoluna sahipler.

Pinterest'in keşiften dönüşüme kadar olan adımları azaltarak, tarayıcıları olası satışlara ve olası satışları çoğu sosyal medya sitesinden daha hızlı dönüştürme olasılığı daha yüksektir. Ayda 433 milyondan fazla kişi Pinterest'te aktiftir ve yaklaşık 10 milyon tekil ziyaretçisi vardır ve bu da onu en hızlı büyüyen platformlardan biri yapar.

Pinterest ve PWA Neden Bir Araya Geliyor?

Her şey Pinterest'in göz kulak olması gereken uluslararası bir kitleye sahip olmasıyla başladı. Bu nedenle mobil web'e yöneldiler. Pinterest, uygulamasının ve web sitesinin en iyi optimize edilmiş performansta olmadığının farkındaydı. Hızla büyüyen çevrimiçi ortamla birlikte rekabetten kurtulmak için bir şeyler yapmaları gerekiyordu.

Otantik olmayan mobil web kullanıcıları üzerinde yapılan araştırma, onların eski ve yavaş web deneyimlerinden kayıt işlemlerine, oturum açma işlemlerine veya uygulama yüklemelerine %1'lik düşük dönüştürme gücünü görmelerini sağlar. Web uygulaması teknolojileri o zamanlar hızlı bir şekilde gelişiyordu ve bu da site dönüşüm oranlarını iyileştirmede önemli bir boşluğa yol açtı.

2015'te Google, hem satıcılara hem de son kullanıcılara en fazla değeri getirecek bir çözüm olarak PWA'yı tanıttı. Pinterest'e yeni bir mobil web deneyimi için nereye yatırım yapılacağına dair bir fikir verdi.

PWA'nın nasıl sunabileceği aşağıda açıklanmıştır:

• Kullanıcılar için: PWA, küresel ölçekte kullanıcı deneyimini geliştirmeyi amaçlar; bu, mobil sitenizin bant genişliğinden tasarruf edeceği ve düşük İnternet bağlantısı veya sınırlı veri işlemeye sahip yerlerde yaşamanıza rağmen hızlı ve duyarlı bir şekilde yükleneceği anlamına gelir. Hızlı, sorunsuz ve kusursuz site etkileşimleri, keyifli bir yolculuk sağlayarak tüm farkı yaratır.
• Tüccarlar için: PWA, işletim sistemlerinde çalışmak üzere bir tarayıcı aracılığıyla çalıştığından, mükerrer uygulama geliştirme maliyetlerinden tasarruf edin. PWA yerel bir uygulama gibi davranabilir, ancak tüccarlara markalarının mobil sitelerini arama motoru sonuç sayfasında, hatta iyi bir kullanıcı deneyimine sahip en iyi yerlerde sergileme şansı da sunabilir.

Pinterest'in PWA Entegrasyonunu Destekleyen Zorlukları

Veriler, Pinterest kullanıcılarının %80'inin siteyi yerel bir uygulama yerine mobil tarayıcılarda kullandığını gösterdi. Uygulama yükleme oranı zamanla artmasına rağmen, bir kusurla geldi: doğrudan mobil webleriyle ilgili çok sayıda olumsuz, tatmin edilmemiş, hüsrana uğramış inceleme.

ABD dışındaki kullanıcıların yarısından fazlası ile sınırlı bant genişliği ve hızlı yükleme hızı ile mükemmel bir mobil web oluşturmak, küresel kullanıcıların Pinterest'e daha kolay erişmesine yardımcı olabilir. Ayrıca, yerel uygulamada hoş bir deneyim yaşamayan, mobil uygulamaya geçiş yapan kimliği doğrulanmamış kullanıcıların küçük bir oranı vardı.

Bununla birlikte, uygulama yine de mobil web'den daha fazla etkileşime sahip daha büyük bir izleyici kitlesi sağladı. Yerel uygulama kullanıcılarını mobil web'e dönüştürmek kolay bir iş değildi. Ancak Pinterest bundan daha iddialıydı.

Başka bir şey, Pinterest'in önceki mobil ağının etkileşime başlamak için en az 23 saniye gerektirmesidir. Kullanıcılar, 2017 dönüşümünden önce Pinterest'in mobil varlığını "mobil web için şeytani bir lanet" olarak değerlendirdi. Spesifik olarak, ana iş parçacığının etkileşimli olması için son yerleşiminden önce ayrıştırılması ve derlenmesi için yeterli süre boyunca 2,5 MB'den fazla JavaScript gönderildi.

Pinterest PWA'nın Sonuçları

Fonksiyonlar Hakkında

Yorucu etkileşim süresini çözmek için yeni Pinterest PWA, JavaScript'lerinden yüzlercesini azalttı ve çekirdek paketlerini ilk 650 KB'den 150 KB'ye indirdi. Ayrıca, kritik performans ölçütlerini yükseltmeyi başardılar. Etkileşim süresi 6 saniyeden az ve ilk boya 4,2 saniyeden 1,8 saniye sonra ortaya çıktı.

Genel olarak, mobil web artık daha hafif ve duyarlı. Platform görüntülerle dolu, ancak tüm unsurlar kısa ve canlı bir şekilde hizalanmış. Sayfa geçişleri de beklentilerine göre iyi çalışıyor.

Sonuçlar

2017 dönüşümü, her yıl yeni mobil web'deki haftalık aktif kullanıcılarda %103'lük bir artış sağladı.

Eski mobil web ile Pinterest PWA karşılaştırması:

• 5 dakika içinde sahada geçirilen süre %40 daha fazla
• Kullanıcı tarafından oluşturulan reklamda %44 artış
• Reklam tıklama oranında %50 artış
• Çekirdek etkileşimlerde %60 daha yüksek

Yerel uygulamayla Pinterest PWA karşılaştırması:

• 5 dakika boyunca sahada geçirilen sürede %5 daha yüksek
• Kullanıcı tarafından oluşturulan reklamda %2 artış
• Reklam tıklama oranı kaldı
• Çekirdek etkileşimlerde yaklaşık %2-3 daha yüksek

Sonuçlar, çevrimiçi bir varlık oluşturmaktan elde edilen kârı artırmanın en büyük sırrını ortaya çıkardı ve mükemmel kullanıcı deneyiminin etkileyici bir kullanıcı etkileşimi düzeyi sağladığına ve zaman içinde dönüşümleri artırdığına olan inancımızı doğruladı.

Pinterest PWA, yerel bir uygulamayı taklit etmeye yaklaşıyor. Bu nedenle, işlevsellikte uygulanabilir değişiklikler yoktur. Bununla birlikte, depolama kullanımı, iOS kullanıcılarının 56MB ve Android kullanıcılarının 9.6MB'lık küçültülmüş ve sıkıştırılmış 150KB'lık indirme yükü ile PWA'nın sağladığı aynı deneyimi sunmalarını talep ediyor. Hepsi harika ana ekrana ekleme özelliği sayesinde.

Pinterest Mobile App Makeover'dan Ne Öğrenebilirsiniz?

Adı, web platformu geliştiricileri ve büyüme mühendislerinden oluşan bir ekibin doğduğu 2017 yazında basitlik ve erişilebilirlik ilhamından gelen “Project Duplo” idi. Ölçümler için eski sitenin performansını kontrol ettiklerinde, mobil web'leri kayıtların %10'undan daha azını işleyebilirken, masaüstü web bu miktarın beş katını yaptı.

Bu projeyle ilgili özel olan şey, Pinterest mühendislerinin aynı zamanda dünyanın en büyük PWA'sı olan yeni mobil siteyi oluşturması, entegre etmesi ve başlatması için yalnızca 3 ay sürmesidir. Peki, nasıl yaptılar? Geriye dönüp bakıldığında, Progressive Web App terimini yayınladıktan 2 yıl sonra, bakış açısına göre erken benimseyenler olma endişesini paylaştılar.

Çerçeveyi Ortaya Çıkarmak

Pinterest özelliklerinde kısa bir süre için yeniden yazılan sürecin oluşturulması ve gönderilmesinin muhasebeleştirilmesi Gestalt'tır. Bu açık kaynaklı UI kitaplığı, projeyi üç ayda bir teslim etmelerine yardımcı olur. Gestalt'ın bileşen paketi, CSS'ye dokunmadan tutarlı ve kolay bir şekilde çarpıcı sayfalar oluşturmak için benzersiz tasarım dili oluşturmalarına olanak tanır.

Ardından, belirli aralıklı sayfalar için belirli düzen bileşenleriyle yalnızca mobil web için başka bir paket oluşturuldu. Hızlı, hatasız bir UI geliştirmesi için, PageContainer'ın varsayılan sınırlarının, FixedHeader'ın sınırları dışında FullWidth'i hariç tutması gerekir. Ve Pinterest'te gerçekleşen her web geliştirme için React 16 kullanıldı.

PWA ününü, oluşturma ve yönetme için Workbox kitaplıklarının geleneksel kullanımından yararlanmasından aldığı için Service Worker'a çok dikkat ettiler. Pinterest bugün, herhangi bir JavaScript veya CSS paketini ve uygulama kabuğunun kullanıcı arayüzünü değiştirmek için önbellek öncelikli stratejiye öncelik veriyor.

Hızı Nasıl Hızlandırdılar

Performans ve hız, özellikle Pinterest dönüşümünde en üst düzey merkez üssüydü. Optimizasyondan sonra Pinterest, JavaScript dosyasını 490 KB'den 190 KB'ye indirdi, rotada varsayılan seviyeden kod bölmeyi yürüttü ve ardından bileşen seviyesinden kod bölmeli bir <Loader> bileşeninin kullanılmasını istedi.

İstemci-sunucu tarafında ön yükleme sistemine güvenmek, ilk sayfa yüklemesini ve istemci tarafı yolundaki değişiklikleri iyileştirerek yüklemeyi hızlandırmaya yardımcı olduğu için de çalışır.

Pinterest, yerele çok benzeyen hızlı bir deneyim sağlamak için, bir Pin veya kullanıcıların eylemi gibi tek bir model doğruluk kaynağına sahip olarak rotaları hemen değiştirmekten sorumlu olan normalleştirilmiş redux mağazasına güvendi.

Somut bir görünümde, yalnızca sınırlı içeriğe sahip bir Pin görürsünüz. Daha fazla bilgi için tıklamaya karar verene kadar önce baştan sona okuyacaksınız. Bu şekilde, ayrıntıların sunucudan alınması için yeterli zaman. Pin verileri kitleler için normalize edildiğinden tüm bunlar mümkündür.

Önemli Çıkarımlar

Pinterest PWA, PWA'nın benimsenmesinde başı çekiyordu ve son derece başarılı oldu. Kullanıcılarının şikayetlerini duydular ve uygun sorumluluk aldılar, yerel uygulamaların getirebileceklerine neredeyse benzeyen performans gösteren ve dönüştüren yeni mobil web'i geliştirdiler.

Umarım, bu ilham verici vaka çalışması aracılığıyla, PWA hakkında daha fazla şey öğrenmeye açık fikirli olursunuz ve bunun güçlü ve tehlikeli kalmanıza nasıl yardımcı olabileceğini görmeye çalışırsınız. Şu anda en iyi sonuç veren e-ticaret platformu olan Magento için PWA geliştirmesinde on yıllık bir uzman arıyorsanız, Tigren'e göz atmayı unutmayın.

Premium Magento PWA çözümlerimiz hakkında daha fazla bilgi edinmek için Tigren ile iletişime geçin ve nerede sorun yaşadığınızı bize bildirin.