Veb-ilovalarning ishlashini boshqarish bo'yicha harakatlaning va ilgarilab boring. Case Study: Treebo

Mualliflar: Treebo: Lakshya Ranganath, Chrome: Addy Osmani

Treebo - bu Hindistonning sayyohlik sohasining 20 milliard dollarlik segmentida faoliyat yuritadigan eng mashhur byudjetli mehmonxonalar tarmog'idir. Yaqinda ular odatdagi mobil tajribasi sifatida yangi Progressive Web App-ni jo'natishdi, dastlab React-dan foydalanib, keyinchalik ishlab chiqarishda Preact-ga o'tdilar.

Ular o'zlarining eski mobil saytlariga nisbatan ko'rgan narsalari - birinchi marta bo'yash uchun 70% + yaxshilanish, vaqtni interfaol ravishda 31% yaxshilash. va odatiy tashrif buyuruvchilar va ularning maqsadli apparatlari uchun 3G orqali 4 soniya ichida yuklanadi. Hindistonda WebPageTest-ning sekinroq 3G emulyatsiyasidan foydalangan holda 5 yoshdan kichiklar orasida interaktiv edi.

React-dan React-ga o'tish faqat interfaol vaqt davomida 15% yaxshilanish uchun javobgardir. Treebo.com-ni ularning to'liq tajribasi bilan tanishib chiqishingiz mumkin, ammo bugun biz ushbu PWA-ni etkazib berishni amalga oshirgan texnik sayohatlarga sho'ng'moqchimiz.

Treebo-ning Progressive veb-ilovasi

Ijro sayohati

Eski mobil sayt

Treebo-ning eski mobil sayti yaxlit Django o'rnatilishi bilan jihozlangan. Foydalanuvchilar veb-saytdagi har bir sahifaga o'tish uchun server tomonidan so'ralishini kutishlari kerak edi. Ushbu asl sozlash birinchi bo'yash vaqti 1.5s, birinchi mazmunli bo'yoq vaqti 5.9s bo'lgan va 6.5s da birinchi interfaol edi.

Asosiy bitta sahifali reaktsiya ilovasi

Treebo-ni qayta yozishning birinchi iteratsiyasi uchun React va oddiy veb-to'plam sozlamalari yordamida qurilgan bitta sahifa ilovasi bilan boshlandi.

Siz quyida ishlatiladigan haqiqiy kodni ko'rib chiqishingiz mumkin. Bu bir nechta oddiy (monolitik) JavaScript va CSS to'plamlarini yaratadi.

Ushbu tajriba 4.8s gacha bo'lgan birinchi bo'yoqqa ega edi, taxminan 5.6sda birinchi interfaol bo'lib, va ularning mazmunli sarlavhali rasmlari taxminan 7.2s da bo'yalgan.

Server tomonidan taqdim etish

Keyinchalik, ular birinchi bo'yoqlarini biroz optimallashtirishga kirishdilar va shu bilan Server-Rendering-ni sinab ko'rishdi. Shuni ta'kidlash kerakki, server tomonidan ko'rsatiladigan xizmatlar bepul emas. U bitta narsani boshqasining narxiga optimallashtiradi.

Server tomonidan taqdim etilganida sizning brauzeringiz sizning brauzeringizga javobi sizning sahifangizning HTML-si bo'lib, u sizning brauzeringiz barcha JavaScript-larni yuklab olinishini va bajarilishini kutmasdan turib ko'rsatishni boshlashi mumkin.

Treebo, dastlabki yuklanishda dastur uchun komponentlarni HTML satriga va in'ektsiya holatini ko'rsatish uchun React ning renderToString () -dan foydalangan.

Treebos holatida, server tomoni renderlashdan foydalanib, birinchi bo'yoq vaqtini 1.1sgacha va birinchi mazmunli bo'yash vaqtini 2.4sgacha qisqartirdik - bu foydalanuvchilar sahifani tayyor bo'lishini qanchalik tez sezishlari, tarkibni avvalroq o'qishlari va biroz yaxshiroq ishlashi. sinovlarda SEO-da. Ammo salbiy tomoni shundaki, u vaqtni interaktiv qilish uchun juda salbiy ta'sir ko'rsatdi.

