Netflix veb-ishlashi bo'yicha ish

Ish stolidagi Netflix.com uchun vaqtni-interaktivligini yaxshilash

tl; dr: Internet ishlashi uchun kumush o'qlar yo'q. Oddiy statik sahifalar minimal JavaScript-da server bilan ishlashdan foyda ko'radi. Ehtiyotkorlik bilan foydalanilganda kutubxonalar murakkab sahifalar uchun katta qiymat berishi mumkin.

Netflix eng mashhur video oqim xizmatlaridan biridir. 2016 yilda global miqyosda ishga tushirilganidan beri kompaniya ko'plab yangi foydalanuvchilar nafaqat mobil qurilmalarda ro'yxatdan o'tmoqda, balki buni amalga oshirish uchun juda kam ulanishlardan ham foydalanmoqda.

Netflix.com-ning ro'yxatdan o'tish jarayoni uchun ishlatiladigan JavaScript-ni aniqlashtirish va oldindan yuklab olish texnikasidan foydalangan holda, ishlab chiquvchilar jamoasi mobil va ish stoli foydalanuvchilari uchun yanada yaxshi foydalanuvchi tajribasini taqdim etishdi va bir nechta yaxshilanishlarni taklif qilishdi.

  • Yuklash va vaqtni interaktiv qilish 50% ga kamaydi (ish stolining bosh sahifasi Netflix.com-da)
  • React va boshqa mijozlar kutubxonalaridan vanil JavaScript-ga o'tish orqali JavaScript to'plamining hajmi 200 kB ga kamaydi. Reaktsiya hali ham server tomonidan ishlatilgan.
  • HTML, CSS va JavaScript-ni oldindan yuklash (React) kelajak navigatsiyalari uchun Vaqtni-Interaktivligini 30% ga qisqartirdi

JavaScript-ni kamroq etkazib berish orqali interfaol vaqtni qisqartirish

Netflix ishlab chiqaruvchilari tomonidan ishlash uchun optimallashtirilgan maydon tizimga kirgan bosh sahifa bo'lib, unda foydalanuvchilar saytga kirish yoki kirish uchun tashrif buyurishadi.

Yangi va tizimdan chiqqan a'zolar uchun Netflix.com bosh sahifasi

Ushbu sahifada dastlab 300 kB JavaScript mavjud edi, ba'zilari reaktsiya va boshqa mijozlar kodi (masalan, Lodash kabi yordamchi kutubxonalar) va ba'zilari React holatini namlantirish uchun zarur bo'lgan kontekst ma'lumotlari edi.

Netflix-ning barcha veb-sahifalari React serveri tomonidan yaratilgan, yaratilgan HTML-ga xizmat qiladi va keyin mijoz-dasturga xizmat qiladi, shuning uchun yangi optimallashtirilgan bosh sahifaning tuzilishini doimiy ravishda ishlab chiquvchilar tajribasiga ega bo'lish uchun saqlab turish muhim edi.

Bosh sahifa ichki oynalar - bu React-dan foydalanib dastlab yozilgan komponentning namunasi

Tizimning 3G tarmog'iga yuklangan veb-sahifani simulyatsiya qilish uchun Chrome DevTools va Lighthouse-dan foydalanish shuni ko'rsatdiki, chiqib ketgan sahifani yuklash uchun 7 soniya vaqt kerak bo'lib, bu shunchaki oddiy kirish sahifasiga juda uzoq vaqt edi, shuning uchun yaxshilanish imkoniyatlari o'rganildi. Bir necha ishlash auditi natijasida Netflix ularning mijozlari tomonidan ishlab chiqarilgan JS yuqori narxga ega ekanligini aniqladi.

Chrome DevTools-da aniqlanmagan Netflix.com uchun tarmoqni jalb qilish

Brauzerda JavaScript-ni o'chirib, saytning qaysi elementlari hali ham ishlayotganligini kuzatib, ishlab chiquvchilar guruhi tizimga chiqqan veb-saytning ishlashi uchun React haqiqatan ham zarurligini aniqlashlari mumkin.

Sahifadagi elementlarning aksariyati asosiy HTML bo'lganligi sababli, JavaScript-ni bosish va sinfni qo'shish kabi qolgan elementlar oddiy JavaScript bilan almashtirilishi mumkin va dastlab React-dan foydalangan holda yaratilgan sahifa almashtiruvchisi 300-dan kam satrdan foydalangan holda vanil JavaScript-da qayta tiklandi. kodi.

Vanil JavaScript-ga ko'chirilgan tarkibiy qismlarning to'liq ro'yxati quyidagilar edi:

  • Asosiy shovqinlar (asosiy sahifaning pastki qismidagi yorliqlar)
  • Til almashtirgich
  • Cookie-banner (AQShdan bo'lmaganlar uchun)
  • Tahlil uchun mijoz tomonidan jurnal
  • Unumdorlikni o'lchash va hisobga olish
  • Reklama atributi pikselining yuklash kodi (ular iFrame uchun sinov muhitida joylashgan)
    xavfsizlik)

