Bir Tinder Proqressiv Veb Tətbiqi Performans Case Study

Tinder bu yaxınlarda vebdə sürüşdü. Onların yeni cavabverici Proqressiv Veb Tətbiqi - Tinder Online - masa üstü və mobil istifadəçilərin 100% -i, JavaScript performansını optimallaşdırma üsullarını, şəbəkə dayanıqlığı üçün xidmət işçilərini və söhbət nişanları üçün təkan bildirişlərini istifadə edir. Bu gün onların bəzi veb təlimlərini gəzəcəyik.

Proqressiv Veb Tətbiqinə səyahət

Tinder Online yeni bazarlarda övladlığa götürülmək, digər platformalarda T1-nin V1 təcrübəsi ilə xüsusiyyət paritetini vurmağa çalışmaq məqsədi ilə başladı.

PWA üçün MVP, dövlət idarəçiliyi üçün UI kitabxanası və Redux olaraq React istifadə edərək həyata keçirmək üçün 3 ay çəkdi. Çalışmalarının nəticəsi, baha başa gələn və ya məlumat qıtlığı bazarında kimsə üçün məlumat investisiya xərclərinin 10% -də əsas Tinder təcrübəsini təmin edən bir PWAdır:

Tinder Online və yerli tətbiqlər üçün məlumat investisiya müqayisə. Bu almaları alma ilə müqayisə etmədiyini qeyd etmək vacibdir. PWA tələb olunan yeni marşrutlar üçün kod yükləyir və əlavə kodun dəyəri tətbiq müddətində amortizasiya olunur. Sonrakı naviqasiyalar hələ tətbiqin yüklənməsi qədər məlumat almır.

Erkən əlamətlər doğma tətbiqlə müqayisədə yaxşı sürüşmə, mesajlaşma və sessiya uzunluğunu göstərir. PWA ilə:

  • İstifadəçilər doğma tətbiqlərindən daha çox vebdə çalırlar
  • İstifadəçilər doğma tətbiqlərindən daha çox vebdə mesaj göndərirlər
  • İstifadəçilər yerli tətbiqlərlə bərabər satın alırlar
  • İstifadəçilər doğma tətbiqlərindən daha çox veb-səhifələrdə profillər düzəldirlər
  • Sessiya vaxtları doğma tətbiqlərindən daha uzundur

Performans

Mobil cihazları Tinder Online istifadəçiləri ən çox veb təcrübələrinə daxil olurlar:

  • Apple iPhone və iPad
  • Samsung Galaxy S8
  • Samsung Galaxy S7
  • Motorola Moto G4

Chrome İstifadəçi Təcrübəsi hesabatından (CrUX) istifadə edərək, sayta daxil olan istifadəçilərin əksəriyyətinin 4G bağlantısı olduğunu öyrənə bilirik:

Qeyd: Rick Viscomi, bu yaxınlarda PerfPlanet-də CrUX-i və Inian Parameshwaran ən yaxşı 1M saytları üçün bu məlumatları daha yaxşı görüntüləmək üçün rUXt örtdü.

WebPageTest və Lighthouse-da (4G-də Galaxy S7 istifadə edərək) yeni təcrübəni sınaqdan keçirərək, 5 saniyə ərzində yükləyə və interaktiv ola bildiklərini görə bilərik:

Əlavə olaraq daha çox CPU məhdud olan orta mobil cihazlarda (Moto G4 kimi) bunu daha da yaxşılaşdırmaq üçün çox yer var:

Tinder təcrübələrini optimallaşdırmaq üzərində işləməkdə çətinlik çəkirlər və yaxın gələcəkdə veb performansları ilə əlaqədar işləri eşitməyi gözləyirik.

Performans optimallaşdırılması

Tinder, səhifələrinin yüklənməsini və bir sıra texnikalar vasitəsi ilə interaktiv olmasını nə qədər sürətlə inkişaf etdirə bildi. Marşrut əsaslı kod bölüşdürülməsini həyata keçirdilər, performans büdcələrini və uzunmüddətli aktivlərin keşlənməsini təqdim etdilər.

Marşrut səviyyəli kod parçalanması

Tinder əvvəlcə təcrübələrinin interaktiv ola biləcəyini nə qədər gecikdirən böyük, monolitik JavaScript paketləri var. Bu paketlərdə əsas istifadəçi təcrübəsini açmaq üçün dərhal lazım olmayan kodu ehtiva edirdi, beləliklə kod parçalanması ilə parçalanmaq olardı. Yalnız gəmi kodu istifadəçilərinin qabaqcadan ehtiyac duyduğu və qalan hissəsini tənbəl yükləməsi ümumiyyətlə faydalıdır.

