Как ускорить сайт, с чего начать, где основные проблемы в скорости, какими инструментами лучше всего пользоваться

1. 10 шагов к быстрому сайту
Мациевский Николай
WEBO Group, Айри.рф
Партнерская конференция «1С-Битрикс»

2. Ваш спецназ для ускорения
сайта
• Измеряем реальную скорость и проблемные зоны
• Оптимизируем и мониторим серверные задержки
• Тратим 5 минут на сжатие и кэширование
• Оптимизируем изображения: с потерями или без
• Оптимизируем шрифты, стили и скрипты
• Откладываем загрузку картинок и виджетов
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ

3. Где проблема скорости?
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ

4. Мониторинг скорости
• Какая медиана времени ответа сервера?
• Где и когда тормозит сервер?
• CPU (MySQL | PHP), I/O (disk), RAM (Memcached)
• Что тормозит на клиенте?
• KPI: 80% загрузок сайта до 2 секунд
• Решения: New Relic, Яндекс.Метрика, mPulse,
Pingdom, Айри.рф, …
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ

5. Серверное окружение
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ

6. Серверная оптимизация
• Nginx + (php-fpm | cgi | nodejs)
• Opcode: APC, eAccelerator, Zend Optimizer
• Memcached
• MySQL: кэши
• Проверить время сброса кэшей
• 99% серверных задержек не более 200 мс
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ

7. Gzip + клиентское кэширование
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ

8. Сжатие на сервере
• Nginx: gzip on; gzip_level 7;
• Nginx: expires max;
• Nginx: gzip_static;
• Zopfli: на 5% лучше gzip 9
• Методика: zopfli -> gzip_static -> gzip
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ

9. Оптимизация изображений
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ

10. JPEG, GIF, BMP, PNG, WEBP
• Без потерь качества:
• JPEG: ExifTool, mozjpeg / jpegtran
• GIF, BMP, PNG: pngcrush, optipng, TruePNG,
zopfliPNG
• С потерями качества:
• Pngnq, ImageMagick, TruePNG
• WebP, поддержка 65%:
• На 15% меньше PNG и JPEG
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ

11. Оптимизация шрифтов, стилей, скриптов
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ

12. Шрифты, стили, скрипты
• Шрифты: fontforge (woff) +
subset.py + gzip + fontsquirrel
• Выигрыш: до 10 раз
• Стили: YUI Compressor / CSS Tidy
• Скрипты: Google Compiler / YUI
Compressor
• HTML: htmlcompressor
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ

13. Отложенная загрузка
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ

14. LazyLoad, post-load, pre-load
• LazyLoad: при скролле или после загрузки
• Загрузка виджетов и счетчиков по событию
onload
• Navigation Timing API / Navigation User API для
измерения
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ

15. Спасибо за внимание!
Вопросы?
| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