Foydalanuvchilar tarkibni ko'rishlari mumkin bo'lsa-da, asosiy mavzular JavaScript-ni yoqish paytida qoqilib qoldi va shunchaki osib qo'yildi.

SSR bilan brauzer oldingisidan ancha katta HTML yuklamasini olib, qayta ishlashi kerak edi va keyin ham JavaScript-ni olish, tahlil qilish / kompilyatsiya qilish va bajarish kerak edi. Bu ko'proq ishlarni samarali bajarayotgan edi.

Bu shuni anglatadiki, birinchi interfaol taxminan 6.6s, regressiyani keltirib chiqardi.

SSR shuningdek pastki qismli qurilmalarda asosiy ipni qulflash orqali TTIni orqaga itarishi mumkin.

Kodni ajratish va marshrutga asoslangan chunking

Treebo tomonidan ko'rib chiqilgan navbatdagi narsa bu vaqtni interaktiv raqamlarini tushirishga yordam beradigan marshrutga asoslangan chunking.

Yo'nalishga asoslangan chunking marshrutlarni interfaol qilish uchun zarur bo'lgan minimal kodlarga xizmat ko'rsatishdan iborat bo'lib, marshrutlarni talabga binoan yuklash mumkin bo'lgan "bo'linmalar" ga ajratish orqali amalga oshiriladi. Bu resurslarni ular yozilgan teranlik darajasiga yaqinroq etkazishga undaydi.

Bu erda nima qilish kerak edi: ular o'zlarining sotuvchilarga bog'liqliklarini, veb-paketlarining ishlash vaqtlari va yo'nalishlarini alohida bo'limlarga ajratishdi.

Bu birinchi interfaol vaqtni 4.8sgacha qisqartirdi. Ajoyib!

Yagona salbiy tomoni shundaki, u hozirgi marshrutni JavaScript-ni yuklab olishni boshlang'ich to'plamlar bajarilgandan keyingina boshladi, bu ham ideal emas edi.

Ammo bu hech bo'lmaganda tajribaga ijobiy ta'sir ko'rsatdi. Yo'nalishga asoslangan kodlarni ajratish va ushbu tajriba uchun ular biroz noaniq narsani qilmoqdalar. Ular reaktsion marshrutizatorning GetComponent uchun deklarativ qo'llab-quvvatlashidan foydalanib, yuklarni asenkron ravishda yuklash uchun veb-paketni import () chaqiruvi bilan ishlatmoqdalar.

PRPL ishlash namunasi

Yo'nalishga asoslangan chunking - bu ko'proq donador xizmat ko'rsatish va keshlash uchun kodni aqlli to'plamdagi birinchi qadam. Treebo bunga asos solmoqchi edi va ilhom uchun PRPL naqshiga murojaat qildi.

PRPL - bu dasturlarni etkazib berish va ishga tushirish ishlariga katta e'tibor qaratgan holda PWA-larni tuzish va ularga xizmat ko'rsatish uchun namuna.

PRPL:

  • URL manzili uchun muhim manbalarni joylashtiring.
  • Boshlang'ich yo'nalish.
  • Qolgan yo'nalishlarni oldindan keshlash.
  • Yolg'on yuklang va talabga binoan qolgan yo'nalishlarni yarating.
Jimmi Mun tomonidan yaratilgan PRPL vizualizatsiya

"Push" qismi HTTP / 2-ni qo'llab-quvvatlaydigan server / brauzer kombinatsiyalari uchun mo'ljallangan, keshlashni optimallashtirishda brauzerni birinchi tez bo'yash uchun zarur bo'lgan resurslarni etkazib berish uchun mo'ljallangan, taqsimlanmagan tuzilishga xizmat qilishni taklif qiladi. Ushbu manbalarni etkazib berishni yoki HTTP / 2 Push yordamida samarali ravishda ishga tushirish mumkin.

Treebo joriy yo'nalish magistralini oldindan yuklash uchun dan foydalanishni tanladi. Bu ularning dastlabki interfaol vaqtlarini qisqartirishga ta'sir ko'rsatdi, chunki joriy to'plamni yig'ish tugagandan so'ng veb-sayt uni yuklab olish uchun qo'ng'iroq qilganida, hozirgi marshrut tarmog'i allaqachon keshda edi. Bu vaqtni biroz pasaytirdi va shuning uchun birinchi interfaol 4.6s belgisida sodir bo'ldi.