Bunu həyata keçirmək üçün Tinder React Router və React Loadable istifadə etdi. Tətbiqləri bütün marşrutlarını mərkəzləşdirdikləri və məlumatları bir konfiqurasiya bazası kimi təqdim etdikləri üçün, yuxarı səviyyədə kod parçalanmasını həyata keçirmək üçün düz irəli tapdılar.

Xülasə:

React Loadable, React-də komponent mərkəzli kod parçalanmasını asanlaşdırmaq üçün James Kyle tərəfindən kiçik bir kitabxanadır. Yüklənə bilən bir komponent səviyyəsində bağlamaların ayrılmasını asanlaşdıran daha yüksək səviyyəli bir komponentdir (bir komponent yaradan bir funksiyadır).

Deyək ki, "A" və "B" iki komponentimiz var. Kod ayırmadan əvvəl, Tinder hər şeyi (A, B və s.) Statik şəkildə əsas paketlərinə idxal etdi. Bu nəticəsiz idi, çünki dərhal həm A, həm də B-yə ehtiyac duymadıq:

Kod parçalanması əlavə edildikdən sonra A və B komponentləri lazım olduqda yüklənə bilər. Tinder, React Yüklənə bilən, dinamik idxal () və veb səhifənin sehrli şərh sintaksisini (dinamik bölmələrə ad vermək üçün) öz JS-lə təqdim etməklə bunu etdi:

"Satıcı" (kitabxana) büzülməsi üçün, Tinder, ümumi istifadə olunan kitabxanaları marşrutlar boyunca daha uzun müddət saxlanıla bilən bir dəstə faylına keçirmək üçün veb paketdən istifadə etdi:

Sonra, Tinder idarəetmə komponentindəki növbəti səhifə üçün potensial mənbələri əvvəlcədən yükləmək üçün React Loadable'ın əvvəlcədən yüklənmiş dəstəyindən istifadə etdi:

Tinder, bütün marşrut səviyyələri paketlərini önləmək və istifadəçilərin əsas paketdə kod ayrılmadan ziyarət edə biləcəyi marşrutları daxil etmək üçün Xidmət İşçilərindən də istifadə etdi. Əlbəttə UglifyJS vasitəsilə JavaScript minification kimi ümumi optimallaşdırmadan da istifadə edirik:

yeni webpack.optimize.UglifyJsPlugin ({paralel: həqiqi, kompres: {xəbərdarlıqlar: yalan, screw_ie8: həqiqi}, mənbə xəritə: SHOULD_SOURCEMAP}),

Təsir

Marşrut əsaslı kod bölüşdürülməsini tətbiq etdikdən sonra əsas paket ölçüləri 166KB-dən 101KB-a endi və DCL 5.46-dan 4.69-a qədər yaxşılaşdı:

Uzunmüddətli aktivlərin saxlanması

Statik resursların veb-kassa ilə çıxarılmasının uzun müddətə saxlanılmasını təmin etmək, hər bir fayla bir önbelleğe əlavə etmək üçün [chunkhash] istifadə etməkdən faydalanır.

Tinder bir sıra açıq mənbəli (satıcı) kitabxanalardan asılılıq ağacının bir hissəsi kimi istifadə edirdilər. Bu kitabxanalardakı dəyişikliklər əvvəlcə [chunkhash] dəyişməsinə və önbelleklerinin etibarsız olmasına səbəb olardı. Bu problemi həll etmək üçün Tinder xarici asılılıqların bir ağ siyahısını müəyyənləşdirməyə və önbelleği yaxşılaşdırmaq üçün veb paketlərini əsas hissədən ayırmağa başladı. Paketin ölçüsü hər iki hissə üçün artıq 160KB təşkil edir.

Gec aşkar edilmiş mənbələri əvvəlcədən yükləmək

Təzələyən olaraq, brauzerə kritik, gec aşkar edilmiş resursları yükləmək üçün dekorativ bir göstərişdir. Tək səhifəli tətbiqlərdə bu mənbələr bəzən JavaScript dəstləri ola bilər.

Tinder əsas təcrübə üçün vacib olan kritik JavaScript / veb paket paketlərini əvvəlcədən yükləmək üçün dəstək tətbiq etdi. Bu yükləmə müddətini 1s azaltdı və ilk boya 1000 m-dən 500 m-ə qədər azaldı.

Performans büdcələri

