Как делать быстро в
2019
Делать быстрые приложения непросто��
10.5%
25%
5%
16%
12%
20%
10%
13%
9%
10.5%
25%
5%
16%
12%
20%
10%
13%
9%
wpostats.com
pwastats.com
67%
населения мира�используют 2G или 3G
��— bit.ly/2g-stats
Делать быстрые приложения непросто��
Делать быстрые приложения непросто,�но в 2019 это проще, чем когда-либо
Как сделать быстрое приложение
01
�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�
�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�
Time to first meaningful paint
First meaningful paint
Interactive
Time to interactive
First paint
First meaningful paint
Interactive
50 КБ/с
Медленный 3G��
— Chrome DevTools network throttling
1 секунда
Как быстро пользователи становятся нетерпеливыми
— bit.ly/nngroup-10s
Time to first meaningful paint
1 секунда
≈ 40 КБ с медленным 3G
Time to interactive
5-15 секунд макс.
Пользователи теряют внимание после 10 секунд
— bit.ly/nngroup-10s
Time to first meaningful paint
02
31.6 KB
react +�react-dom
24 KB
lodash
64.2 KB
moment
— bundlephobia.com · минифицировано и gzip-овано
Time to first meaningful paint
Сервер-сайд-рендер
Предзагрузка
Critical CSS
Серверные оптимизации
<!doctype html>
<body>
<div id="#root"></div>
<script src="/static/fc4c2.js">
</script>
</body>
<!doctype html>
<body>
<div id="#root">
<header class="sc-r4g">
…
</div>
<script src="/static/fc4c2.js">
</script>
</body>
Next.js�для React
Или Nuxt.js для Vue
Next.js�
= create-react-app
+ сервер-сайд-рендеринг
+ код-сплиттинг
+ предзагрузка
Next.js
pages/index.jsx
pages/profile.jsx
pages/profile/settings.jsx
pages/about.jsx
Next.js
pages/index.jsx
pages/profile.jsx
pages/profile/settings.jsx
pages/about.jsx
index.html
style.css
bundle.js
Critical CSS
critical�от Эдди Османи
index.html
↓
Headless Chrome
↓
critical-styles.css (or inlines)
CSS-in-JS�(напр., styled-components)
Страница рендерится на сервере
↓
CSS-in-JS-библиотека собирает стили
↓
'.sc-fg374xe{background:black;color:red}…'
CSS-in-JS�(напр., styled-components)
const sheet = new ServerStyleSheet()
const html = ReactDOM
.renderToString(sheet.collectStyles(<YourApp />))
sheet.getStyleTags() // → Critical CSS
Предзагрузка ресурсов
/static/chunk.fc426.js
/static/456fea45.png
Предзагрузка данных
/api/users/current
/api/articles/523
Предзагрузка
Предзагрузка данных
/api/users/current
/api/articles/523
Предзагрузка ресурсов
/static/chunk.fc426.js
/static/456fea45.png
Предзагрузка
<Link
href="/profile"
prefetch />
import(/* webpackPrefetch: true */
'./profile.js'
)
↓
<link rel="prefetch"
href="chunk.fc4564ea378.js" />
preload-webpack-plugin
import('./profile.js')
↓
<link rel="preload"
href="chunk.fc4564ea378.js" />
workbox-webpack-plugin
/static/bundle.fc3452e.js
/static/eb440ac.png
↓
Сервис-воркер
Предзагрузка ресурсов
/static/chunk.fc426.js
/static/456fea45.png
Предзагрузка данных
/api/users/current
/api/articles/523
Предзагрузка
<Link
href="/profile"
prefetch
withData />
→ bit.ly/next-with-data-prefetch
Время ответа сервера
CDN
HTTP/2
Brotli
Заголовки для кеширования
Cloudflare
HTTP/2
Brotli
CDN
Быстрые ответы
Защита от DDoS
Time to first meaningful paint
Сервер-сайд-рендер
Предзагрузка
Critical CSS
Серверные оптимизации
Time to interactive
03
GIF: Addy Osmani/Kevin Schaaf
JS
Загружать меньше JS-а
Код-сплиттинг
Оптимизация зависимостей
bundle.js�↓
Как делать код-сплиттинг
1. Разбейте бандл на меньшие файлы
2. Загружайте только нужные файлы
3. Предзагружайте оставшиеся файлы в фоне
Next.js
<Link
href="/profile"
prefetch />
webpack
import(
/* webpackPrefetch: true */
'./rarely-used-modal.js'
).then(Modal => …)
webpack
workbox-webpack-plugin
Предзагружает файлы�сервис-воркером
Оптимизируйте зависимости
Moment.js
165 KB файлов локализации
React
propTypes в каждом компоненте
Lodash
Неиспользуемые методы в бандле
Оптимизируйте зависимости
bit.ly/webpack-libs-tips
Time to interactive
Код-сплиттинг
Оптимизация зависимостей
Иван Акулов
Фаундер в 3perf.com
Google · QM · е-коммерцы · etc
Идите и делайте быстро
3perf.com
Слайды: 3perf.com/talks/quick-apps
3perf.com
Слайды: 3perf.com/talks/quick-apps
Идите и делайте быстро
3perf.com
Слайды: 3perf.com/talks/quick-apps
Идите и делайте быстро
3perf.com
Слайды: 3perf.com/talks/quick-apps
Идите и делайте быстро