Промышленное ускорение сайтов

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

Transcript of Промышленное ускорение сайтов

Page 1: Промышленное ускорение сайтов

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

САЙТОВ

Page 2: Промышленное ускорение сайтов

Мациевский Николай – владелецwww.webogroup.com, айри.рф

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

Page 3: Промышленное ускорение сайтов

МЕТОДИКИОПТИМИЗАЦИИ

ФРОНТЕНДА

Page 4: Промышленное ускорение сайтов

W/Mustaches

Page 5: Промышленное ускорение сайтов

Google PageSpeed Insights

Page 6: Промышленное ускорение сайтов

WebPageTest.org

Page 7: Промышленное ускорение сайтов

Google PageSpeed Module

Page 8: Промышленное ускорение сайтов

CDN = Content Delivery Network

Page 9: Промышленное ускорение сайтов

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

Page 10: Промышленное ускорение сайтов

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

Page 11: Промышленное ускорение сайтов

МОНИТОРИНГКЛИЕНТСКОЙ

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

Page 12: Промышленное ускорение сайтов

Google Analytics

Page 13: Промышленное ускорение сайтов

Битрикс

Page 14: Промышленное ускорение сайтов

NewRelic

Page 15: Промышленное ускорение сайтов

mPulse

Page 16: Промышленное ускорение сайтов

Айри.рф

Page 17: Промышленное ускорение сайтов

Performance Timing API

Page 18: Промышленное ускорение сайтов

Resource Timing API

Page 19: Промышленное ускорение сайтов

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

Page 20: Промышленное ускорение сайтов

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

Page 21: Промышленное ускорение сайтов

Выбор KPI по скорости

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

Page 22: Промышленное ускорение сайтов

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

Page 23: Промышленное ускорение сайтов

“Бюджет” на ускорение

60% - на проверку гипотез ускорениясогласно ожидаемому эффекту

20% - на тестирование и анализ20% - на внедрение лучших методов

Page 24: Промышленное ускорение сайтов

Ускорение в виде “сборки”

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

Page 25: Промышленное ускорение сайтов

Ускорение “на лету”

mod_pagespeed200+ настроек+50-150мс времени ответа сервераeval() для JavaScriptнестабильная работа при нагрузкесобственная инвалидация кэша

Page 26: Промышленное ускорение сайтов

Быстрое ускорение “на лету”

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, ...

Page 27: Промышленное ускорение сайтов

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

Page 28: Промышленное ускорение сайтов

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

Page 29: Промышленное ускорение сайтов

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

Page 30: Промышленное ускорение сайтов

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

Page 31: Промышленное ускорение сайтов

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

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

Page 32: Промышленное ускорение сайтов

Внедрение CDN

Page 33: Промышленное ускорение сайтов

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

Page 34: Промышленное ускорение сайтов

Chrome: JavaScript CPU Profiler

Page 35: Промышленное ускорение сайтов

РЕЗЮМЕ

Page 36: Промышленное ускорение сайтов

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

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

Page 37: Промышленное ускорение сайтов

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

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

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

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

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

Page 38: Промышленное ускорение сайтов

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

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

Page 39: Промышленное ускорение сайтов

Спасибо!

Мациевский Николай[email protected] +7 926 7281964

Промо-код на 2500 рублей в Айри.рфhl16