С чего начать ускорение сайта
Итак, мы определились с необходимостью ускорения. Первый шаг – оценка ситуации. Даже если ускорением сайта будет заниматься сторонняя компания или специалист, полезно понимать значение основных метрик.
Основные показатели, которые нужно измерить:
- время загрузки страницы (load time) – время от начала загрузки до получения основных элементов, без учета дополнительных запросов (виджеты, реклама и плагины, не блокирующие работу сайта). Эталонное значение – 2-3 секунды.
- начало рендеринга (start render) – время до начала отрисовки страницы в браузере. Эталонное значение – менее 1 секунды.
- время до интерактивности (time to interactive) – время до начала реакции интерфейса сайта на пользователя (нажимаются кнопки, ссылки, открываются меню). Эталонное значение – до 2-х секунд.
Важно понимать, что эталонные значения даны для ориентира и не всегда достижимы, но стремиться к ним стоит.
Теперь, вооружившись метриками скорости, нужно определить страницы сайта для замеров. Прежде всего это посадочные страницы для рекламы, главная страница и другие страницы входа. Для интернет-магазинов критически важны карточки товаров.
Получить метрики для страниц можно с помощью нескольких инструментов. Во-первых, стоит попробовать систему WebPagetest – это признанный стандарт для синтетического измерения скорости сайтов. Благодаря распределённой структуре она позволяет провести тест из разных стран. Кроме того, тестирование можно провести с использованием различных браузеров и мобильных устройств. Минусом системы является ориентация на профессионалов, что затруднит первые шаги.
Во-вторых, есть средства разработчика в браузере Chrome (и других на движке Chromium). В них встроен плагин Lighthouse, который собирает все важные метрики скорости сайта и даёт рекомендации по исправлению проблем. Находится он в разделе Audits (Аудиты) Средств разработчика – Developers Tools (вызываются нажатием кнопки F12).
Составляющие скорости сайта
Давайте разберёмся, что влияет на скорость сайта и попробуем классифицировать все причины ее снижения.
В сообществе ускорения сайтов принято разделение на клиентскую и серверную оптимизацию. Такое разделение немного условное, но позволяет навести порядок и упростить общение.
Серверная оптимизация – действия по ускорению формирования HTML-документа (самой страницы) и сокращению задержек, вносимых сервером.
Клиентская оптимизация – ускорение всех остальных компонентов страницы: CSS-кода, JavaScript-кода, картинок, подключаемых шрифтов, видео и так далее. По сути, это оптимизация всего, что отображается в браузере (клиенте).
Далее поговорим об этих двух типах подробнее.
Серверная оптимизация
Вопрос серверной оптимизации сайта очень индивидуален, мы лишь посмотрим общие подходы к ускорению генерации HTML-страниц. Прежде всего, нужно понять, что на серверной стороне работает несколько компонентов, формирующих задержки. В зависимости от типа хостинга (виртуальный, выделенный VPS, сервер) можно влиять на разные компоненты. Поэтому часто для ускорения требуется переезд сайта на хостинг более высокого уровня.
С точки зрения метрик, для оценки серверной части используется показатель “время до первого байта” (TTFB – time to first byte), иногда его называют “время ответа сервера”. Идеальным значением можно считать менее 200 мс, нормальным – до 500 мс.
Перечислим основные точки серверного ускорения и возможности снижения задержек.
КОД САЙТА
Как правило, это либо готовая платформа (CMS), либо полностью заказная разработка. Для оптимизации нужно выделить код, потребляющий значительное время. Иногда это может быть сторонний модуль (плагин), тогда нужно поискать ему замену или обратиться к разработчику.
Найти наиболее тормозящий участок помогает профилирование программного кода. Для каждого языка программирования существуют свои средства. В результате профилирования можно найти участок кода, отвечающий за большую часть времени выполнения (если такой участок вообще есть).
За счет внесения изменений в код можно получить качественное ускорение (в 10-100 раз), однако это довольно затратный процесс. Помимо честного ускорения кода можно применить серверное кэширование страниц или компонентов. Такой подход позволит замаскировать проблему медленного кода для посещаемых страниц, однако медленные страницы всё равно будут регулярно вылезать (когда отсутствует кэш).
СУБД, SQL-ЗАПРОСЫ
Любая страница сайта формируется в результате большого количества запросов к базе данных (БД). Часто основная причина торможения кроется во времени обработки этих SQL-запросов к БД.
Для выявления медленных запросов существуют специальные средства сбора статистики. Для MySQL это slow query log, который потом можно проанализировать на предмет частых медленных запросов.
Вторая часть – это оптимизация настроек СУБД, то есть сервера баз данных. Каждая СУБД имеет сотни настроек, многие из которых влияют на скорость работы. Проведение тюнинга эти настроек может дать дополнительный прирост скорости.
ОПЕРАЦИОННАЯ СИСТЕМА
В целом, операционная система (обычно, это Linux) не должна вносить проблем в работу веб-приложения. Однако, для тонкой оптимизации (особенно в случае высоких нагрузок) может понадобиться тюнинг низкоуровневых системных настроек.
Также не стоит забывать, что современный системный софт часто даёт преимущества в скорости и возможностях. Например, ядро Linux постоянно совершенствуется, внедряются сетевые оптимизации и поддержка новых инструкций процессоров.
ЖЕЛЕЗО, СЕТЬ
Для большинства сайтов выбор железной конфигурации и сетевых параметров определяется хостингом. Однако, если проект использует собственное железо, есть пространство для манёвра. Например, можно оценить потребности проекта в ресурсах (CPU, память, дисковая подсистема) и подобрать подходящий сервер.
Сетевые ресурсы, как правило, измеряются в пропускной способности канала. Стандартные значения сегодня это 100 Мбит и 1 Гбит в секунду. Если структура сайта включает в себя раздачу тяжелого контента (обычно, это видео), стоит задуматься об увеличении канала.
С точки зрения сети также нужно учитывать сетевые задержки и размещать сайт как можно ближе к посетителям. В случае глобальной аудитории (несколько стран) стоит задуматься об использовании CDN (content delivery network).
Клиентское ускорение
Клиентская часть веб-приложения, как правило, значительно больше влияет на конечную скорость сайта для пользователей. Поэтому, сразу после решения основных проблем в серверной части, следует переходить к клиентскому ускорению.
Перечислим все основные компоненты и способы их оптимизации.
CSS-КОД
Это важнейший элемент клиентской части, так как без загрузки CSS пользователь будет видеть только белый экран. Поэтому критически важно ускорить его доставку в браузер.
Основные пути ускорения:
- Отключение неиспользуемого кода.
- Сжатие эффективными алгоритмами (brotli, zopfli). Хранить заранее сжатую версию для быстрой отдачи.
- Минификация кода (сокращение лишних пробелов, избыточных директив и т.д.)
- Сокращение количества отдельных ресурсов (запросов), вплоть до встраивания в HTML.
- Размещение на том же домене, что и HTML-документ (для использования существующего TCP-соединения).
- Кэширование на стороне клиента (заголовок cache-control).
JS-КОД
Второй по важности элемент клиентской части. Хотя часто именно JavaScript отвечает за нагрузку основных ресурсов клиента (CPU, оперативная память, сеть). JS-код может быть как блокирующим отрисовку страницы, так и неблокирующим (асинхронным, отложенным).
Основные пути ускорения:
- Отключение неиспользуемого кода.
- Перенос кода из блокирующего режима в асинхронный (defer, async атрибуты).
- Поиск и устранение дубликатов кода.
- Обновление версий JS-библиотек.
- Сжатие эффективными алгоритмами (brotli, zopfli). Хранить заранее сжатую версию для быстрой отдачи.
- Минификация кода (сокращение лишних пробелов, избыточных директив и т.д.)
- Сокращение количества отдельных ресурсов (запросов), вплоть до встраивания в HTML.
- Разбиение на блоки до 50 кб, для постепенного исполнения в браузере.
- Точечная оптимизация кода по результатам профилирования в браузере.
- Размещение на том же домене, что и HTML-документ (для использования существующего TCP-соединения).
- Кэширование на стороне клиента (заголовок cache-control).
ИЗОБРАЖЕНИЯ
Картинки играют важную роль в контенте, без них обычно теряется внешний вид сайта. К счастью, картинки не блокируют рендеринг страницы, но занимают большую часть (в среднем 80%) “веса” (трафика). Основная задача при оптимизации – сократить их размер в байтах и сохранить качество.
Сделать это можно следующими методами:
- Использование более эффективных форматов. Везде, где допустимо использовать сжатие с потерями (JPEG), для современных браузеров использовать продвинутые форматы (например, WebP для Chrome).
- Внедрение векторной графики и вынос текста из картинок. Для векторных изображений можно использовать формат SVG.
- Оптимизация сжатия за счет продвинутых инструментов: mozJPEG, zopfliPNG, optiPNG и других.
- Изменение размеров в пикселях для точного соответствия, создание миниатюр вместо масштабирования средствами браузера.
- Удаление метаданных из файлов (EXIF, цветовые профили и т.д.)
ШРИФТЫ
Использование подключаемых шрифтов стало стандартом для современного веба. Однако преимущества в дизайне могут привести к проблемам в скорости сайта. Основная задача здесь – это минимизировать влияние загрузки шрифтов на процесс отображения страницы.
Что можно сделать со шрифтами?
- Сокращение количества вариантов и гарнитур шрифтов. Часто на сайте есть несколько очень похожих гарнитур, которые можно заменить на одну (или заменить стандартным шрифтом). Также загружать нужно только те варианты, которые реально используются на сайте: жирность, курсив, другие эффекты.
- Загрузка ограниченного набора символов. Обычно сайт использует только несколько алфавитов (в большинстве это latin и cyrillic). Развитые шрифты могут содержать до нескольких тысяч символов.
- Использование нового формата с лучшим сжатием – WOFF2 (для совместимости можно сделать еще WOFF).
- Если шрифт важен для отображения основного текста, объявить его файл как можно раньше, сделать preload для него в секции head.
- Установить неблокирующий режим font-display: fallback для шрифтов.
- Кэширование на стороне клиента (заголовок cache-control).
Резюме
Задача ускорения сайта затрагивает многие аспекты разработки и сопровождения проекта. Использование всех возможных методов оптимизации скорости требует серьезных ресурсов и вряд ли будет оправдано.
Однако, применение самых очевидных и эффективных мер позволит получить улучшение важных бизнес-метрик и повысить техническое совершенство проекта.
