Чеклист по клиентской оптимизации / Николай Лавлинский (Метод Лаб)
•Als PPTX, PDF herunterladen•
0 gefällt mir•352 views
РИТ++ 2017, HighLoad Junior Зал Сингапур, 6 июня, 10:00 Тезисы: http://junior.highload.ru/2017/abstracts/2475.html Когда проект растёт, возникает множество проблем с масштабируемостью сервиса: БД, сервера приложений, хранилище. Однако, не менее важной становится клиентская часть веб-приложения. Во-первых, грамотная клиентская оптимизация позволяет повысить скорость работы сервиса для пользователей и, следовательно, увеличить их лояльность, которая конвертируется в деньги. ...
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Чеклист по клиентской оптимизации / Николай Лавлинский (Метод Лаб)
Ähnlich wie Чеклист по клиентской оптимизации / Николай Лавлинский (Метод Лаб) (20)
Mehr von Ontico
Mehr von Ontico (20)
Чеклист по клиентской оптимизации / Николай Лавлинский (Метод Лаб)
- 1. Чек-лист по клиентской оптимизации Лавлинский Николай, технический директор «Метод Лаб» 1
- 2. О себе • Клиентская и серверная оптимизация • Ускорение сайтов • Пропаганда скорости 2
- 3. HTTPArchive.org – средний размер страниц • Desktop: 2588 kb • Mobile: 2288 kb WTF? 3
- 4. Можно сделать лучше • Правила и методики известны • Инструменты есть • Нет политического решения и осведомлённости 4
- 5. О чём доклад • Анализ и оптимизация реального сайта по шагам • Настройки Nginx для статики • Оптимальный TLS • Немного о TCP/IP в Linux • CDN • Средства тестирования скорости 5
- 6. Поехали 6
- 7. Параметры тестирования 7 • WebPagetest PI • 3GFast (1,6 Mbit/s, 150 ms RTT) • Браузер: Chrome
- 8. 8
- 9. Начало • Start render: 5,4 c • Load: 9,5 c • Bytes In: 1,6 MB 9
- 10. 10
- 12. Выводы • Нужно сократить время до start render • Мобильная версия = desktop • Сайт не пригоден для мобильного интернета • Нужно сокращать объём трафика • Сократить количество блокирующих ресурсов • Наличие клиентской SPOF (Google Fonts) 12
- 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. Шаг 1. CSS оптимизация • Сжимаем brotli Style.css: 29.7 kb (-24%) • Выносим fonts.google в HTML из Import 14
- 16. 16
- 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. Шаг 2. JS Что делать с common.js? • Можно было переместить вниз, но CSS inside • Стили вниз нельзя – FOUC 18
- 19. Шаг 2. JS результаты Сжимаем brotli: • common.js: 110.7 kb (-31%) • index.js 62.5 kb (-32%) 19
- 20. Шаг 2. JS результаты 20
- 21. Шаг 3. Шрифты • Основные: fonts.googleapis.com, еще и локальные • Всего: 7 шт., 392 kb • Грузится отдельный CSS с внешнего хоста (TCP, DNS, TLS handshake) • Часть шрифтов из Google Fonts дублировано локальными • Локальные шрифты в TTF, отдаются без сжатия 21
- 22. Шаг 3. Шрифты результаты • Переносим все шрифты на сайт • Локальный CSS для шрифтов • Используем только WOFF2 • 392 kb -> 122 kb 22
- 23. Шаг 3. Шрифты результаты
- 24. 24
- 25. Шаг 4. Картинки • Всего: 53 шт., 666 kb. PNG, JPEG. • Использован sprite для иконок. • Кэширующие заголовки есть. • Размеры соответствуют. 25
- 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. Шаг 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. Шаг 4. Картинки SVG • SVGomg: https://jakearchibald.github.io/svgomg/ • SVGo • Zopfli, brotli сжатие 28
- 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. Шаг 4. Отдача WebP (location) add_header Vary $vary_header; add_header Cache-Control $cache_control; try_files $uri$webp_suffix $uri =404; 30
- 31. Шаг 4. Картинки результаты • Без WebP: 666 kb -> 410 kb • С WebP: 666 kb -> 348 kb 31
- 32. Шаг 4. Картинки результаты
- 33. 33
- 34. Шаг 5. HTTP/2 • Тонкая оптимизация • Большее удобство • Разные стратегии оптимизации • Основная фича: мультиплексирование запросов (одно соединение) 34
- 35. Шаг 5. HTTP/2 результаты • По многим метрикам – нет разницы • По некоторым – HTTP/2 хуже 35
- 36. 36
- 37. 37
- 38. Шаг 6. Preload шрифтов <link rel="preload" href="/fonts/1.woff2" as="font" type="font/woff2" crossorigin> 38
- 39. Шаг 6. Preload результаты • Почти не дал результатов • Причина: fonts.css (первый в очереди) 39
- 40. 40
- 41. Результат • Start render: 3.0 с (5,4) • Load: 6,2 с (9,5) • Bytes In: 814 КБ (1,6 МБ) 41
- 42. 42
- 43. Что можно сделать еще? • Разобрать JS- и CSS-код по исходникам, разбить по шаблонам • Вычистить неиспользуемый CSS-код • Вынести CSS из common.js и убрать весь JS-код вниз • Провести аудит используемых шрифтов • Разбить спрайт в PNG, перевести иконки в SVG • Добиться сокращение трафика для мобильных • Адаптивные картинки 43
- 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. Настройка 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. Настройка 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. Настройка Nginx статика • Keep-alive: keepalive_timeout 300; keepalive_requests 10000; • Кэширование: add_header Cache-Control "max-age=31536000, immutable"; 47
- 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. Настройка 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. 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. Немного о CDN • Задержки, каналы • Точки присутствия, связность • Политики, настройка • Уровень сложности • HTTP/2 51
- 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. Бонус Скидка 30% на услуги по ускорению сайтов от Метод Лаб в июне. Пароль: РИТ2017 www.methodlab.ru 53
- 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