React-ning dastlabki izi atigi 45 kB bo'lsa-da, React-ni olib tashlagan holda, bir nechta kutubxonalar va mos keladigan dastur kodi JavaScript-ning umumiy hajmini 200 kB ga kamaytirdi va Netflix-ning interfaollik vaqtini 50% ga kamaytirdi. tizimdan chiqqan bosh sahifa.

React, Lodash va boshqa kutubxonalarni yo'q qilishdan oldin va keyin yuklarni taqqoslash.

Laboratoriya muhitida biz foydalanuvchilarni Lighthouse (iz) yordamida tezda Netflix-ning asosiy sahifasi bilan o'zaro aloqada bo'lishini tasdiqlashimiz mumkin. Ish stoli TTI <3.5s.

Vaqtni interaktiv optimallashtirish amalga oshirilgandan so'ng Lighthouse hisoboti

Maydon o'lchovlari haqida nima deyish mumkin? Chrome User Experience hisobotidan foydalanib, Birinchi kirish kechiktirilishini ko'rishimiz mumkin - foydalanuvchi birinchi marta saytingiz bilan o'zaro munosabat qilgan vaqtdan brauzer aslida ushbu ta'sirga javob bera oladigan vaqtgacha - ish stolidagi Netflix foydalanuvchilarining 97% uchun juda tez. Bu ajoyib.

Birinchi kiritish kechikishi (FID) foydalanuvchilar bilan sahifada ishlashda kechikish vaqtini o'lchaydi.

Keyingi sahifalar uchun oldindan belgilash reaktsiyasi

O'zlarining chiqish sahifalarida navigatsiya qilishda ishlashni yanada yaxshilash uchun Netflix foydalanuvchilarning kirish sahifasida sarflagan vaqtidan keyingi sahifadagi foydalanuvchilar uchun resurslarni oldindan olish uchun sarfladi.

Bunga ikkita usul yordamida erishildi - o'rnatilgan brauzer API va XHR oldindan yuklash.

O'rnatilgan brauzer API sahifaning bosh yorlig'idagi oddiy ulanish yorlig'idan iborat. Brauzerga manbani (masalan, HTML, JS, CSS, rasmlar) oldindan belgilash mumkinligi taklif qilinmoqda, lekin u brauzer aslida manbani oldindan olishiga kafolat bermaydi va boshqa brauzerlarda to'liq qo'llab-quvvatlanmaydi.

Oldindan yuklash texnikasini taqqoslash

Boshqa tomondan, XHR oldindan yuklash, ko'p yillar davomida brauzer standarti bo'lib kelgan va Netflix guruhi brauzerni resursni keshlashni talab qilganida, 95% muvaffaqiyat darajasi yuzaga kelgan. XHR oldindan yuklashni HTML-hujjatlarni oldindan yuklab olish uchun ishlatib bo'lmasada, Netflix tomonidan keyingi sahifalar uchun JavaScript va CSS to'plamlarini oldindan yuklashda foydalanilgan.

Eslatma: Netflix-ning HTTP javob sarlavhasi konfiguratsiyasi HTML-ni XHR-ni keshlashga to'sqinlik qilmoqda (ular ikkinchi sahifaning HTML-sida keshlamaydi). Link Prefetch kutilganidek ishlaydi, chunki u HTML-da ishlaydi, hatto biron-bir kesh bo'lmasa ham.

// yangi XHR so'rovini yarating
const xhrRequest = yangi XMLHttpRequest ();
// "oldindan yuklash" manbai uchun so'rovni oching
xhrRequest.open ('olish', '../bundle.js', haqiqiy);
// olov!
xhrRequest.send ();

HTML, CSS va JS-ni oldindan yuklash uchun o'rnatilgan brauzer API va XHR-dan foydalanib, Time-to-Interactive 30% ga qisqartirildi. Ushbu amalga oshirish, shuningdek, hech qanday JavaScript-ni qayta yozishni talab qilmaydi va tizimdan chiqqan bosh sahifaning ishiga salbiy ta'sir ko'rsatmaydi va shu sababli xavf darajasi past bo'lgan sahifalarni yaxshilash uchun qimmatli vositani taklif qiladi.

Oldindan yuklash amalga oshirilgandan so'ng, Netflix ishlab chiqaruvchilari sahifadagi Time-to Interactive metrikasining pasayishini tahlil qilish orqali, shuningdek, resurslarning kesh xitlarini to'g'ridan-to'g'ri o'lchash uchun Chrome-ning dasturiy vositalaridan foydalangan holda yaxshilanishlarni kuzatdilar.

Netflix tizimidan chiqqan bosh sahifa - optimallashtirish xulosasi

