Ele.me, Çin'deki en büyük yemek siparişi ve teslimat şirketidir. Çin'in dört bir yanındaki 200'den fazla şehirden 260 milyon kayıtlı kullanıcıya hizmet veren ve 1, 3 milyondan fazla restoran girişine sahip. Kullanıcılarının% 99'u mobil cihazlardan yemek siparişi verdiği için Ele.me, mobil web deneyimini iyileştirmek üzere işe koyuldu. Böylece, stabil olmayan bağlantılarda web deneyimini daha hızlı ve daha güvenilir hale getirdi. Tüm bunları yaparken de operasyonel ihtiyaçlarını karşılamak için çok sayfalı bir uygulamanın temel teknik modelinden yararlandı.
- Önbelleğe alınan tüm sayfalarda yükleme süresi% 11,6 azaldı
- Yükleme süresi tüm sayfalarda ortalama% 6,35 azaldı.
- Tutarlı şekilde etkileşim kurma süresi ilk yüklemede 3G ağda 4,93 saniyeye düştü
ele.me PWA'yı kullanıma sunmamızın ardından yükleme sürelerimiz önemli ölçüde azaldı ve mobil web deneyimimiz, Çin'deki en hızlı yemek rezervasyonu sitelerinden birine dönüştü.
Spencer Yang, Ele.me PWA Ürün Müdürü
Çok sayfalı veya 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 gezinmesinin yalnızca bu rotayla ilgili içerik ve veriler için bir getirme işlemini tetiklediği ve daha sonra istemci uygulamasında çalışan JavaScript kodu tarafından kullanıcı arayüzü oluşturulduğu tek sayfalı uygulama (SPA) modelinin aksine
Ele.me'nin son yıllarda hızlı büyümesi, şirket içinde her biri ana https://ele.me alanı altında mikro hizmetlerini yönetmekten sorumlu olan farklı işletme birimlerinin büyümesini sağladı. Ele.me ekibi, bu bağımsız hizmetlerin ayrıştırılmasının en iyi şekilde, her ekibin kendi hizmetini yürütüp sürdürdüğü çok sayfalı bir uygulama (MPA) modeliyle sağlandığı sonucuna varmıştır.
MPA'ya PRPL uygulama
PRPL kalıbı (Kritik kaynakları önceden yükleme, Oluşturma ilk rota, Kalan rotaları önbelleğe al, kalan Geç yüklenen rotaları önden yükle), web geliştiricilerine PWA'nın yapısına rehberlik edecek bir dizi ray sağlar. Özellikle, etkileşim için kısa süreye ve ağ gidiş dönüşlerini azaltmak için önbelleğe almayı en üst düzeye çıkarmaya özellikle odaklanılır. PRPL
SPA'larda iyi test edilmiş olsa da bunun bir MPA'ya nasıl uygulanacağı pek açık değildi. Ele.me, MPA'larını PWA olarak yeniden oluşturmayı düşünürken
PRPL yaklaşımını benimsemeye karar verdi. Bunu yapmak için kullanıcı bir sayfaya gittiğinde, gerektiğinde <link rel="preload"> ekleyerek veya tarayıcının ön yükleyicisinin ek ipuçlarına ihtiyaç duymadan işini yapabilmesi için bu komut dosyalarını yeterince yüzeysel bir düzeyde göstererek söz konusu sayfa için önemli kaynakları önceden yüklemesini sağlar. Ayrıca tarayıcı tarafından desteklendiği zaman bir Service Worker yükleyerek PWA'sını kademeli olarak iyileştirir. Ardından bu hizmet çalışanı, diğer üst düzey gezinme rotalarını getirip önbelleğe almak için kullanır. Böylece PWA'yı tıklayan kullanıcılar daha hızlı yükleme ve oluşturma deneyimi yaşar. Bir MPA'daki her sayfa kendi rotasıdır. Bu nedenle ilk yolun oluşturulmasını hızlandırmak, her rota için kritik oluşturma yolunu optimize etmek üzere en iyi uygulamaları uygulamakla eşdeğerdir. Bu değişiklikler sayesinde, tüm sayfalarda toplam
yükleme süresi ortalama% 6,35 azaldı.
Geçiş iskelet ekranlarını en kısa sürede sunma
Ele.me, iskelet ekranlar fikrini kullanıcı deneyimine uygulamak istedi. Bu, kullanıcı herhangi bir düğmeye veya bağlantıya her dokunduğunda sayfanın mümkün olan en kısa sürede kullanıcıyı yeni sayfaya geçirerek ve ardından, içerik kullanılabilir hale geldikçe söz konusu sayfaya içerik yükleyerek sayfanın mümkün olan en kısa sürede tepki vermesini sağlamak için kullanılan PWA'nın algılanan performansını iyileştirmenin de önemli bir yoludur. Bununla birlikte, 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 sorunu çözmek için Ele.me, iskelet ekranı gerçek bir kullanıcı arayüzü bileşeni olarak oluşturdu ve ardından Vue.js’nin Sunucu Tarafı Oluşturma yığınını kullanarak Vue bileşenlerini oluşturup daha sonra bunları HTML şablonlarına eklemeden önce dizelere önceden işledi. Bu, yayıncıların doğrudan iskelet ekranı oluşturmalarına ve sayfalar arasında gezinirken daha akıcı bir geçiş yapmalarına olanak tanır.
|
|
Service Worker ile paylaşılan kaynakları önbelleğe alma
Kullanıcılar PWA'da gezinirken farklı rotalar yüklenir ve bu rotaların ağdan tekrar tekrar yüklenmesi bir israf haline gelir. Ele.me bu sorunu çözmek için kullanıcıların en çok önem verdiği kritik rotaları analiz etti, bu kritik rotaların bağımlılıklarını toplamak için bir web paketi eklentisi oluşturdu ve kullanıcının istemci tarayıcısına bir hizmet çalışanı yüklerken bu rotaları önceden önbelleğe aldı. Bu kritik rotalar arasında JavaScript, CSS ve PWA'nın tipik kullanıcı arayüzü kabuğunu oluşturan resimler yer alır.
Kullanıcı PWA'da gezinmeye devam ederken, önemli olduğu halde kritik olmadığı düşünülen rotalar, çalışma zamanında hizmet çalışanı tarafından kademeli olarak önbelleğe alınır. Bu sayede Ele.me, PWA'yı kullanıcılara tüm ağ koşullarında doğrudan önbellekten sunabilir. Sonuç olarak, ön belleğe alınmış tüm sayfalarda yükleme süresi %11,6 azaldı.