Tinder, mobil telefonlarında performans hədəflərini vurmaları üçün performans büdcələrini qəbul etdi. Alex Russell-in "Sən buna imkan verə bilərsənmi?: Real dünya performans büdcələri" ndə qeyd etdiyi kimi, yavaş 3G bağlantılarının orta mobil cihazlarda istifadə edilməsini nəzərdən keçirərkən təcrübə təqdim etmək üçün məhdud imkanlar var.

Tez bir zamanda interaktiv olmaq üçün Tinder əsas və satıcı dəstələri üçün ~ 155KB büdcəni tətbiq etdi, asinxron (tənbəl yüklənmiş) hissələr ~ 55KB və digər hissələr ~ 35KB. CSS 20KB həddinə malikdir. Bu, performanslarını təkrarlamaqdan çəkinmələrini təmin etmək üçün çox vacib idi.

Veb paket paketi təhlili

Veb paket paketi analizatoru, JavaScript paketləriniz üçün asılılıq qrafikinin nəyə bənzədiyini tapmaq üçün imkan verir, beləliklə optimallaşdırmaq üçün aşağı asılmış meyvənin olub olmadığını öyrənə bilərsiniz.

Tinder yaxşılaşdırılması üçün sahələri tapmaq üçün Webpack Bundle Analyzer istifadə etdi:

  • Polyfills: Tinder təcrübələri ilə müasir brauzerləri hədəf alır, eyni zamanda IE11 və Android 4.4 və daha yuxarı dəstəyi dəstəkləyir. Poliffill və kodun minimum səviyyədə saxlanması üçün, polyfills üçün babel-preset-env və core-js istifadə edirlər.
  • Kitabxanalardan daha incə istifadəsi: Tinder yerli IndecedDB-nin birbaşa istifadəsi ilə əvəz edildi.
  • Daha yaxşı bölünmə: İlk boya / interaktiv üçün tələb olunmayan komponentləri əsas paketlərdən ayırın
  • Kodun təkrar istifadəsi: Uşaqlardan üç dəfədən çox istifadə edilən mücərrəd hissələrə asinxron ümumi ortaqlıqlar yaradılmışdır.
  • CSS: Tinder də kritik CSS-lərini əsas paketlərindən çıxardı (çünki server tərəfi göstərməyə keçdi və bu CSS-i hər halda çatdırdı)

Paket analizindən istifadə Webpack'in Lodash Modulu dəyişdirmə plaginindən də faydalanmağa səbəb oldu. Plugin modulların xüsusiyyət dəstlərini boşluq, şəxsiyyət və ya daha sadə alternativlərlə əvəz etməklə daha kiçik Lodash qurmalarını yaradır:

Veb paket paketi analizatoru Veb paket konfiqurasiyanıza inteqrasiya edilə bilər. Bunun üçün Tinderin qurulması belə görünür:

eklentilər: [yeni BundleAnalyzerPlugin ({analizatorMode: 'server', analizatorPort: 8888, reportFilename: 'report.html', openAnalyzer: əsl, generateStatsFile: saxta, statsFilename: 'stats.json', statsOptions: null})

Sol JavaScript-in əksəriyyəti Redux Reducer və Saga Qeyd sənədlərinə memarlıq dəyişiklikləri etmədən ayrılmaq çətin olan əsas hissədir.

CSS strategiyası

Tinder, çox istifadə edilə bilən CSS üslubu yaratmaq üçün Atom CSS-dən istifadə edir. Bu atom CSS üslublarının hamısı ilkin boyada qeyd edilmişdir və CSS-nin qalan hissəsi üslub cədvəlinə (animasiya və ya baza / sıfırlama üslubları daxil olmaqla) yüklənmişdir. Tənqiqi üslubların ən yüksək ölçüsü 20KB gzipped, son dövrlərdə quruluşu arıq <11KB-ə çatır.

Dəyişənləri izləmək üçün Tinder hər buraxılış üçün CSS statistikaları və Google Analytics istifadə edin. Atom CSS istifadə edilməzdən əvvəl, səhifə yükləmə müddəti ~ 6.75. Onlar ~ 5.75s olduqdan sonra.

Tinder Online həmçinin CSS-ni analiz etmək və istifadə edə biləcəyim qaydalara əsaslanan satıcı prefiks əlavə etmək üçün PostCSS Autoprefixer plaginindən istifadə edir:

yeni webpack.LoaderOptionsPlugin ({seçimlər: {kontekst: paths.basePath, çıxış: {yol: './'}, kiçiltmək: əsl, postcss: [autoprefixer ({brauzerlər: ['son 2 versiya'), 'deyil <11 ',' Safari> = 8 ']})]}}),

İş vaxtı

