Практычнае даследаванне эфектыўнасці вэб-прыкладання Tinder

Нядаўна Tinder правёў прама ў Інтэрнэце. Іх новае спагаднае прагрэсіўнае вэб-прыкладанне - Tinder Online - даступна 100% карыстальнікаў настольных і мабільных тэлефонаў, выкарыстоўваючы метады аптымізацыі працы JavaScript, службовых работнікаў для сеткавай устойлівасці і Push Notifications для ўдзелу ў чаце. Сёння мы прагледзім некаторыя іх навучання ў Інтэрнэце.

Падарожжа ў прагрэсіўнае вэб-прыкладанне

Tinder Online пачаў працу з мэтай прыняцця на новыя рынкі, імкнучыся дасягнуць парытэту функцый з V1 вопыту Tinder на іншых платформах.

MVP для PWA спатрэбілася 3 месяцы, каб рэалізаваць выкарыстанне React у якасці бібліятэкі інтэрфейсу і Redux для кіравання дзяржавай. Вынікам іх намаганняў з'яўляецца PWA, які забяспечвае асноўны вопыт Tinder у 10% ад выдаткаў на інвестыцыі дадзеных для каго-небудзь на рынку, які патрабуе вялікіх дадзеных або недахоп дадзеных:

Параўнанне інвестыцый для дадзеных Tinder Online і родных прыкладанняў. Важна адзначыць, што гэта не параўнанне яблыкаў з яблыкамі. PWA загружае код для новых маршрутаў па патрабаванні, а кошт дадатковага кода амартызуецца на працягу ўсяго тэрміну прыкладанні. Наступныя навігацыі па-ранейшаму не каштуюць столькі дадзеных, колькі загрузка прыкладання.

Раннія знакі паказваюць добрае правядзенне, абмен паведамленнямі і працягласць сесіі ў параўнанні з родным дадаткам. З PWA:

  • Карыстальнікі перамяшчаюць больш па Інтэрнэту, чым па сваіх родных дадатках
  • Карыстальнікі паведамляюць больш у Інтэрнэце, чым у сваіх родных дадатках
  • Карыстальнікі набываюць нароўні з роднымі прыкладаннямі
  • Карыстальнікі рэдагуюць профілі больш у Інтэрнэце, чым у сваіх родных дадатках
  • Час сесій у Інтэрнэце даўжэйшы, чым у іх родных дадатках

Прадукцыйнасць

Карыстальнікі Tinder Online, якія найбольш часта карыстаюцца мабільнымі прыладамі, атрымліваюць доступ да іх:

  • Apple iPhone і iPad
  • Samsung Galaxy S8
  • Samsung Galaxy S7
  • Motorola Moto G4

З дапамогай справаздачы аб карыстацкім досведзе Chrome (CrUX) мы можам даведацца, што большасць карыстальнікаў, якія звяртаюцца да сайта, знаходзяцца на падключэнні 4G:

Заўвага: Rick Viscomi нядаўна асвятляў CrUX на PerfPlanet, а Inian Parameshwaran прыкрыў rUXt для лепшай візуалізацыі гэтых дадзеных для верхняй 1М сайтаў.

Выпрабаваўшы новы досвед працы з WebPageTest і Маяк (з дапамогай Galaxy S7 на 4G), мы можам убачыць, што яны могуць загружацца і атрымаць інтэрактыў на працягу 5 секунд:

Вядома, ёсць шмат магчымасцяў для далейшага паляпшэння гэтага сярэдняга абсталявання для мабільных прылад (напрыклад, Moto G4), які больш абмежаваным працэсарам:

Tinder ўпарта працуе над аптымізацыяй свайго вопыту, і мы з нецярпеннем чакаем магчымасці даведацца пра іх працу над прадукцыйнасцю ў Інтэрнэце ў бліжэйшы час.

Аптымізацыя прадукцыйнасці

Tinder змаглі палепшыць, наколькі хутка іх старонкі могуць загрузіцца і стаць інтэрактыўнымі пры дапамозе шэрагу метадаў. Яны рэалізавалі маршрутызацыю кода на аснове маршрутаў, увялі бюджэт на прадукцыйнасць і кэшаванне доўгатэрміновых актываў.

Раскол кода на ўзроўні маршруту

