Shower Presentation Engine

Привет, WSD!

chernivtsi.js.org

Оптимизируй это

Первый звоночек

Первый звоночек

18 CSS-файлов
23 файла JS-библиотек
12 js файлов
>200 фото товаров на странице

Что не так?

много одновременно загружаемых ресурсов
ресурсы загружаются с высоким приоритетом
ресурсы загружаются с одного домена
блокирующая загрузка
DOMContentLoaded 6 секунд
неконтролируемая загрузка фото товаров

Пользователь начнет взаимодействовать с сайтом минимум через 6 секунд

Да ладно

leBoutique

otto.ua

В сравнении

	Сайт друга	leBoutique	otto.ua	modnakasta.ua
Transferred, Mb	5,7	4,9	1,6	4,0
TTFB, ms	>2000	62	1020	115
DOMContentLoaded, sec (DCL)	6,34	3,72	3,92	0,8
High priority request	19+	6	12	1

DCL vs TTFI

+ 1 сек = – 7% конверсии, по версии Айри.рф

100 мс задержки приводят к снижению продаж на 1%, по версии Amazon

Подходы к оптимизации

оптимизация скорости сайта при первой загрузке
оптимизация скорости сайта при повторной загрузке

Оптимизация для первой загрузки

1. Доставка

На скорость доставки контента влияет

вес контента
канал пользователя
возможности сервера
ограничение браузера

Мы начали с ограничений

DOMContentLoaded

Как было

			<head>
			    <link rel="stylesheet" href="main.css">
			    <script src="small.js"></script>
			    <script src="main.js"></script>
			    <script src="second-1.js"></script>
			    <script src="second-2.js"></script>
			    <script src="second-7.js"></script>
			</head>

Добавляем асинхронности

			<head>
			    <link rel="stylesheet" href="main.css">
			    <script src="small.js"></script>
			    <script src="main.js"></script>
			</head>
			    <script src="second-1.js" defer></script>
			    <script src="second-2.js" defer></script>
			    <script src="second-7.js" defer></script>
			</body>

Нужно больше асинхронности

			<head>
			    <link rel="stylesheet" href="main.css">
			    <script src="small.js"></script>
			    <script src="main.js"></script>
			</head>
			    <script src="second-1.js" async></script>
			    <script src="second-2.js" async></script>
			    <script src="second-7.js" async></script>
			</body>

Что мы сделали

уменьшили число блокирующих скриптов, оставили только ядро
основной пакет JS загружаем с async
оставили один файл CSS в HEAD
все счетчики, метрики и сторонние скрипты грузим отложенно на JS

25 кадр

2. Приоритет загрузки

Приоритеты загрузки

Наивысший (документ, CSS, шрифты)
Высокий (JS, XHR)
Средний (JS после изоборажений, изображения)
Низкий (JS async, defer, изображения, JS-модули)
Очень низкий (navigator.sendBeacon, изображения, prefetch)

Помогаем браузеру

			<link rel="prefetch" href="/source/">
			<link rel="dns-prefetch" href="https://youdomain.com">
			<link rel="prerender" href="/next-page/">
			 
			<link rel="preload" href="some.js" as="script">
			<link rel="preload" href="some.css" as="style">
			<link rel="preload" href="picture.jpg" as="image">
			<link rel="preload" href="some.woff" as="font">
			...

Как посмотреть?

chrome://net-internals/#prerender

opera://net-internals/#prerender

prefetch	vs	preload
Очень низкий приоритет		приоритет по `"as"`
`dns-prefetch`, `prerender`, `prefetch`, `preconnect`		любой ресурс
can i use		can i use
отображается в браузере		отображается в браузере

Что мы сделали

вынесли всю статику на отдельные домены CDN
dns-prefetch для всех доменов CDN
prerender для каталога с главной страницы

3. Ленивая загрузка

Ленивая загрузка изображений

			<img src="blank.gif" data-src="cool.jpg">
			/* или */ 
			<img src="cool-patch.svg" data-src="cool.jpg">

			...

Ленивая загрузка изображений

С 2015 года в обсуждении
6 октября появился Intent to Implement: image async attribute

<image src="photo.jpg" async=on>

велосипедим
используем готовые JS-библиотеки

4. Critical CSS

Critical CSS

Addy Osmani

собираем css для видимой части страницы
инйлайним полученный css
остальной css подключаем ниже с понижением приоритета

Critical CSS

отлично подходит для верстки одной страницы
в реальности нужно делать отдельно для каждой типовой страницы
1. главная
2. каталог
3. товар
4. корзина
5. ...

Critical CSS

сложно поддерживать
некоторые блоки мелькают
пока отказались

5. Оптимизация графики

Работаем с форматами

JPEG, PNG, GIF
WebP
JPEG-XR
JPEG-2000

WebP

JPEG

WebP

открытый формат
экономия до 10 раз
без заметной потери качества
относительно хорошая поддержка
41% посетителей проекта

