10 шагов к ускорению сайта

10 шагов к быстрому сайту

Мациевский НиколайWEBO Group, Айри.рф

Партнерская конференция «1С-Битрикс»

Ваш спецназ для ускорения сайта

• Измеряем реальную скорость и проблемные зоны

• Оптимизируем и мониторим серверные задержки

• Тратим 5 минут на сжатие и кэширование

• Оптимизируем изображения: с потерями или без

• Оптимизируем шрифты, стили и скрипты

• Откладываем загрузку картинок и виджетов

| ПАРТНЕРСКАЯ КОНФЕРЕНЦИЯ

Где проблема скорости?


Мониторинг скорости

• Какая медиана времени ответа сервера?

• Где и когда тормозит сервер?

• CPU (MySQL | PHP), I/O (disk), RAM (Memcached)

• Что тормозит на клиенте?

• KPI: 80% загрузок сайта до 2 секунд

• Решения: New Relic, Яндекс.Метрика, mPulse,

Pingdom, Айри.рф, …


Серверное окружение


Серверная оптимизация

• Nginx + (php-fpm | cgi | nodejs)

• Opcode: APC, eAccelerator, Zend Optimizer

• Memcached

• MySQL: кэши

• Проверить время сброса кэшей

• 99% серверных задержек не более 200 мс


Gzip + клиентское кэширование


Сжатие на сервере

• Nginx: gzip on; gzip_level 7;

• Nginx: expires max;

• Nginx: gzip_static;

• Zopfli: на 5% лучше gzip 9

• Методика: zopfli -> gzip_static -> gzip


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


JPEG, GIF, BMP, PNG, WEBP

• Без потерь качества:

• JPEG: ExifTool, mozjpeg / jpegtran

• GIF, BMP, PNG: pngcrush, optipng, TruePNG,

zopfliPNG

• С потерями качества:

• Pngnq, ImageMagick, TruePNG

• WebP, поддержка 65%:

• На 15% меньше PNG и JPEG


Оптимизация шрифтов, стилей, скриптов


Шрифты, стили, скрипты

• Шрифты: fontforge (woff) +

subset.py + gzip + fontsquirrel

• Выигрыш: до 10 раз

• Стили: YUI Compressor / CSS Tidy

• Скрипты: Google Compiler / YUI

Compressor

• HTML: htmlcompressor


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


LazyLoad, post-load, pre-load

• LazyLoad: при скролле или после загрузки

• Загрузка виджетов и счетчиков по событию

onload

• Navigation Timing API / Navigation User API для

измерения


Спасибо за внимание! Вопросы?


10 шагов к ускорению сайта

Internet