Download to read offline
Uploaded byНиколай Лавлинский
Чеклист по клиентской оптимизации - Лавлинский Николай, РИТ++ 2017
Документ представляет собой чек-лист по клиентской оптимизации веб-сайтов, подготовленный Николаем Лавлинским, техническим директором 'Метод Лаб'. Он включает анализ реального сайта, рекомендации по настройке серверов, оптимизации CSS, JS, шрифтов и изображений, а также использование современных технологий, таких как HTTP/2 и Brotli-сжатие. В результате оптимизации удалось значительно улучшить время рендеринга и уменьшить объем передаваемых данных.
Чеклист по клиентской оптимизации - Лавлинский Николай, РИТ++ 2017
- 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.
- 7. Параметры тестирования 7 • WebPagetestPI • 3GFast (1,6 Mbit/s, 150 ms RTT) • Браузер: Chrome
- 8.
- 9. Начало • Start render:5,4 c • Load: 9,5 c • Bytes In: 1,6 MB 9
- 10.
- 11.
- 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
- 15.
- 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.
- 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.
- 34. Шаг 5. HTTP/2 •Тонкая оптимизация • Большее удобство • Разные стратегии оптимизации • Основная фича: мультиплексирование запросов (одно соединение) 34
- 35. Шаг 5. HTTP/2результаты • По многим метрикам – нет разницы • По некоторым – HTTP/2 хуже 35
- 36.
- 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.
- 41. Результат • Start render:3.0 с (5,4) • Load: 6,2 с (9,5) • Bytes In: 814 КБ (1,6 МБ) 41
- 42.
- 43. Что можно сделатьеще? • Разобрать JS- и CSS-код по исходникам, разбить по шаблонам • Вычистить неиспользуемый CSS-код • Вынести CSS из common.js и убрать весь JS-код вниз • Провести аудит используемых шрифтов • Разбить спрайт в PNG, перевести иконки в SVG • Добиться сокращение трафика для мобильных • Адаптивные картинки 43
- 44. Настройка Nginx TLS ssl_prefer_server_cipherson; 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 gzipon; 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