Download - Промышленное ускорение сайтов
ПРОМЫШЛЕННОЕУСКОРЕНИЕ
САЙТОВ
Мациевский Николай – владелецwww.webogroup.com, айри.рф
С 2007 года ускорено 5 836 сайтовПосещаемость клиентских сайтов: 60М+ в деньСреднее ускорение сайта: 1,6 раза2 книги, 16 наград (Microsoft MVP – 6 лет подряд, Стартап года – 2 раза, WebReady, ROI, Окно в Европу, YEES, Эврика, «Старт», CERPrize, VCDay)
МЕТОДИКИОПТИМИЗАЦИИ
ФРОНТЕНДА
W/Mustaches
Google PageSpeed Insights
WebPageTest.org
Google PageSpeed Module
CDN = Content Delivery Network
Правильное ускорение
Отображение сайта за 1 секунду
МОНИТОРИНГКЛИЕНТСКОЙ
ПРОИЗВОДИТЕЛЬНОСТИ
Google Analytics
Битрикс
NewRelic
mPulse
Айри.рф
Performance Timing API
Resource Timing API
Профилирование задержек
ВНЕДРЕНИЕУСКОРЕНИЯ
Выбор KPI по скорости
Время ответа сервераВремя отрисовкиВремя полной загрузки – 50%Процент загрузок до 4 секунд
KPI скорости сайта
“Бюджет” на ускорение
60% - на проверку гипотез ускорениясогласно ожидаемому эффекту
20% - на тестирование и анализ20% - на внедрение лучших методов
Ускорение в виде “сборки”
Правила сборки файловКонтроль клиентского кэшированияКонтроль целостности серверного кэшаТестирование ускоренной “сборки” сайта
Ускорение “на лету”
mod_pagespeed200+ настроек+50-150мс времени ответа сервераeval() для JavaScriptнестабильная работа при нагрузкесобственная инвалидация кэша
Быстрое ускорение “на лету”
nginx + sub, subs, replace, gzip_static, brotligzip, zopfli, brotli, Closure Compiler, YUI
Compressor, HTML Compressoroptipng, pngcrush, pngout, pngwolf, gifsicle,
giflossy, convert, mozjpeg, subsampling, webp, exiftool, zopflipng
scour, svgo, subset, smpdf, gs, ...
Ускорение со скоростью gzip
Отложенная загрузка
Параллельная загрузка
Оптимизация изображений
ПРОФИЛИРОВАНИЕКЛИЕНТСКОЙ
ПРОИЗВОДИТЕЛЬНОСТИ
Внедрение CDN
Мобильная производительность
Chrome: JavaScript CPU Profiler
РЕЗЮМЕ
Измерение производительности
Подключение (connect)Сервер (server wait)Канал (download)Отрисовка (DOMready)*Начало взаимодействия (interaction)Загрузка (onload)
Правильная методикаНагрузка
Частота изменений
Ручная обработка Автоматизация
Динамическое решение
Статическая сборка
Комплексный подход
P = cПланироватьD = cДелатьS = соСчитатьA = проАнализировать