Ele.me anakara Çin’deki en büyük yemek siparişi ve dağıtım şirketidir. Çin’in dört bir yanındaki 200’den fazla şehirden 260 milyon kayıtlı kullanıcıya hizmet veriyor ve 1,3 milyondan fazla restoran listesine sahip. Kullanıcılarının %99’unun mobil cihazlardan yemek sipariş etmesiyle Ele.me, mobil web deneyimini iyileştirmek, kesintili bağlantılarda daha hızlı ve daha güvenilir hale getirmek için yola çıktı. operasyonel ihtiyaçlar.
- Önbelleğe alınmış tüm sayfalarda yükleme süresi %11,6 azaldı
- Yükleme süresi tüm sayfalarda ortalama %6,35 azaldı.
- Tutarlı etkileşim süresi, ilk yüklemede 3G ağında 4,93 saniyeye düştü
ele.me PWA’yı piyasaya sürdükten sonra yükleme sürelerimiz önemli ölçüde düştü ve mobil web deneyimimizi Çin’deki en hızlı yemek rezervasyon sitelerinden birine dönüştürdü.
Spencer Yang, Ele.me PWA Ürün Müdürü
Çok sayfalı uygulama ile tek sayfalı uygulama arasında seçim yapma #
Çok sayfalı bir uygulamada (MPA), bir kullanıcının gittiği her yol, sunucuya gereken ilişkili komut dosyaları ve stillerle birlikte sayfanın tam isteğini tetikler. Bu, her rota navigasyonunun yalnızca o rotayla ilgili içerik ve veriler için bir getirmeyi tetiklediği ve ardından kullanıcı arayüzünün istemci uygulamasında çalışan Javascript kodu tarafından oluşturulduğu tek sayfalı uygulama (SPA) modelinin tersidir.
Ele.me’nin son yıllardaki patlayıcı büyümesi, şirket içinde her biri kendi mikro hizmetini ana çatı altında yürütmekten sorumlu olan farklı iş birimlerinin büyümesine yol açtı. ihtisas. Ele.me ekibi, bu bireysel hizmetlerin birbirinden ayrılmasının en iyi şekilde, her ekibin kendi hizmetini çalıştırdığı ve sürdürdüğü çok sayfalı bir uygulama (MPA) modeli tarafından sunulduğu sonucuna vardı.
PRPL’yi bir MPA’ya uygulama #
PRPL modeli (ön yükleme kritik kaynaklar, render ilk rota, Önbellek kalan rotalar, tembel yük kalan rotalar), web geliştiricilerine, hızlı bir etkileşim süresine ve ağ gidiş dönüşlerini azaltmak için önbelleğe almayı en üst düzeye çıkarmaya özel bir vurgu yaparak, bir PWA’nın yapısına rehberlik edecek bir dizi ray sağlar. PRPL, SPA’lar üzerinde iyi bir şekilde test edilmiş olsa da, bir DKA’da gerçekte nasıl uygulanacağı daha az netti. Ele.me, MPA’larını bir PWA olarak yeniden oluşturmayı düşünürken PRPL zihniyetini benimsemeye karar verdi. Bunu yapmak için, bir kullanıcı bir sayfaya gittiğinde, ön yükleme dahil ederek o sayfa için kritik kaynaklar <link rel="preload"> gerektiği gibi veya tarayıcının ön yükleyicisinin ek ipuçlarına ihtiyaç duymadan işini yapabilmesi için bu komut dosyalarını yeterince sığ bir düzeyde ortaya çıkarmak. Ayrıca tarayıcı tarafından her desteklendiğinde bir hizmet çalışanı kurarak PWA’larını aşamalı olarak geliştirirler ve daha sonra tarayıcıyı getirmek ve önbellek diğer üst düzey gezinme yolları, böylece kullanıcı PWA’da tıkladıkça daha hızlı yükleme ve işleme deneyimi elde eder. Bir MPA’daki her sayfa kendi rotasıdır, bu nedenle ilk rotanın oluşturulması her rota için kritik işleme yolunu optimize etmek için en iyi uygulamaları uygulamaya eşdeğerdir. Bu değişikliklerle birlikte, toplam yükleme süresi tüm sayfalarda ortalama %6,35 azaldı.
Geçiş iskelet ekranlarının en kısa sürede sunulması #
Ele.me fikrini uygulamak istedi iskelet ekranlar kullanıcı herhangi bir düğmeye veya bağlantıya her dokunduğunda, sayfanın kullanıcıyı o yeni sayfaya geçirerek ve ardından içerik kullanılabilir hale geldikçe o sayfaya içerik yükleyerek mümkün olan en kısa sürede tepki vermesini sağlamanın bir yolu olan UX’e; bu aynı zamanda PWA’nın algılanan performansını iyileştirmenin anahtarıdır. Bununla birlikte, bir MPA’daki her sayfa kendi başlangıç rotası olduğundan, her gezinme, gerekli tüm yükleme, ayrıştırma ve değerlendirme çalışmalarının her seferinde yeniden yapılmasını gerektirir.
Bu soruna geçici bir çözüm bulmak için Ele.me, iskelet ekranını gerçek bir UI bileşeni olarak oluşturdu ve ardından Vue bileşenlerini oluşturmak ve ardından HTML şablonlarına enjekte etmeden önce dizelere önceden oluşturmak için Vue.js’nin Sunucu Tarafı İşleme yığınını kullandı. Bu, iskelet ekranı doğrudan oluşturmalarına ve sayfalar arasında gezinirken daha akıcı bir geçiş elde etmelerine olanak tanır.
Hizmet çalışanı ile paylaşılan kaynakları önbelleğe alma #
Bir kullanıcı PWA’da gezinirken farklı rotalar yüklenir ve bu rotaları ağdan tekrar tekrar yüklemek israf olur. Bunun üstesinden gelmek için Ele.me, kullanıcıların en çok önemsediği kritik yolları analiz etti, bu kritik yolların bağımlılıklarını toplamak için bir web paketi eklentisi oluşturdu ve ardından kullanıcının istemci tarayıcısına bir hizmet çalışanı yüklediklerinde bu yolları önbelleğe aldı. Bu kritik yollar, PWA’nın tipik UI kabuğunu oluşturan Javascript, CSS ve görüntüleri içerir.
Önemli olarak kabul edilen ancak kritik olmayan yollar, kullanıcı PWA’da gezinmeye devam ederken bunun yerine çalışma zamanında hizmet çalışanı tarafından artımlı olarak önbelleğe alınır. Bu, Ele.me’nin PWA’yı kullanıcılara tüm ağ koşullarında doğrudan önbellekten sunmasına olanak tanır. Sonuç: Önbelleğe alınmış tüm sayfalarda yükleme süresi %11,6 azaldı.