У Tinder першапачаткова былі вялікія маналітныя пакеты JavaScript, якія затрымлівалі, наколькі хутка іх вопыт мог бы стаць інтэрактыўным. Гэтыя пакеты ўтрымлівалі код, які неадкладна быў неабходны для загрузкі асноўнага карыстацкага досведу, таму яго можна было разабраць з дапамогай расшчаплення кода. Звычайна карысна толькі тым, каб карыстальнікам карабельнага кода трэба было загадзя, а астатнія па меры неабходнасці загрузіць астатнія.

Каб дасягнуць гэтага, Tinder выкарыстаў React Router і React Loadable. Паколькі іх прыкладанне цэнтралізавала ўвесь маршрут і перадаваў інфармацыю ў аснову канфігурацыі, яны палічылі, што імгненна ажыццявіць расшчапленне кода на вышэйшым узроўні.

Такім чынам:

React Loadable - гэта невялікая бібліятэка Джэймса Кайла, каб палегчыць расшчапленне кода па кампаненце ў React. Загружаемая - кампанент больш высокага парадку (функцыя, якая стварае кампанент), што дазваляе лёгка разбіваць пучкі на ўзроўні кампанента.

Дапусцім, у нас ёсць два кампаненты "A" і "B". Перад расшчапленнем кода Tinder статычна імпартаваў усё (A, B і г.д.) у свой асноўны камплект. Гэта было неэфектыўна, бо нам не трэба было і А, і адразу:

Пасля дадання кода, кампаненты A і B можна загрузіць па меры неабходнасці. Tinder зрабіў гэта, увёўшы ў свой JS сінтаксіс каментарыяў магічных каментарыяў (для названня дынамічных кавалкаў):

Для адключэння "пастаўшчыка" (бібліятэкі), Tinder выкарыстаў вэбпакет CommonsChunkPlugin для перамяшчэння часта выкарыстоўваюцца бібліятэк па маршрутах да аднаго файла пакета, які можа быць захаваны ў кэшы больш працяглы час:

Далей, Tinder выкарыстаў падтрымку папярэдняй загрузкі React Loadable для папярэдняй загрузкі патэнцыйных рэсурсаў для наступнай старонкі на элеменце кіравання:

Tinder таксама выкарыстоўваў службовых рабочых, каб зрабіць папярэдні кэш усіх пакетаў узроўняў маршрутаў і ўключыць маршруты, якія карыстальнікі, хутчэй за ўсё, наведваюць у асноўнай камплекцыі без падзелу кода. Яны, вядома, таксама выкарыстоўваюць звычайныя аптымізацыі, такія як змяненне JavaScript праз UglifyJS:

новы webpack.optimize.UglifyJsPlugin ({паралельны: праўдзівы, сціснуць: {папярэджання: ілжывы, вінт_ie8: true}, sourceMap: SHOULD_SOURCEMAP}),

Ўздзеянне

Пасля ўвядзення падзелу кода на аснове маршрутаў іх асноўныя памеры знізіліся з 166 КБ да 101 КБ, а DCL палепшылася з 5,46 да 4,69:

Доўгатэрміновае кэшаванне актываў

Забеспячэнне доўгатэрміновага кэшавання вываду статычных рэсурсаў праз webpack выгаду ад выкарыстання [chunkhash] для дадання кэш-бустэра да кожнага файла.

Tinder выкарыстоўваў шэраг бібліятэк з адкрытым зыходным кодам (пастаўшчыком) як частка дрэва залежнасці. Змены ў гэтых бібліятэках першапачаткова прымусяць [chunkhash] змяніцца і ануляваць іх кэш. Каб вырашыць гэта, Tinder пачаў вызначаць белы спіс знешніх залежнасцей і падзяляць маніфест сваёй вэб-пакета з асноўнага кавалка для паляпшэння кэшавання. Памер камплектацыі складае каля 160 Кб для абедзвюх частак.

Папярэдняя загрузка нязменна выяўленых рэсурсаў

У якасці ўдакладняльніка, - гэта дэкларатыўная інструкцыя браўзэру для загрузкі крытычных, нябожчыка выяўленых раней рэсурсаў. У прыкладаннях на адной старонцы гэтыя рэсурсы часам могуць быць пакетамі JavaScript.

Tinder рэалізаваў падтрымку для папярэдняй загрузкі сваіх крытычных пакетаў JavaScript / webpack, важных для асноўнага вопыту. Гэта скараціла час загрузкі на 1с і першая фарба з 1000мс да прыблізна 500мс.

Бюджэты выканання

