1 of 69

Как делать быстро в

2019

2 of 69

Делать быстрые приложения непросто��

3 of 69

10.5%

25%

5%

16%

12%

20%

10%

13%

9%

4 of 69

10.5%

25%

5%

16%

12%

20%

10%

13%

9%

wpostats.com

pwastats.com

5 of 69

6 of 69

7 of 69

67%

населения мира�используют 2G или 3G

��— bit.ly/2g-stats

8 of 69

Делать быстрые приложения непросто��

9 of 69

Делать быстрые приложения непросто,�но в 2019 это проще, чем когда-либо

10 of 69

Как сделать быстрое приложение

01

11 of 69

�Time to first byte · Time to first paint · Time to last byte · Time to title · Time to interactive · Time to full load · Page size · Number of page assets · Number of third-party domains · Time to first meaningful paint · Server time�

12 of 69

�Time to first byte · Time to first paint · Time to last byte · Time to title · Time to interactive · Time to full load · Page size · Number of page assets · Number of third-party domains · Time to first meaningful paint · Server time�

13 of 69

Time to first meaningful paint

First meaningful paint

Interactive

14 of 69

Time to interactive

First paint

First meaningful paint

Interactive

15 of 69

50 КБ/с

Медленный 3G��

— Chrome DevTools network throttling

1 секунда

Как быстро пользователи становятся нетерпеливыми

— bit.ly/nngroup-10s

16 of 69

Time to first meaningful paint

1 секунда

≈ 40 КБ с медленным 3G

17 of 69

Time to interactive

5-15 секунд макс.

Пользователи теряют внимание после 10 секунд

— bit.ly/nngroup-10s

18 of 69

19 of 69

20 of 69

Time to first meaningful paint

02

21 of 69

31.6 KB

react +�react-dom

24 KB

lodash

64.2 KB

moment

— bundlephobia.com · минифицировано и gzip-овано

22 of 69

Time to first meaningful paint

Сервер-сайд-рендер

Предзагрузка

Critical CSS

Серверные оптимизации

23 of 69

<!doctype html>

<body>

<div id="#root"></div>

<script src="/static/fc4c2.js">

</script>

</body>

24 of 69

<!doctype html>

<body>

<div id="#root">

<header class="sc-r4g">

</div>

<script src="/static/fc4c2.js">

</script>

</body>

25 of 69

Next.jsдля React

Или Nuxt.js для Vue

26 of 69

Next.js

= create-react-app

+ сервер-сайд-рендеринг

+ код-сплиттинг

+ предзагрузка

27 of 69

Next.js

pages/index.jsx

pages/profile.jsx

pages/profile/settings.jsx

pages/about.jsx

28 of 69

Next.js

pages/index.jsx

pages/profile.jsx

pages/profile/settings.jsx

pages/about.jsx

29 of 69

index.html

style.css

bundle.js

30 of 69

31 of 69

32 of 69

Critical CSS

  • Разбиваете CSS на критический и некритический�critical.css + other.css
  • Инлайните критический CSS в HTML�<style>…</style>
  • Загружаете и применяете некритические стили асинхронно�<script>…</script>

33 of 69

critical�от Эдди Османи

index.html

Headless Chrome

critical-styles.css (or inlines)

34 of 69

CSS-in-JS�(напр., styled-components)

Страница рендерится на сервере

CSS-in-JS-библиотека собирает стили

'.sc-fg374xe{background:black;color:red}…'

35 of 69

CSS-in-JS�(напр., styled-components)

const sheet = new ServerStyleSheet()

const html = ReactDOM

.renderToString(sheet.collectStyles(<YourApp />))

sheet.getStyleTags() // → Critical CSS

36 of 69

Предзагрузка ресурсов

/static/chunk.fc426.js

/static/456fea45.png

Предзагрузка данных

/api/users/current

/api/articles/523

Предзагрузка

37 of 69

Предзагрузка данных

/api/users/current

/api/articles/523

Предзагрузка ресурсов

/static/chunk.fc426.js

/static/456fea45.png

Предзагрузка

38 of 69

<Link

href="/profile"

prefetch />

39 of 69

import(/* webpackPrefetch: true */

'./profile.js'

)

<link rel="prefetch"

href="chunk.fc4564ea378.js" />

40 of 69

preload-webpack-plugin

import('./profile.js')

<link rel="preload"

href="chunk.fc4564ea378.js" />

41 of 69

workbox-webpack-plugin

/static/bundle.fc3452e.js

/static/eb440ac.png

Сервис-воркер

42 of 69

Предзагрузка ресурсов

/static/chunk.fc426.js

/static/456fea45.png

Предзагрузка данных

/api/users/current

/api/articles/523

Предзагрузка

43 of 69

44 of 69

<Link

href="/profile"

prefetch

withData />

→ bit.ly/next-with-data-prefetch

45 of 69

Время ответа сервера

CDN

HTTP/2

Brotli

Заголовки для кеширования

46 of 69

47 of 69

Cloudflare

HTTP/2

Brotli

CDN

Быстрые ответы

Защита от DDoS

48 of 69

49 of 69

Time to first meaningful paint

Сервер-сайд-рендер

Предзагрузка

Critical CSS

Серверные оптимизации

50 of 69

Time to interactive

03

51 of 69

GIF: Addy Osmani/Kevin Schaaf

52 of 69

JS

53 of 69

54 of 69

55 of 69

56 of 69

Загружать меньше JS-а

Код-сплиттинг

Оптимизация зависимостей

57 of 69

bundle.js�↓

58 of 69

Как делать код-сплиттинг

1. Разбейте бандл на меньшие файлы

2. Загружайте только нужные файлы

3. Предзагружайте оставшиеся файлы в фоне

59 of 69

Next.js

<Link

href="/profile"

prefetch />

60 of 69

webpack

import(

/* webpackPrefetch: true */

'./rarely-used-modal.js'

).then(Modal => …)

61 of 69

webpack

workbox-webpack-plugin

Предзагружает файлы�сервис-воркером

62 of 69

Оптимизируйте зависимости

Moment.js

165 KB файлов локализации

React

propTypes в каждом компоненте

Lodash

Неиспользуемые методы в бандле

63 of 69

Оптимизируйте зависимости

bit.ly/webpack-libs-tips

64 of 69

Time to interactive

Код-сплиттинг

Оптимизация зависимостей

65 of 69

Иван Акулов

Фаундер в 3perf.com

Google · QM · е-коммерцы · etc

66 of 69

Идите и делайте быстро

3perf.com

Слайды: 3perf.com/talks/quick-apps

67 of 69

3perf.com

Слайды: 3perf.com/talks/quick-apps

Идите и делайте быстро

68 of 69

3perf.com

Слайды: 3perf.com/talks/quick-apps

Идите и делайте быстро

69 of 69

3perf.com

Слайды: 3perf.com/talks/quick-apps

Идите и делайте быстро