Embed Size (px)
Citation preview
От 40 до 2 секунд
Увеличиваем скорость загрузки сайта
Колосов Павел, Тензор, 2015 год
Цель доклада
Как начать оптимизировать свой сайт?
Обо мне
Весь 2014 год работал в стартапе “Веселый Жираф” ( www.happy-giraffe.ru )
Менеджером
Подписал NDA
Вводные данные проекта
● 3 500 000 уникальных пользователей в месяц
● Примерно 250 000 уникальных пользователей в день
● От 750 000 хитов в день● 1 000 000+ страниц
Вводные данные проекта
● Никто из программистов упорно не замечал проблем
● Руководство не понимало что делать
Первая проблема
У ведущего разработчика iMac 27 дюймов и 24GB памяти
Решение:● Celeron Core2 Duo T5550 3GB
Первая проблема
Правило 1: тестируйте на разных устройствах
С чего начали
● PageSpeed:o Desktop 70-80o Mobile 50-60
● На “тестовой” машинеo OnLoad 40+ секo DOMContentLoaded 6+ секo Первый нормальный render 8+ сек
Задача от руководства
● OnReady 0.1 секунда● OnLoad 0.4 секунды● Добиться за 1 месяц
Правило 2:
Не беритесь за проект, который не осилите
Правило 3:
Проект, вероятнее всего, займет много времени, очень много времени
Правило 4:
Инфраструктурные изменения планируйте на лето, так как бизнес-активность минимальная
Теория
На что мы можем влиять:● время ответа сервера (ping)● время генерации файла● время передачи файла● последовательность загрузки файлов● используемые технологии на клиенте ● количество контента
Critical Render Path
Правило 5:
Начинайте работы с поиска узких мест
Анализ - Что будем наблюдать?
● Браузер:o DOMContentLoadedo OnLoad
● request time (access.log)
Анализ - Что будем наблюдать?
Правило 6:
Не меряйте средние величины, делите на группы
Анализ - Что будем наблюдать?
Пример:1 000 000 страниц и 50+ типов страниц:● Тип А - 50% просмотров● Тип B - 30% просмотров● Тип C - 10% просмотров● …
Анализ - Что будем наблюдать?
Правило 7:
Идите от просмотров, а не от количества
Как мерим?
Сначала все руками, чтобы понять причины:● Консоль разработчикаПотом статистический анализ:● kibana(elasticsearch) для nginx● RUM (real user measurement)
Что не является поводом к действию?
● Google analitics и Яндекс.метрика не подошли
● PageSpeed, YSlow
JS
Разбираемся с JS:● 80+ файлов● В head● Синхронно● Около 40 вставок в body
JS
http://www.reporter.com.ua/http://tattooirovki.com/
JS
Правило 8:
Не давать PHP программистам писать JS код
JS - Что можно сделать?
● RequireJS, browserify, webpack● По максимуму использовать асинхронную
загрузку● Убрать скрипты в конец body
JS
Правило 9:
Организовывайте js код правильно с самого начала
Правило 10:
Планируйте жизнь в двух состояниях кода
JS - Результат
● Browserify лучше● Максимальный прирост
производительности - если скрипты в конце body
● Используйте google tag для маркетинга● DOMContentLoad - responseEnd < 0.7● Реклама - зло, так как российские
системы себя не оптимизируют
<div><script>… document.write(‘<script src=”...”></script>’)…</script></div>
JS - Результат
JS почему common лучше?
knockoutjQuery
CSS
● Убрать не используемые селекторы● Отказаться от поддержки IE8● Разделить на файлы по статистике
посещения (страницы A,B,C)● Уменьшить количество подключаемых
файлов, в том числе изображений
CSS - Результат
● Очистка css от неиспользуемых селекторов дало плохой результат
● Разбить по статистике - уменьшило файл в 4 раза
● Уменьшения количества изображений (объединение в спрайты) - хорошо
● Загружать шрифты - плохо
Сеть
ping● vk, odnoklassniki - 40 мс● happy-giraffe.ru - 80 мс
Можно переносить сервера, можно ставить кеш сервер в России
Сеть - CDN
1930 год - max скорость 125 км/час1957 год - max скорость 175 км/час
http://www.rgo-sib.ru/
Сеть - CDN
1930 год - max скорость 125 км/час1957 год - max скорость 175 км/час2000 год - 120 км/час
Сеть - CDN
Правило 11:
Деньгами сайт ускорить нельзя
Backend
● Профилирование XHprof
● Архитектура
● Правильное кеширование
Backend - кеширование
● Учитывать время жизни объектов
● Разбивать на максимально переиспользуемые куски
● Разрабатывайте, чтобы работало без кеша
● Старайтесь отсрочить момент, когда кеш станет частью инфраструктуры
Backend - Результаты
● Request time уменьшился до 0,6
● С включенным кешем до 0,3
● Кеширование на nginx до 0,05
Итог
● HTML отдается <2 секунды
● DOMContentLoaded <3 секунд
● OnLoad <10 секундЛучшие результаты:
● HTML отдается 0,35 секунды
● DOMContentLoaded <1 секунд
● OnLoad <7 секунд
А почему долгое время OnLoad?
А потому что AMD и 90+ файлов js
Вопросы?