Отдавайте графику под клиент

			<picture>
			    <source srcset="photo.jxr" type="image/vnd.ms-photo">
			    <source srcset="photo.jp2" type="image/jp2">
			    <source srcset="photo.webp" type="image/webp">
			    <img src="default.jpg" alt="image description">
			</picture>

Отдавайте графику под клиент

			<picture>
			    <source srcset="photo.webp, photo-2x.webp 2x" type="image/webp">
			    <source srcset="photo-2x.jpg 2x" type="image/jpeg">
			    <img src="default.jpg" alt="image description">
			</picture>

Инструментарий

графические редакторы
онлайн-сервисы
командная строка (пакетная обработка)
обработка в процессе выполнения

Инструментарий

~~графические редакторы~~
~~онлайн-сервисы~~
командная строка (пакетная обработка)
обработка в процессе выполнения

Командная строка, runtime

libGD (Node.js, PHP и т.д.)
ImageMagick (командная строка, Node.js, PHP и т.д.)
Gulp, Grunt плагины в сборках

Что выбрать?

Что выбрать?

конвертировать во время загрузки страницы – дорого
конвертировать пакетно в фоне – долго
...

NGINX + PageSpeed, с ноября 2010

сжатие и обработка CSS
сжатие и обработка JS
спрайты
оптимизация изображений
ресайз изображений
конвертация в WebP
инлайновый Base64

Что мы сделали

RewriteLevel OptimizeForBandwidth
1. rewrite_css
2. rewrite_javascript
3. отпимизация изображения
4. конвертация в WebP
EnableFilters extend_cache

Не думайте о том, что умеет клиент

			<picture>
			    <source srcset="photo.webp" type="image/webp">
			    <img src="photo.jpg" alt="image description">
			</picture>

Accept: image/webp

Важно

rewrite_css, rewrite_javascript

потенциально опасные
нужно иметь валидный CSS и JS
использовать линтеры кода

Оптимизация для повторной загрузки

Кэширование

статические / динамические ресурсы на клиенте
статические / динамические ресурсы на сервере
результаты SSL Handshake
...

Ты можешь быть бесконечно прав,
но какой в этом толк,
если у тебя Cache-Control: max-age=0

HTTP 1.1

Cache-Control

max-age=ХХ (время в сек)

ETag

ETag: "59a49fa0-b9ac"
требуется запрос на сервер
более тонкая работа с кэшем

HTTP 1.0

Expires

Expires: Wed, 16 Nov 2017 07:28:00 GMT
устаревший аналог max-age

Кэширование

использовали возможности браузера
закешировали статику на пол года
для ревалидации кеша – версионность файлов по дате модификации
main.css?149744812618322
max-age вместо ETag

Где смотреть метрики

Google PageSpeed Insights
Pingdom
Chrome DevTools
Chrome Lighthouse

Результат

	Было	Стало
Transferred, Mb	5,7	3,2
TTFB, ms	>2000	442
DOMContentLoaded, sec	6,34	2,09
High priority request	19+	1

Вжух
и у нас быстрый сайт

Спасибо!

Denis Zavgorodny
web technologist, founder of @ChernivtsiJS,
co-founder @NodeSchool Chernivtsi

@DenisZavgorodny

denis.zavgorodny@gmail.com

Привет, WSD!

Оптимизируй это

Первый звоночек

Первый звоночек

Что не так?

Пользователь начнет взаимодействовать с сайтом минимум через 6 секунд

Да ладно

leBoutique

otto.ua

В сравнении

DCL vs TTFI

Подходы к оптимизации

Оптимизация для первой загрузки

1. Доставка

На скорость доставки контента влияет

Мы начали с ограничений

DOMContentLoaded

Как было

Популярный совет

Добавляем асинхронности

Нужно больше асинхронности

Что мы сделали

25 кадр

2. Приоритет загрузки

Приоритеты загрузки

Помогаем браузеру

Как посмотреть?

prefetch

preload

Что мы сделали

3. Ленивая загрузка

Ленивая загрузка изображений

Ленивая загрузка изображений

4. Critical CSS

Critical CSS

Addy Osmani

Critical CSS

Critical CSS

5. Оптимизация графики

Работаем с форматами

WebP

JPEG

JPEG

WebP

Отдавайте графику под клиент

Отдавайте графику под клиент

Инструментарий

Инструментарий

Инструментарий

Командная строка, runtime

Что выбрать?

Что выбрать?

NGINX + PageSpeed, с ноября 2010

Что мы сделали

Не думайте о том, что умеет клиент

Важно

Оптимизация для повторной загрузки

Кэширование

Кэширование

Ты можешь быть бесконечно прав, но какой в этом толк, если у тебя Cache-Control: max-age=0

HTTP 1.1

Cache-Control

ETag

HTTP 1.0

Expires

Кэширование

Где смотреть метрики

Результат

Спасибо!

Ты можешь быть бесконечно прав,
но какой в этом толк,
если у тебя Cache-Control: max-age=0