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 для

измерения

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

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

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