Tinder прыняў бюджэтныя паказчыкі, якія дапамагаюць ім дасягнуць пастаўленых мэт на мабільным тэлефоне. Як адзначыў Алекс Расэл у артыкуле "Ці можаце вы сабе гэта дазволіць?: Рэальныя бюджеты на прадукцыйнасць", у вас ёсць абмежаваная колькасць месцаў для атрымання вопыту пры разглядзе павольных 3G-злучэнняў на сярэдняй мабільнай апаратуры.

Каб хутка застацца і заставацца інтэрактыўным, Tinder прымусіў бюджэт скласці ~ 155 Кб для асноўных кавалкаў і пастаўшчыкоў, асінхронныя (ляніва загружаныя) кавалкі складаюць ~ 55 КБ, а іншыя кавалкі - 35 Кб. CSS мае ліміт 20KB. Гэта мела важнае значэнне для таго, каб яны змаглі пазбегнуць рэгрэсу на прадукцыйнасці.

Аналіз пакета Webpack

Webpack Bundle Analyzer дазваляе даведацца, як выглядае графік залежнасці для вашых расслаенняў JavaScript, каб даведацца, ці ёсць аптымізацыя садавіны з нізкім узроўнем павелічэння.

Tinder выкарыстаў Webpack Bundle Analyzer, каб выявіць вобласці для паляпшэння:

  • Поліпаліты: Tinder арыентуецца на сучасныя браўзары са сваім досведам, але таксама падтрымліваюць IE11 і Android 4.4 і вышэй. Каб звесці поліфілінг і трансліраваны код да мінімуму, яны выкарыстоўваюць For polyfills, яны выкарыстоўваюць babel-preset-env і core-js.
  • Змяншэнне выкарыстання бібліятэк: Tinder замяніў localForage непасрэдным выкарыстаннем IndexedDB.
  • Лепшае расшчапленне: падзяліце кампаненты з асноўных пучкоў, якія не спатрэбіліся для першай фарбы / інтэрактывы
  • Паўторнае выкарыстанне кода: Створаны асінхронныя агульныя кавалкі да абстрактных кавалкаў, якія выкарыстоўваюцца больш за тры разы ад дзяцей.
  • CSS: Tinder таксама выдаліў крытычны CSS з асноўных расслаенняў (паколькі яны перайшлі на рэндэрынг на баку сервера і даставілі гэты CSS у любым выпадку)

Выкарыстанне аналізу камп'ютэраў прывяло таксама да таго, каб скарыстацца модулем замена модуля Lodash Webpack. Убудова стварае меншыя зборкі Lodash, замяняючы набор функцый модуляў з noop, ідэнтычнасцю або больш простымі альтэрнатывамі:

Webpack Bundle Analyzer можа быць інтэграваны ў ваш канфігурацыю Webpack. Налада Tinder для гэтага выглядае так:

