ПРОМЫШЛЕННОЕУСКОРЕНИЕ

САЙТОВ

Мациевский Николай – владелец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, 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, ...

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

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

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

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

ПРОФИЛИРОВАНИЕКЛИЕНТСКОЙ

ПРОИЗВОДИТЕЛЬНОСТИ

Внедрение CDN

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

Chrome: JavaScript CPU Profiler

РЕЗЮМЕ

Измерение производительности

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

Правильная методикаНагрузка

Частота изменений

Ручная обработкаАвтоматизация

Динамическое решение

Статическая сборка

Комплексный подход

P = cПланироватьD = cДелатьS = соСчитатьA = проАнализировать

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