Oldindan yuklangan yagona narsa - bu brauzer orqali amalga oshirilmaganligi. Biroq, Safari Tech Preview-da havolalarni qayta yuklash amalga oshirilmoqda. Bu yil erga tushadi va umid qilaman. Firefox-da uni qo'ndirish bo'yicha ham ishlar olib borilmoqda.

HTML oqimlari

RenderToString () bilan bog'liq qiyinchiliklardan biri shundaki, u sinxron bo'lib, React saytlarining server tomonidan ko'rsatiladigan ishlarida qiyinchiliklarga olib kelishi mumkin. Serverlar to'liq HTML yaratilmaguncha javob yubora olmaydi. Buning o'rniga veb-serverlar o'z tarkiblarini uzatganda, brauzerlar to'liq javob tugaguncha foydalanuvchilarga sahifalarni taqdim etishlari mumkin. Reaksiya-dom-oqim kabi loyihalar bu erda yordam berishi mumkin.

Treebo idrok etilgan ish faoliyatini yaxshilash va o'zlarining ilovalariga progressiv ishlash hissi bilan tanishish uchun HTML oqimlariga murojaat qildi. Ular bosh teglarini CSS va JavaSkriptlarida oldindan yuklash uchun o'rnatiladigan rel relel-teglar bilan oqimli oqim qilar edilar. Keyin ular o'zlarining server tomonida ishlashni amalga oshiradilar va yukning qolgan qismini brauzerga yuboradilar.

Buning foydasi shundan iboratki, resurslarni yuklab olish avvalroq boshlanib, birinchi bo'yoqlarini 0.9sgacha va birinchi interfaol 4.4sgacha tushirdi. Ilova 4.9 / 5 soniyasining atrofida doimiy ravishda interaktiv edi.

Salbiy tomoni shundaki, u ulanishni mijoz va server o'rtasida biroz ko'proq vaqt davomida ochiq ushlab turdi, agar siz kutish vaqtini uzoqroq qilsangiz, muammolar bo'lishi mumkin. HTML oqimi uchun Treebo tarkibiga ega bo'lgan birinchi qismni aniqladi, keyin ular asosiy tarkibga va kechroq qismlarga ega. Bularning barchasi sahifaga kiritilmoqda. Bu quyidagicha ko'rinadi:

Ta'sirchanlik bilan, birinchi qism barcha boshqa skript teglari uchun o'zlarining rel = old yuklashlarini oldi. Kechikib bo'lingan dastur html-ni ko'rsatadigan serverga ega bo'lib, unga kiradigan yoki aslida JavaScript-ni ishlatadigan narsalar mavjud.

CSS-ning kritik yo'nalishini belgilash

CSS uslublar jadvallari renderlashni blokirovka qilishi mumkin. Brauzer sizning jadvallar jadvalingizni so'ragan, qabul qilgan, yuklab olmagan va tahlil qilmaguncha, sahifa bo'sh qolishi mumkin. Brauzer CSS hajmini qisqartirishga to'g'ri keladi va uni sahifaga kiritish (tanqidiy-uslub uslublari) va shu bilan HTTP so'rovini o'chirib, biz sahifani tezroq ishlashiga erishishimiz mumkin.

Treebo joriy marshrut uchun tanlangan CSS-ni kiritish va DOMContentLoaded-da loadCSS-dan foydalanib, qolgan CSS-lariga asenkron ravishda yuklashda yordam berdi.

Uslublar jadvallari uchun havolalarni blokirovka qilish va kritik CSS-ning bir nechta satrlarini belgilashda kritik-yo'l ko'rsatadigan renderlash effektini olib tashlash va dastlabki bo'yash vaqtini taxminan 0.4s gacha yaxshilash samarasi paydo bo'ldi.

Salbiy tomoni shundaki, birinchi interfaol vaqt bir oz 4.6sgacha ko'tarildi, chunki yuklamaning hajmi kattalashtirilgan uslublar bilan kattaroq edi va JavaScript-ni ishga tushirishdan oldin tahlil qilish uchun vaqt kerak bo'ldi.

Statik aktivlarni oflayn-keshlash

