Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Чек-лист по
клиентской
оптимизации
Лавлинский Николай,
технический директор «Метод Лаб»
1
О себе
• Клиентская и серверная оптимизация
• Ускорение сайтов
• Пропаганда скорости
2
HTTPArchive.org – средний размер страниц
• Desktop: 2588 kb
• Mobile: 2288 kb
WTF?
3
Можно сделать лучше
• Правила и методики известны
• Инструменты есть
• Нет политического решения и осведомлённости
4
О чём доклад
• Анализ и оптимизация реального сайта по шагам
• Настройки Nginx для статики
• Оптимальный TLS
• Немного о T...
Поехали
6
Параметры тестирования
7
• WebPagetest PI
• 3GFast (1,6 Mbit/s, 150 ms RTT)
• Браузер: Chrome
8
Начало
• Start render: 5,4 c
• Load: 9,5 c
• Bytes In: 1,6 MB
9
10
Критические ресурсы
Выводы
• Нужно сократить время до start render
• Мобильная версия = desktop
• Сайт не пригоден для мобильного интернета
• ...
Шаг 1. Смотрим CSS
1. Styles.css (38,9 kb)
2. Fonts.googleapis.com/…. (1,8 kb)
• Минификация есть
• Сжатие Gzip (но gzip -...
Шаг 1. CSS оптимизация
• Сжимаем brotli Style.css: 29.7 kb (-24%)
• Выносим fonts.google в HTML из Import
14
Шаг 1. Результаты
16
Шаг 2. JS
1. Common.js (161 kb) (в <head>, sync)
2. Index.js (92,7 kb) (перед </html>)
• Минификация есть
• Кеширование ес...
Шаг 2. JS
Что делать с common.js?
• Можно было переместить вниз, но CSS inside
• Стили вниз нельзя – FOUC
18
Шаг 2. JS результаты
Сжимаем brotli:
• common.js: 110.7 kb (-31%)
• index.js 62.5 kb (-32%)
19
Шаг 2. JS результаты
20
Шаг 3. Шрифты
• Основные: fonts.googleapis.com, еще и локальные
• Всего: 7 шт., 392 kb
• Грузится отдельный CSS с внешнего...
Шаг 3. Шрифты результаты
• Переносим все шрифты на сайт
• Локальный CSS для шрифтов
• Используем только WOFF2
• 392 kb -> ...
Шаг 3. Шрифты результаты
24
Шаг 4. Картинки
• Всего: 53 шт., 666 kb. PNG, JPEG.
• Использован sprite для иконок.
• Кэширующие заголовки есть.
• Размер...
Шаг 4. Картинки PNG
• Optipng: optipng -o7 1.png
• Zopflipng: zopflipng --iterations=10 –y 1.png
• Делаем WebP:
cwebp -qui...
Шаг 4. Картинки JPEG
• Пережимаем Mozilla JPEG:
cjpeg -optimize -progressive -quality 80 
-outfile 1opt.jpg 1.jpg
• Очищае...
Шаг 4. Картинки SVG
• SVGomg: https://jakearchibald.github.io/svgomg/
• SVGo
• Zopfli, brotli сжатие
28
Шаг 4. Отдача WebP (nginx.conf)
map $http_accept $webp_suffix {
"~*webp" ".webp";
}
map $msie $cache_control {
"1" "privat...
Шаг 4. Отдача WebP (location)
add_header Vary $vary_header;
add_header Cache-Control $cache_control;
try_files $uri$webp_s...
Шаг 4. Картинки результаты
• Без WebP: 666 kb -> 410 kb
• С WebP: 666 kb -> 348 kb
31
Шаг 4. Картинки результаты
33
Шаг 5. HTTP/2
• Тонкая оптимизация
• Большее удобство
• Разные стратегии оптимизации
• Основная фича: мультиплексирование ...
Шаг 5. HTTP/2 результаты
• По многим метрикам – нет разницы
• По некоторым – HTTP/2 хуже
35
36
37
Шаг 6. Preload шрифтов
<link rel="preload" href="/fonts/1.woff2"
as="font" type="font/woff2" crossorigin>
38
Шаг 6. Preload результаты
• Почти не дал результатов
• Причина: fonts.css (первый в очереди)
39
40
Результат
• Start render: 3.0 с (5,4)
• Load: 6,2 с (9,5)
• Bytes In: 814 КБ (1,6 МБ)
41
42
Что можно сделать еще?
• Разобрать JS- и CSS-код по исходникам, разбить по шаблонам
• Вычистить неиспользуемый CSS-код
• В...
Настройка Nginx TLS
ssl_prefer_server_ciphers on;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_session_cache shared:SSL:10m;
s...
Настройка Nginx TLS
ssl_ciphers ‘ECDHE-ECDSA-AES128-GCM-
SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-
AES256-GCM-SHA384...
Настройка Nginx TLS
• Используем кеширование сессий всех видов
• Безопасные версии прокотолов
• Быстрые стойкие шифры (AES...
Настройка Nginx статика
• Keep-alive:
keepalive_timeout 300;
keepalive_requests 10000;
• Кэширование:
add_header Cache-Con...
Настройка Nginx Gzip
gzip on;
gzip_static on;
gzip_types text/plain text/css text/xml
application/x-javascript image/x-ico...
Настройка Nginx Brotli
• Модуль: https://github.com/google/ngx_brotli
• Сборка: https://habrahabr.ru/post/310200/
• Сжатие...
TCP/IP стек
• Сохраняем TCP window после простоя:
net.ipv4.tcp_slow_start_after_idle = 0
• Включаем TCP FastOpen в обе сто...
Немного о CDN
• Задержки, каналы
• Точки присутствия, связность
• Политики, настройка
• Уровень сложности
• HTTP/2
51
Средства тестирования
• WebPagetest: https://www.webpagetest.org/
• WebPagetest Private Instance:
https://sites.google.com...
Бонус
Скидка 30% на услуги по ускорению сайтов от Метод Лаб в июне.
Пароль: РИТ2017
www.methodlab.ru
53
Спасибо! Приходите на митап!
Индия, L 1.3 – 11.00 – митап по клиентской оптимизации
Контакты: nick@methodlab.info
https://...
Upcoming SlideShare
Loading in …5
×

Чеклист по клиентской оптимизации / Николай Лавлинский (Метод Лаб)

134 views

Published on

РИТ++ 2017, HighLoad Junior
Зал Сингапур, 6 июня, 10:00

Тезисы:
http://junior.highload.ru/2017/abstracts/2475.html

Когда проект растёт, возникает множество проблем с масштабируемостью сервиса: БД, сервера приложений, хранилище. Однако, не менее важной становится клиентская часть веб-приложения.

Во-первых, грамотная клиентская оптимизация позволяет повысить скорость работы сервиса для пользователей и, следовательно, увеличить их лояльность, которая конвертируется в деньги.
...

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Чеклист по клиентской оптимизации / Николай Лавлинский (Метод Лаб)

  1. 1. Чек-лист по клиентской оптимизации Лавлинский Николай, технический директор «Метод Лаб» 1
  2. 2. О себе • Клиентская и серверная оптимизация • Ускорение сайтов • Пропаганда скорости 2
  3. 3. HTTPArchive.org – средний размер страниц • Desktop: 2588 kb • Mobile: 2288 kb WTF? 3
  4. 4. Можно сделать лучше • Правила и методики известны • Инструменты есть • Нет политического решения и осведомлённости 4
  5. 5. О чём доклад • Анализ и оптимизация реального сайта по шагам • Настройки Nginx для статики • Оптимальный TLS • Немного о TCP/IP в Linux • CDN • Средства тестирования скорости 5
  6. 6. Поехали 6
  7. 7. Параметры тестирования 7 • WebPagetest PI • 3GFast (1,6 Mbit/s, 150 ms RTT) • Браузер: Chrome
  8. 8. 8
  9. 9. Начало • Start render: 5,4 c • Load: 9,5 c • Bytes In: 1,6 MB 9
  10. 10. 10
  11. 11. Критические ресурсы
  12. 12. Выводы • Нужно сократить время до start render • Мобильная версия = desktop • Сайт не пригоден для мобильного интернета • Нужно сокращать объём трафика • Сократить количество блокирующих ресурсов • Наличие клиентской SPOF (Google Fonts) 12
  13. 13. Шаг 1. Смотрим CSS 1. Styles.css (38,9 kb) 2. Fonts.googleapis.com/…. (1,8 kb) • Минификация есть • Сжатие Gzip (но gzip -3) • Кеширование есть (Expires, Cache-control, Last-Modified) • Часть CSS получаем со стороннего хоста! • Шрифтовой CSS через Import • Inline font! 13
  14. 14. Шаг 1. CSS оптимизация • Сжимаем brotli Style.css: 29.7 kb (-24%) • Выносим fonts.google в HTML из Import 14
  15. 15. Шаг 1. Результаты
  16. 16. 16
  17. 17. Шаг 2. JS 1. Common.js (161 kb) (в <head>, sync) 2. Index.js (92,7 kb) (перед </html>) • Минификация есть • Кеширование есть • Сжатие gzip • Два синхронных JS • Common.js (161 kb) расположен в заголовке страницы! • Внутри common.js куча CSS кода! 17
  18. 18. Шаг 2. JS Что делать с common.js? • Можно было переместить вниз, но CSS inside • Стили вниз нельзя – FOUC 18
  19. 19. Шаг 2. JS результаты Сжимаем brotli: • common.js: 110.7 kb (-31%) • index.js 62.5 kb (-32%) 19
  20. 20. Шаг 2. JS результаты 20
  21. 21. Шаг 3. Шрифты • Основные: fonts.googleapis.com, еще и локальные • Всего: 7 шт., 392 kb • Грузится отдельный CSS с внешнего хоста (TCP, DNS, TLS handshake) • Часть шрифтов из Google Fonts дублировано локальными • Локальные шрифты в TTF, отдаются без сжатия 21
  22. 22. Шаг 3. Шрифты результаты • Переносим все шрифты на сайт • Локальный CSS для шрифтов • Используем только WOFF2 • 392 kb -> 122 kb 22
  23. 23. Шаг 3. Шрифты результаты
  24. 24. 24
  25. 25. Шаг 4. Картинки • Всего: 53 шт., 666 kb. PNG, JPEG. • Использован sprite для иконок. • Кэширующие заголовки есть. • Размеры соответствуют. 25
  26. 26. Шаг 4. Картинки PNG • Optipng: optipng -o7 1.png • Zopflipng: zopflipng --iterations=10 –y 1.png • Делаем WebP: cwebp -quiet -pass 10 -alpha_method 1 -alpha_filter best -m 6 -mt –lossless 1.png -o 1.png.webp 26
  27. 27. Шаг 4. Картинки JPEG • Пережимаем Mozilla JPEG: cjpeg -optimize -progressive -quality 80 -outfile 1opt.jpg 1.jpg • Очищаем jpegoptim: jpegoptim --strip-all 1.jpg • Делаем WebP: cwebp -quiet -pass 10 -alpha_method 1 -alpha_filter best -m 6 -mt -q 80 1.jpg -o 1.jpg.webp 27
  28. 28. Шаг 4. Картинки SVG • SVGomg: https://jakearchibald.github.io/svgomg/ • SVGo • Zopfli, brotli сжатие 28
  29. 29. Шаг 4. Отдача WebP (nginx.conf) map $http_accept $webp_suffix { "~*webp" ".webp"; } map $msie $cache_control { "1" "private"; } map $msie $vary_header { default "Accept"; "1" ""; } 29
  30. 30. Шаг 4. Отдача WebP (location) add_header Vary $vary_header; add_header Cache-Control $cache_control; try_files $uri$webp_suffix $uri =404; 30
  31. 31. Шаг 4. Картинки результаты • Без WebP: 666 kb -> 410 kb • С WebP: 666 kb -> 348 kb 31
  32. 32. Шаг 4. Картинки результаты
  33. 33. 33
  34. 34. Шаг 5. HTTP/2 • Тонкая оптимизация • Большее удобство • Разные стратегии оптимизации • Основная фича: мультиплексирование запросов (одно соединение) 34
  35. 35. Шаг 5. HTTP/2 результаты • По многим метрикам – нет разницы • По некоторым – HTTP/2 хуже 35
  36. 36. 36
  37. 37. 37
  38. 38. Шаг 6. Preload шрифтов <link rel="preload" href="/fonts/1.woff2" as="font" type="font/woff2" crossorigin> 38
  39. 39. Шаг 6. Preload результаты • Почти не дал результатов • Причина: fonts.css (первый в очереди) 39
  40. 40. 40
  41. 41. Результат • Start render: 3.0 с (5,4) • Load: 6,2 с (9,5) • Bytes In: 814 КБ (1,6 МБ) 41
  42. 42. 42
  43. 43. Что можно сделать еще? • Разобрать JS- и CSS-код по исходникам, разбить по шаблонам • Вычистить неиспользуемый CSS-код • Вынести CSS из common.js и убрать весь JS-код вниз • Провести аудит используемых шрифтов • Разбить спрайт в PNG, перевести иконки в SVG • Добиться сокращение трафика для мобильных • Адаптивные картинки 43
  44. 44. Настройка Nginx TLS ssl_prefer_server_ciphers on; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_session_cache shared:SSL:10m; ssl_session_tickets on; ssl_session_timeout 28h; ssl_dhparam /etc/nginx/dhparams.pem; ssl_stapling on; ssl_stapling_verify on; 44
  45. 45. Настройка Nginx TLS ssl_ciphers ‘ECDHE-ECDSA-AES128-GCM- SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA- AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM- SHA384:DHE-RSA-AES128-GCM-SHA256:…'; 45
  46. 46. Настройка Nginx TLS • Используем кеширование сессий всех видов • Безопасные версии прокотолов • Быстрые стойкие шифры (AES-128-GCM) • Не забываем включить AES-NI в BIOS • Генератор конфигураций от Mozilla: https://mozilla.github.io/server-side-tls/ssl-config-generator/ • Тестирование настройки: https://www.ssllabs.com/ssltest/analyze.html • Следите за обновлениями: TLS 1.3, ECDSA 46
  47. 47. Настройка Nginx статика • Keep-alive: keepalive_timeout 300; keepalive_requests 10000; • Кэширование: add_header Cache-Control "max-age=31536000, immutable"; 47
  48. 48. Настройка Nginx Gzip gzip on; gzip_static on; gzip_types text/plain text/css text/xml application/x-javascript image/x-icon image/svg+xml application/x-font-ttf; gzip_comp_level 7; gzip_proxied any; gzip_min_length 1000; gzip_disable "msie6"; gzip_vary on; 48
  49. 49. Настройка Nginx Brotli • Модуль: https://github.com/google/ngx_brotli • Сборка: https://habrahabr.ru/post/310200/ • Сжатие Brotli: brotli_static on; brotli on; brotli_comp_level 6; brotli_types text/plain text/css text/xml application/x-javascript image/x-icon image/svg+xml; 49
  50. 50. TCP/IP стек • Сохраняем TCP window после простоя: net.ipv4.tcp_slow_start_after_idle = 0 • Включаем TCP FastOpen в обе стороны: net.ipv4.tcp_fastopen = 3 В Nginx: Listen 80 default_server fastopen=256; 50
  51. 51. Немного о CDN • Задержки, каналы • Точки присутствия, связность • Политики, настройка • Уровень сложности • HTTP/2 51
  52. 52. Средства тестирования • WebPagetest: https://www.webpagetest.org/ • WebPagetest Private Instance: https://sites.google.com/a/webpagetest.org/docs/private-instances • Lighthouse (Chrome): https://developers.google.com/web/tools/lighthouse/ 52
  53. 53. Бонус Скидка 30% на услуги по ускорению сайтов от Метод Лаб в июне. Пароль: РИТ2017 www.methodlab.ru 53
  54. 54. Спасибо! Приходите на митап! Индия, L 1.3 – 11.00 – митап по клиентской оптимизации Контакты: nick@methodlab.info https://www.facebook.com/nick.lavlinsky https://www.methodlab.ru/ https://www.youtube.com/channel/UCH_PvxSiuETI_ecbeAmb7_w/ (Канал «Ускорение сайтов») Лавлинский Николай, технический директор «Метод Лаб» 54

×