Netflix-ning ro'yxatdan o'tgan sahifasida manbalarni oldindan aniqlash va mijoz-kod kodini optimallashtirish orqali, ro'yxatdan o'tish paytida Netflix o'z vaqt-to-interaktiv ko'rsatkichlarini sezilarli darajada yaxshilagan. O'rnatilgan API va XHR oldindan yuklash yordamida kelajakdagi sahifalarni oldindan belgilash orqali Netflix Time-to Interactive-ni 30% ga kamaytirdi. Bu ikkinchi sahifani yuklash uchun mo'ljallangan bo'lib, unda bitta sahifali ilovalarni ro'yxatdan o'tkazish oqimi uchun yuklash kodi mavjud.

Netflix jamoasi tomonidan amalga oshirilgan kodni optimallashtirish shuni ko'rsatdiki, React foydali kutubxona bo'lsa-da, har qanday muammoga tegishli echimni bermasligi mumkin. Ro'yxatdan o'tish uchun birinchi ochilish sahifasida React-ni mijozlar kodidan olib tashlagan holda Time-to Interactive 50% ga yaxshilandi. Mijoz-da interfaol vaqtni qisqartirish, foydalanuvchilarni ro'yxatdan o'tish tugmachasini katta tezlikda bosishlariga olib keldi, bu esa kodni optimallashtirish umuman foydalanuvchilar tajribasiga olib kelishi mumkinligini ko'rsatmoqda.

Netflix uy sahifasi uchun React-dan foydalanmagan bo'lsa-da, ular uni keyingi sahifalar uchun oldindan belgilab qo'yishdi. Bu ularga bitta sahifada ro'yxatdan o'tish jarayoni davomida mijozlar reaktsiyasidan foydalanish imkonini berdi.

Ushbu optimallashtirish to'g'risida ko'proq ma'lumot olish uchun Tony Edvardsning A + nutqiga qarang:

Xulosa

Netflix JavaScript-ning narxini diqqat bilan kuzatib, o'z vaqtini-interaktivligini yaxshilash imkoniyatlarini kashf etdi. Saytingiz bu erda yaxshiroq ishlash imkoniyatiga ega yoki yo'qligini bilish uchun ishlash vositalariga murojaat qiling.

Savdo natijasi Netflix React-dan foydalanib saytga kirish sahifasini taqdim etish bilan bir qatorda React / kodni olishdan oldin qolgan. Bu birinchi yuklash samaradorligini optimallashtirish bilan birga, ro'yxatdan o'tish oqimining qolgan qismini yuklash uchun vaqtni ham optimallashtiradi, chunki u bitta sahifali ilova bo'lgani uchun yuklab olish uchun ancha katta JS to'plam hajmiga ega.

Vanil JavaScript-dan foydalanish sizning saytingizdagi oqimlar uchun imkoniyat bo'ladimi-yo'qligini o'ylab ko'ring. Agar siz kutubxonalardan mutlaqo foydalanishingiz kerak bo'lsa, faqatgina foydalanuvchilaringizga kerak bo'ladigan kodni pastga tushirishga harakat qiling. Oldindan yuklab olish kabi usullar kelajakda sahifalarni navigatsiya qilish uchun sahifani yuklash vaqtini yaxshilashga yordam beradi.

Qo'shimcha eslatmalar

  • Netflix Preact-dan foydalanishni ko'rib chiqdi, ammo past interaktivlik bilan oddiy sahifa oqimi uchun, vanil JavaScript-ni ishlatish ularning to'plami uchun oddiyroq tanlov edi.
  • Netflix Servis ishchilarida statik resurslarni keshlash uchun tajriba o'tkazdi. O'sha paytda Safari API-ni qo'llab-quvvatlamagan (hozir ham shunday), lekin ular endi ularni qayta kashf etishmoqda. Netflix-ga a'zo bo'lish oqimiga a'zo tajribasiga qaraganda ko'proq eski brauzer yordami kerak. Ko'pgina foydalanuvchilar eski brauzerda ro'yxatdan o'tishadi, ammo Netflix-ni o'zlarining mobil dasturlari yoki televizor qurilmalarida tomosha qilishadi.
  • Netflix-ning ochilish sahifasi juda dinamik. Bu yozuvlar oqimida eng A / B sinovdan o'tgan sahifadir, joylashuv, qurilma turiga va boshqa ko'plab omillarga qarab xabarlar va tasvirlarni sozlash uchun ishlatiladigan mashina o'rganish modellari. Deyarli 200 ta davlat tomonidan qo'llab-quvvatlanadigan har bir lotin uchun mahalliylashtirish, huquqiy va qiymati bo'yicha turli xil qiyinchiliklar mavjud. A / B testi haqida ko'proq ma'lumot olish uchun Rayan Burgess tomonidan yaxshiroq foydalanuvchi tajribasini sinab ko'rish-ga qarang.

Netflix UI muhandislari, Toni Edvards, Rayan Burgess, Brayan Xolt, Jem Yang, Kristofer Baxter (Google), Nikol Sallivan (Chrome) va Xoseeyn Djirdeh (Chrome) uchun sharh va qo'shgan hissalari uchun.