убудовы: [новы BundleAnalyzerPlugin ({analyzerMode: 'сервер', analyzerPort: 8888, reportFilename: 'report.html', openAnalyzer: true, generatorStatsFile: false, statsFilename: 'stats.json', statsOptions: null})

Большасць злева ад JavaScript - гэта асноўны фрагмент, які складаней падзяляць без змен архітэктуры ў Redux Reducer і Saga Register.

Стратэгія CSS

Tinder выкарыстоўвае Atomic CSS для стварэння CSS-стыляў, якія могуць быць шматразовымі. Усе гэтыя атамныя стылі CSS выкладзены ў першапачатковую фарбу, а частка астатніх CSS загружаецца ў табліцу стыляў (уключаючы анімацыю, стылі базы / скіду). Крытычныя стылі маюць максімальны памер 20KB gzipped, прычым нядаўнія зборкі прыходзяць у меншым аб'ёме <11KB.

Tinder выкарыстае статыстыку CSS і Google Analytics для кожнага выпуску, каб адсочваць тое, што змянілася. Перад тым, як Atomic CSS выкарыстоўваўся, сярэдні час загрузкі старонкі складаў ~ 6,75. Пасля іх было ~ 5,75.

Tinder Online таксама выкарыстоўвае модуль PostCSS Autoprefixer для разбору CSS і дадання прэфіксаў пастаўшчыка, заснаванага на правілах Can I Use:

new webpack.LoaderOptionsPlugin ({параметры: {кантэкст: paths.basePath, вывад: {шлях: './'}, мінімізаваць: true, postcss: [autoprefixer ({браузеры: ['последние 2 версии', 'не т.е. <11 ',' Safari> = 8 ']})]}}),

Выкананне часу выканання

Адтэрміноўка некрытычнай працы з requestIdleCallback ()

Каб палепшыць прадукцыйнасць выканання, Tinder вырашыў выкарыстоўваць requestIdleCallback () для адкладу некрытычных дзеянняў у рэжым чакання.

requestIdleCallback (myNonEssentialWork);

Сюды ўваходзілі работы, падобныя на інструментальныя маякі. Яны таксама спрасцілі некаторыя кампазіцыйныя HTML-пласты, каб паменшыць колькасць фарбы падчас правядзення пальцаў.

Выкарыстанне requestIdleCallback () для сваіх прыбораў-маякоў пры правядзенні:

перад ..

і пасля ..

Абнаўленне залежнасці

Вэб-пакет 3 + Прылада ўздыму

У старых версіях вэб-пакета, калі камплектацыя кожнага модуля ў камплекце будзе абгорнута ў асобныя функцыі закрыцця. Гэтыя функцыі абгорткі павольней выконваюць JavaScript у браўзэры. Webpack 3 прадставіў "уздым вобласці" - магчымасць аб'яднаць аб'ём усіх вашых модуляў у адно закрыццё і дазволіць хуткаму выкананню вашага кода ў браўзэры. Гэта дазваляе зрабіць модуль злучэння модуляў:

новы webpack.optimize.ModuleConcatenationPlugin ()

Аб'ём Webpack 3 уздымае паляпшэнне першапачатковага часу разбору JavaScript Tinder на кавалак пастаўшчыка на 8%.

Рэагуйце 16

Рэакцыя 16 прадставіла паляпшэнні, якія паменшылі памер пакета React у параўнанні з папярэднімі версіямі. Збольшага гэта звязана з паляпшэннем упакоўкі (з выкарыстаннем збору), а таксама з выдаленнем нявыкарыстанага кода.

Абнавіўшы з React 15 да React 16, Tinder паменшыў агульны памер gunpped кавалка іх пастаўшчыка на ~ 7%.

Памер react + react-dom раней складаў ~ 50KB gzipped і цяпер складае ~ 35KB. Дзякуючы Дану Абрамаву, Дамініку Ганнуэй і Нейту Ханзакеру, якія адыгралі вялікую ролю пучка Рэакта 16.

Рабочая скрыня для ўстойлівасці сеткі і кэшавання актываў у аўтаномным рэжыме

Tinder таксама выкарыстоўвае убудова Workbox Webpack для кэшавання як сваёй абалонкі прыкладанняў, так і асноўных статычных актываў, такіх як іх асноўны, пастаўшчык, маніфестныя пакеты і CSS. Гэта дазваляе ўстойлівасці сеткі да паўторнага наведвання і гарантуе хутчэйшае запуск прыкладання, калі карыстальнік вяртаецца для наступных наведванняў.

Магчымасці

Выкопваючы пакеты Tinder пры дапамозе крыніц-даследчыка (яшчэ адзін інструмент аналізу пакетаў), ёсць дадатковыя магчымасці для памяншэння памеру карыснай нагрузкі. Перад уваходам у сістэму вылучаюцца кампаненты, такія як Facebook Photos, апавяшчэнні, абмен паведамленнямі і загадкі. Перамяшчэнне іх ад крытычнага шляху можа зэканоміць да 20% ад асноўнага пакета:

Іншая залежнасць у крытычным шляху - гэта 200KB сцэнар SDK Facebook. Адкідванне гэтага сцэнарыя (які пры неабходнасці можа быць ляніва загружаны) можа пацягнуць 1 секунду з пачатковага часу загрузкі.

Высновы

Tinder па-ранейшаму паўтарае свой прагрэсіўны вэб-дадатак, але ўжо пачаў бачыць станоўчыя вынікі ад плёну сваёй працы. Праверце Tinder.com і сачыце за далейшым прагрэсам у бліжэйшы час!

З падзякай і віншаваннямі Радэрыку Сяо, Іардану Банафшэху і Эрыку Геленбранду за выпуск Tinder Online і іх уклад у гэты артыкул. Дзякуй Чэні Цаю за водгук.

Звязанае чытанне:

  • Тэматычнае даследаванне эфектыўнасці Pinterest PWA
  • Тэматычны аналіз эфектыўнасці Treebo React & Preact
  • Twitter Lite і высокапрадукцыйныя PWA ў маштабе

Гэты артыкул была размешчана ў версіі Performance Planet. Калі вы не пачатковец у React, я знайшоў комплексную адпраўную кропку ў React for пачаткоўцаў.