RequestIdleCallback () ilə tənqidi olmayan işin təxirə salınması

İş vaxtının işini yaxşılaşdırmaq üçün, Tinder qeyri-kritik hərəkətləri boş vaxta təxirə salmaq üçün requestIdleCallback () istifadə etməyi seçdi.

requestIdleCallback (myNonEssentialWork);

Buraya alət mayakları kimi işlər də daxil idi. Süpürərkən boya sayını azaltmaq üçün bəzi HTML kompozit qatlarını da asanlaşdırdılar.

Sürüşərkən öz cihazları mayakları üçün requestIdleCallback () istifadə olunur:

əvvəl ..

və sonra..

Asılılığın artırılması

Veb-paket 3 + Doldurma sahəsi

Veb paketin köhnə versiyalarında, paketinizdəki hər modulu bağlayarkən fərdi funksiyalar bağlanacaqdı. Bu sarmalama funksiyaları brauzerinizdə icra etməyiniz üçün JavaScript-ni yavaşlatdı. Webpack 3 "əhatə qaldırma" təqdim etdi - bütün modullarınızın həcmini bir bağlama halına gətirmək və brauzerinizdə kodunuzun daha sürətli icra müddətinə sahib olmaq imkanı. Bunu Modul Concatenation plugin ilə tamamlayır:

yeni veb-paket.optimize.ModuleConcatenationPlugin ()

Webpack 3'ün qaldırılması Tinder'in ilkin JavaScript analiz müddəti satıcı satıcısı üçün 8% artırdı.

16 reaksiya

React 16, əvvəlki versiyalarla müqayisədə React-in paket ölçüsünü azaldıb inkişaf etdirmə təqdim etdi. Bu, daha yaxşı qablaşdırma (Rollup istifadə edərək) və istifadə olunmamış kodu çıxarmaqla da əlaqəli idi.

React 15-dən 16-a reaksiya verərək Tinder satıcı satıcılarının ümumi gzipped ölçüsünü ~ 7% azaltdı.

Reaktiv + reaksiya dominin ölçüsü ~ 50KB gzipped və indi yalnız ~ 35KB-dir. Dan Abramov, Dominic Gannaway və Nate Hunzaker sayəsində React 16'nın paket ölçüsünü azaltmaqda kömək etdi.

Şəbəkə dayanıqlığı və oflayn aktivlərin keşlənməsi üçün iş qutusu

Tinder də həm tətbiqi qabıqlarını, həm də əsas, satıcı, manifest paketləri və CSS kimi əsas statik aktivlərini önbelleme üçün Workbox Webpack plaginlərindən istifadə edir. Bu təkrar ziyarətlər üçün şəbəkə möhkəmliyini təmin edir və istifadəçinin sonrakı ziyarətləri üçün geri qayıtdıqda tətbiqin daha tez başlamasını təmin edir.

İmkanlar

Source-map-explorer (başqa bir paket analizi vasitəsi) istifadə edərək Tinder paketlərinə qazma, yükləmə ölçüsünü azaltmaq üçün əlavə imkanlar var. Girişdən əvvəl Facebook Fotoşəkilləri, bildirişlər, mesajlaşma və captchas kimi komponentlər alınır. Bunları kritik yoldan uzaqlaşdırmaq əsas paketdən 20% -ə qədər qənaət edə bilər:

Kritik yoldakı digər bir asılılıq 200KB Facebook SDK skriptidir. Bu skriptin atılması (lazım olduqda tənbəl yüklənə bilər) ilkin yükləmə müddətindən 1 saniyə aralığa düşə bilər.

Nəticələr

Tinder hələ də Proqressiv Veb Tətbiqində iterasiya edir, lakin artıq öz əməyinin bəhrələrindən müsbət nəticələr görməyə başlamışlar. Tinder.com-a baxın və yaxın gələcəkdə daha çox irəliləyiş üçün gözləyin!

Tinder Online-ı işə saldıqları və bu məqaləyə daxil etdikləri üçün Roderick Hsiao, Jordan Banafsheha və Erik Hellenbrand-a təşəkkürlər və təbriklər ilə. Baxışa görə Çeyni Tsaiyə təşəkkür edirəm.

Əlaqəli oxu:

  • Pinterest PWA performans nümunəsi
  • Bir Treebo React & Preact performance case study
  • Twitter Lite və miqyasda yüksək performanslı PWA-lar

Bu məqalə Performance Planet-dən çap olunmuşdu. Yenidən reaksiya vermisinizsə, Başlayanlar üçün Reaksiya hərtərəfli bir başlanğıc nöqtəsi tapdım.