Идея: обеспечить реально высокую скорость загрузки нагруженного сайта (от 100 тысяч посетителей в день) для всех пользователей, ничего не сломав и уложившись в бюджет. Введение. Подходы к оптимизации фронтенда: * Классический: делаем по GPSI или WPT. * Самостоятельный: прикрутили PageSpeed и CDN. * Промышленный: PDSA (попробовали, измерили, внедрили, подсчитали). * Кейс: открытие новостного сайта за 1 секунду на любом устройстве. Часть 1. Мониторинг клиентской производительности * Google Analytics / Яндекс.Метрика / Битрикс. * New Relic / mPulse / Айри / Navigation Timing API. * Resource Timing API / User Timing Api: собственные метрики. * Кейс: как понять из метрик сайта, что и где тормозит. Часть 2. Внедрение ускорения * Как выбрать KPI скорости сайта. * Базовые правила: как автоматизировать, внедрить, раскатать. * "Бюджет" на ускорение страницы: как распределить. * Поточное и отложенное ускорение: как выбрать. * Некоторые типичные ошибки "оптимизации". * Кейс: нестандартные подходы к оптимизации производительности. Часть 3. Узкое профилирование * Тестируем CDN: что смотрим, как измеряем. * Тестируем мобильные устройства: тормозит CPU или GPRS ? * Тестируем асинхронную загрузку: подводные камни. * Кейс: сколько "стоит" ошибка в клиентской производительности. Заключение. Промышленное внедрение * Кейс: "швейцарский нож" для оптимизации изображений. * Кейс: когда реально работает отложенная загрузка. * Кейс: HTTP/2. Реальные данные. * Кейс: как ускорить 2000 ресурсов в секунду?

1. ПРОМЫШЛЕННОЕ
УСКОРЕНИЕ
САЙТОВ

2. Мациевский Николай – владелец
www.webogroup.com, айри.рф
С 2007 года ускорено 5 836 сайтов
Посещаемость клиентских сайтов: 60М+ в день
Среднее ускорение сайта: 1,6 раза
2 книги, 16 наград (Microsoft MVP – 6 лет подряд,
Стартап года – 2 раза, WebReady, ROI, Окно в
Европу, YEES, Эврика, «Старт», CERPrize,
VCDay)

3. МЕТОДИКИ
ОПТИМИЗАЦИИ
ФРОНТЕНДА

4. W/Mustaches

5. Google PageSpeed Insights

6. WebPageTest.org

7. Google PageSpeed Module

8. CDN = Content Delivery Network

9. Правильное ускорение

10. Отображение сайта за 1 секунду

11. МОНИТОРИНГ
КЛИЕНТСКОЙ
ПРОИЗВОДИТЕЛЬНОСТИ

12. Google Analytics

13. Битрикс

14. NewRelic

15. mPulse

16. Айри.рф

17. Performance Timing API

18. Resource Timing API

19. Профилирование задержек

20. ВНЕДРЕНИЕ
УСКОРЕНИЯ

21. Выбор KPI по скорости
Время ответа сервера
Время отрисовки
Время полной загрузки – 50%
Процент загрузок до 4 секунд

22. KPI скорости сайта

23. “Бюджет” на ускорение
60% - на проверку гипотез ускорения
согласно ожидаемому эффекту
20% - на тестирование и анализ
20% - на внедрение лучших методов

24. Ускорение в виде “сборки”
Правила сборки файлов
Контроль клиентского кэширования
Контроль целостности серверного кэша
Тестирование ускоренной “сборки” сайта

25. Ускорение “на лету”
mod_pagespeed
200+ настроек
+50-150мс времени ответа сервера
eval() для JavaScript
нестабильная работа при нагрузке
собственная инвалидация кэша

26. Быстрое ускорение “на лету”
nginx + sub, subs, replace, gzip_static, brotli
gzip, zopfli, brotli, Closure Compiler, YUI
Compressor, HTML Compressor
optipng, pngcrush, pngout, pngwolf, gifsicle,
giflossy, convert, mozjpeg, subsampling,
webp, exiftool, zopflipng
scour, svgo, subset, smpdf, gs, ...

27. Ускорение со скоростью gzip

28. Отложенная загрузка

29. Параллельная загрузка

30. Оптимизация изображений

31. ПРОФИЛИРОВАНИЕ
КЛИЕНТСКОЙ
ПРОИЗВОДИТЕЛЬНОСТИ

32. Внедрение CDN

33. Мобильная производительность

34. Chrome: JavaScript CPU Profiler

35. РЕЗЮМЕ

36. Измерение производительности
Подключение (connect)
Сервер (server wait)
Канал (download)
Отрисовка (DOMready)
*Начало взаимодействия (interaction)
Загрузка (onload)

37. Правильная методика
Нагрузка
Частота
изменений
Ручная обработка
Автоматизация
Динамическое
решение
Статическая
сборка

38. Комплексный подход
P = cПланировать
D = cДелать
S = соСчитать
A = проАнализировать

39. Спасибо!
Мациевский Николай
n@airee.ru
+7 926 7281964
Промо-код на 2500 рублей в Айри.рф
hl16