Service Worker - bu sizning sahifangizdagi tarmoq so'rovlari qanday ishlashini boshqarishga imkon beradigan dasturlashtiriladigan tarmoq proksi-serveri.

Treebo Service Worker-ning statik aktivlarini keshlashni qo'llab-quvvatladi, shuningdek, shaxsiy oflayn sahifani yaratdi. Quyida biz ularning Service Worker-ning ro'yxatga olinishi va resurslarni keshlash uchun sw-precache-webpack-plaginlaridan qanday foydalanishlarini ko'ramiz. "

O'zlarining CSS va JavaScript to'plamlari kabi statik aktivlarni keshlash har safar tarmoqqa qaytish o'rniga, disk keshidan yuklayotganda, sahifalar bir zumda takroriy tashriflar paytida (deyarli) yuklanishni anglatadi. Puxta aniqlangan keshlash sarlavhalari disk keshining urish tezligiga nisbatan xuddi shunday ta'sir ko'rsatishi mumkin, ammo bizga oflayn rejimda qo'llab-quvvatlaydigan xizmat ko'rsatuvchi xodim.

Cache API-dan foydalanib, Service Worker-dan foydalanib JavaScript-ni keshlash (biz buni JavaScript-ni ishga tushirishda ko'rib chiqamiz) V8-ning kod-keshiga Treebo-ni yoqish xususiyatiga ega, shuning uchun ular takroriy tashriflar paytida ishga tushirishga ozgina vaqt sarflashadi.

Keyinchalik, Treebo o'z sotuvchisi to'plam hajmini va JS ishlash vaqtini qisqartirishni xohladi, shuning uchun ular React-dan ishlab chiqarishda Preact-ga o'tdilar.

React-dan React-ga o'tish

Preact - xuddi shu ES2015 API bilan reaktsiyaga kirish uchun kichkina 3KB alternativa. Keyinchalik Redact kabi React ekotizimining qolgan qismida ishlaydigan ixtiyoriy muvofiqlik (preact-compat) bilan yuqori darajadagi ishlashni taklif qilishni maqsad qilgan.

Preact-ning kichik o'lchamlari Sintetik hodisalar va PropType tekshiruvlarini olib tashlash bilan bog'liq. Bundan tashqari:

  • Virtual DOMni DOM-ga qarshi ajratadi
  • Klass va boshqalar uchun rekvizitlarga ruxsat beradi
  • Ko'rsatish uchun o'tadi (rekvizitlar, holat)
  • Standart brauzer tadbirlaridan foydalanadi
  • To'liq asinks ko'rsatilishini qo'llab-quvvatlaydi
  • Odatiy bo'lib, quyi qism yaroqsiz

Bir qator PWA-larda Preact-ga o'tish JS-ning kichikroq hajmiga va dastur uchun boshlang'ich JavaScript-ni tushirish vaqtini kamaytirishga olib keldi. So'nggi PWA Lyft, Uber va Housing.com kabi ishlab chiqarishda Preact-dan foydalanadi.

Eslatma: React codebase bilan ishlash va Preact-dan foydalanmoqchimisiz? Ideal holda, siz dev, prod va sinov qurilishi uchun preact va preact-compat-dan foydalanishingiz kerak. Bu sizga har qanday interop-xatolarni erta aniqlashga imkon beradi. Agar siz ishlab chiqarish qurilishi uchun veb-to'plamda faqat taxallusni va kompakt-kompaktni afzal ko'rishni istasangiz (masalan, agar sizning fermentingiz Enzimdan foydalansa), serverlaringizga joylashtirishdan oldin hamma narsa kutilganidek sinchkovlik bilan tekshiring.

Treebo holatida ushbu o'chirish ularning sotuvchilari to'plamlarining o'lchamlarini 140kb dan 100kb gacha tushirishga ta'sir ko'rsatdi. Aytgancha, bularning hammasi gzched. U birinchi interfaol vaqtlarni 4.6s dan 3.9sgacha Treebo-ning maqsadli mobil qurilmalarida pasaytirdi, bu aniq yutuq edi.

Siz buni Webpack konfiguratsiyangizda kompakt-reaktsiyani ajratish va dom-inni ham kompakt-reaktsiyani ajratish orqali amalga oshirishingiz mumkin.

Ushbu yondoshuvning salbiy tomoni shundaki, ular React ekotizimining barcha foydalanadigan qismlari bilan aniq ishlashi uchun bir nechta echimlarni yig'ishga to'g'ri keldi.

React usulidan foydalanganingizda 95% hollarda Preact juda yaxshi tanlov bo'ladi; qolgan 5% uchun siz hali aniqlanmagan ishlarni ko'rib chiqish uchun xatolarni topshirishga to'g'ri keladi.

Izohlar: Hozirda WebPageTest haqiqiy Moto G4-larni Hindistondan to'g'ridan-to'g'ri sinab ko'rish usulini taklif qilmagani sababli, ishlash sinovlari "Mumbay - EC2 - Chrome - Emulyatsiya qilingan Motorola G (gen 4) - 3GSlow - Mobile" sozlamalari ostida o'tkazildi. Agar siz ushbu izlarni ko'rishni istasangiz, ularni bu erda topishingiz mumkin.

Skelet ekranlari

"Skeletning ekrani aslida ma'lumot asta-sekin yuklanadigan sahifaning bo'sh versiyasidir."
~ Luqo Vroblevski

Daraxt o'zlarining skeletlari topilgan ekranlarini oldindan ko'rishni yaxshilagan tarkibiy qismlaridan foydalanishni yoqtirishadi (har bir komponent uchun skelet ekranlariga o'xshash). Ushbu yondashuv, asosan, har qanday atom komponentini (Matn, Rasm va hk) oldindan ko'rish versiyasiga ega bo'lish uchun yaxshilaydi, chunki agar komponent uchun zarur bo'lgan dastlabki ma'lumotlar mavjud bo'lmasa, uning o'rniga komponentning oldindan ko'rish versiyasini namoyish etadi.

Masalan, yuqoridagi ro'yxatdagi mehmonxonalar nomi, shahar nomi, narxlari va boshqalarga qarasangiz, ular ikkita qo'shimcha rekvizitlarni, oldindan ko'rish va oldindan ko'rib chiqishlarni o'z ichiga olgan kabi Typografiya komponentlari yordamida amalga oshiriladi.

Asosan, agar hotel.name mavjud bo'lmasa, komponent orqa fonni kulrang rangga o'zgartiradi va oldindan ko'rib chiqish oynasiga muvofiq boshqa uslublar bilan o'zgartiriladi (agar oldindan ko'rib chiqish yo'q bo'lsa, kenglik asl qiymati 100% ga o'zgaradi).

Treebo ushbu yondashuvni yaxshi ko'radi, chunki oldindan ko'rish rejimiga o'tish mantig'i aslida ko'rsatilayotgan ma'lumotlarga bog'liq emas va bu uni moslashuvchan qiladi. Agar "Incl" ga qarasangiz. "barcha soliqlarning" qismi, bu shunchaki statik matn bo'lib, uni boshida ko'rish mumkin edi, ammo foydalanuvchi uchun juda chalkash tuyulishi mumkin edi, chunki api qo'ng'irog'i paytida narxlar hanuzgacha ko'tarilmoqda.

Shunday qilib, "Incl." "boshqa narxlar" ni ko'rib chiqish rejimiga o'tkazing, qolganlari ui bilan birga ular shunchaki oldindan ko'rish rejimining mantig'i sifatida narxdan foydalanadilar.

Shunday qilib, narxlar tushganda siz oldindan ko'rish interfeysiga ega bo'lasiz va api muvaffaqiyatli ishlayotgandan so'ng ma'lumotlarni butun shon-sharaf bilan ko'rishingiz mumkin.

Veb-paket-to'plam-analizator

Ushbu vaqtda, Treebo boshqa past osilgan mevalarni qanday optimallashtirishlari mumkinligini ko'rib chiqish uchun bir nechta to'plam tahlilini o'tkazishni xohladi.

Eslatma: Agar siz uyali aloqa operatori kabi kutubxonadan foydalansangiz, siz jalb qilayotgan boshqa sotuvchi kutubxonalar bilan sinchkovlik bilan munosabatda bo'lish muhimdir. Bunday qilmaslik ishlashga salbiy ta'sir ko'rsatishi mumkin. O'zingizning etkazib beruvchilaringizning kutubxonalarini qisqartirishni yaxshilab o'ylab ko'ring, shunda marshrutlar faqat kerak bo'lganlarni yuklaydi

"Treebo" to'plam o'lchamidagi o'zgarishlarni kuzatib borish va har bir marshrut tarmog'ida qanday modullar borligini kuzatish uchun veb-paket-bundle-analizatordan foydalangan. Bundan tashqari, ular bundan foydalanib, to'plam o'lchamlarini kamaytirish uchun optimallashtirish mumkin bo'lgan joylarni topish uchun foydalanadilar.

Veb-paket yordamida moment.js-ni optimallashtirish

Treebo sana manipulyatsiyalari uchun moment.jsga ko'proq ishonadi. Agar moment.js-ni import qilsangiz va uni Webpack-ga bog'lasangiz, sizning to'plamingizda moment.js-ning barcha to'plamlari bo'ladi va odatiy holatga ko'ra ~ 61.95kb tezlashtiriladi. Bu sizning so'nggi sotuvchingiz to'plamining hajmini jiddiy ravishda shishiradi.

Moment.js hajmini optimallashtirish uchun ikkita veb-plagin mavjud: IgnorePlugin, ContextReplacementPlugin.

Treebo IgnorePlugin yordamida barcha mahalliy fayllarni o'chirishni afzal ko'rdi, chunki ularga hech qanday ehtiyoj yo'q edi.

yangi veb-paket.IgnorePlugin (/^\.\/ $ $ /, moment $ /)

Mahalliy joylarni echib bo'lgach, to'plamning hajmi ~ 16,48 kbz ga tushdi.

Jadal joylarni ajratib olishning yon ta'siri sifatida eng katta yaxshilanish shundaki, sotuvchilar to'plamining hajmi ~ 179kb dan ~ 119kb gacha kamaygan. Bu birinchi yuklanishda xizmat qilish kerak bo'lgan tanqidiy to'plamdan 60kb katta tushish. Bularning barchasi birinchi o'zaro ta'sir vaqtlarining sezilarli darajada pasayishiga olib keladi. Moment.jsni optimallashtirish haqida ko'proq ma'lumotni bu erda o'qishingiz mumkin.

Mavjud chuqur qaramlikdan foydalanish

Treebo dastlab so'rovlar satrlarini ishlashini amalga oshirish uchun "qs" modulidan foydalangan. Webpack-bundle-analizatorning chiqishidan foydalanib, ular "reaksiya yo'riqnoma" "tarix" modulini o'z ichiga olganligini, o'z navbatida "so'rovlar satri" modulini o'z ichiga olganligini aniqladilar.

Ikkala modul bir xil operatsiyalarni bajarganligi sababli, "qs" ni "so'rov satri" ning ushbu versiyasiga (aniq o'rnatib), ularning boshlang'ich kodiga o'zgartirib, to'plam hajmini yanada 2.72 kb ga qisqartirgan ( "Qs" moduli).

Daraxtlar ochiq manbali fuqarolar edi. Ular juda ko'p ochiq manbali dasturlardan foydalanmoqdalar. Buning evaziga ular o'z veb-to'plamlari konfiguratsiyasining aksariyat manbalarini va ishlab chiqarishda ishlatiladigan ko'plab to'plamlarni o'z ichiga olgan qozonni ochdilar. Buni bu erda topishingiz mumkin: https://github.com/lakshyaranganath/pwa

Ular, shuningdek, ushbu yangilikni saqlashga harakat qilishdi. Ular rivojlanib borgan sari siz ulardan PWA-ning boshqa qo'llanmasi sifatida foydalanishingiz mumkin.

Xulosa va kelajak

Treebo hech qanday ilova mukammal emasligini biladi, ular o'z foydalanuvchilariga etkazadigan tajribalarini yaxshilash uchun ko'plab usullarni faol ravishda o'rganadilar. Ulardan ba'zilari:

Rasmlarni yolg'on yuklash
Ba'zilaringiz tarmoq sharsharasi grafiklaridan bilib olgan bo'lishingiz mumkin, bundan oldin veb-sayt rasmlarini yuklab olish JS-ning yuklab olish qobiliyati bilan raqobatlashmoqda.

Tasvirlarni yuklab olish brauzer img teglarini tahlil qilishi bilanoq ishga tushiriladi, ular JS-ni yuklab olish paytida o'tkazish qobiliyatini baham ko'radilar. Oddiy echim - bu rasmlarni foydalanuvchilarning ko'rish maydoniga kirganlarida yuklashda dangasa bo'lish, bu bizning vaqtimizda interfaollik uchun yaxshi yaxshilanish bo'ladi.

Lighthouse bu muammolarni ekrandagi tasvirlar auditida yaxshi ta'kidlaydi:

Ikki tomonlama import

Treebo shuningdek, ular CSS-ning qolgan qismlarini ilova uchun sinxron ravishda yuklayotganda (tanqidiy css-ni yozgandan keyin), bu yondashuv ularning dasturlari o'sib borishi bilan foydalanuvchilar uchun yaroqsiz ekanligini tushunadilar. Ko'proq xususiyatlar va marshrutlar ko'proq CSS-ni anglatadi va ularning barchasini yuklab olish tarmoqli kengligini hogging va isrof qilishga olib keladi.

LoadCSS va babel-plugin-double-import bilan birga kelgan yondashuvlarni birlashtirgan Treebo, CSS-ni yuklab olish uchun ('chunkpath') parallel ravishda CSS-ni yuklab olish uchun aniq amalga oshirilgan importCss ('chunkname') ga aniq chaqiruvni ishlatib, CSS-ni yuklash usulini o'zgartirdi. ) o'zlarining tegishli JS raqamini chaqiring.

Ushbu yangi yondashuv bilan marshrutni o'tish ikkita parallel asenkron so'rovlarga olib keladi, ulardan biri JS uchun, ikkinchisi CSS uchun DSSContentLoaded-da barcha CSS yuklab olingan oldingi usuldan farqli o'laroq. Bu maqsadga muvofiqdir, chunki foydalanuvchi ular tashrif buyurgan marshrutlar uchun faqat kerakli CSS-ni yuklaydi.

A / B sinov
Treebo hozirda serverni va mijozni ko'rsatish paytida foydalanuvchi zarur bo'lgan variantni pastga tushirish uchun serverni ko'rsatish va kodlarni ajratish bilan AB sinov usulini qo'llamoqda. (Treebo bu muammoni qanday hal qilganligi to'g'risida blogda e'lon qiladi).

Kuchli yuklanmoqda
Treebo ideal ravishda ilovaning barcha bo'linmalarini har doim boshlang'ich sahifaga yuklashni xohlamaydi, chunki ular muhim manbalarni yuklab olish uchun tarmoqli kengligini tortishmasliklarini xohlashadi - bu mobil foydalanuvchilar uchun qimmatli o'tkazish qobiliyatini yo'qotadi, ayniqsa, agar siz keshlamasangiz kelgusi tashriflari uchun xizmat ko'rsatuvchi xodim bilan. Agar biz Treebo-ning doimiy interaktiv kabi ko'rsatkichlarni qanchalik yaxshi bajarayotganiga nazar tashlasak, yaxshilanish uchun hali ko'p joy bor:

Bu ular yaxshilanishni sinab ko'rishgan sohadir. Bitta misol, tugmachaning to'lqinli animatsiyasi paytida keyingi marshrutning tugunini yuklash. onClick Treebo veb-paketga keyingi marshrutning kirishiga qo'ng'iroq qilib, setTimeout yordamida marshrutni kechiktirishni amalga oshiring. Ular, shuningdek, keyingi marshrutning magistral qismi asta-sekin 3g tarmog'ida 400 m tanaffusda yuklab olish uchun etarli emasligiga ishonch hosil qilishni xohlashadi.

Bu doka.

Ushbu yozuvda hamkorlik qilish juda qiziqarli bo'ldi. Ko'p ish kerak, lekin Treebo ijrosidagi sayohatni qiziqarli o'qidingiz, deb umid qilamiz :) Siz bizni twitter orqali @addyosmani va @__lakshya (ha, double alt xD) manzillarida topishingiz mumkin, biz sizning fikrlaringizni eshitishni yaxshi ko'ramiz.

Sharhlari va ma'lumotlari uchun @_zouhir, @_developit va @samcccone ga rahmat.

Agar siz reaktsiyaga yangi kelgan bo'lsangiz, Wes Bos tomonidan yangi boshlanuvchilar uchun reaktsiya - bu boshlash uchun keng qamrovli sharh.