Скорость загрузки сайта: что на неё влияет и что из этого важно

Скорость сайта складывается не из одной цифры, а из цепочки шагов между нажатием на ссылку и появлением содержимого на экране. Понимание того, какой шаг сколько занимает, экономит деньги: чаще всего оптимизируют не то, что тормозит.

Что происходит между кликом и картинкой на экране

Шагов пять, и они идут по очереди.

Сначала браузер выясняет, какому серверу принадлежит домен. Потом устанавливает соединение и защищённый канал. Потом отправляет запрос и ждёт ответа сервера. Затем получает HTML и начинает его разбирать. И только после этого догружает то, на что HTML ссылается: шрифты, стили, скрипты, изображения.

Задержка на любом шаге сдвигает всё, что за ним. Поэтому одна медленная операция в начале дороже десяти медленных в конце.

Шаг, который чаще всего съедает время: ответ сервера

Сервер получает запрос и должен вернуть страницу. Если страница собирается на лету, он идёт в базу данных, достаёт товары, считает цены, подставляет их в шаблон.

Здесь возникает типовая беда — когда для списка из тридцати товаров система делает тридцать отдельных запросов к базе вместо одного. На тестовых десяти позициях это незаметно, на трёх тысячах страница открывается пять секунд.

Лечится это двумя способами. Первый — переписать выборку так, чтобы данные брались одним запросом. Второй — кэширование: собранная страница сохраняется готовой и следующему посетителю отдаётся без похода в базу.

Кэш решает проблему быстро, но прячет её. Как только появляется что-то, что кэшировать нельзя — корзина, личный кабинет, персональные цены — старая медлительность возвращается.

Изображения: самый большой вес и самая простая правка

Фотография с телефона весит несколько мегабайт и имеет ширину в несколько тысяч точек. На экране она показывается в блоке шириной триста точек. Браузер честно скачивает всё и уменьшает при показе.

Правильное поведение системы: при загрузке файла сразу создавать несколько уменьшенных копий разного размера и отдавать ту, которая подходит под экран. Плюс современный формат сжатия вместо исходного JPEG.

Отдельная деталь — порядок. Изображения ниже первого экрана можно грузить отложенно, когда посетитель до них долистает. Изображение на первом экране, наоборот, нужно грузить в первую очередь, иначе человек несколько секунд смотрит на пустой прямоугольник.

Скрипты: то, что тормозит незаметно

HTML разбирается сверху вниз. Встретив подключение скрипта без специальных указаний, браузер останавливает разбор, скачивает файл, выполняет его и только потом продолжает.

Отсюда правило: всё, что не нужно для отрисовки первого экрана, подключается отложенно. Счётчики аналитики, чат поддержки, виджеты, карты, плееры.

Виджет чата — типичный случай. Он весит больше, чем весь остальной сайт, и нужен посетителю в лучшем случае через полминуты после открытия. Подгружать его следует после того, как страница отрисовалась, либо по первому движению.

Шрифты и белый экран

Браузер узнаёт про нужный шрифт только тогда, когда разберёт стили. Пока файл шрифта качается, текст либо невидим, либо показан запасным шрифтом и потом перерисовывается.

Практический подход: держать один-два начертания вместо шести, подключать шрифт со своего сервера, а не со стороннего, и разрешать браузеру показать текст запасным шрифтом сразу. Прыжок текста при подмене неприятен, но он лучше, чем пустая страница.

Где это видно на живом проекте

В магазине «Жук и Плут» каталог с несколькими сотнями позиций и фотографиями. Там всё перечисленное выше складывается одновременно: выборка товаров, картинки, фильтры.

Импорт с Wildberries тянет исходные фотографии как есть. Если бы они отдавались покупателю в исходном виде, страница категории весила бы десятки мегабайт. Поэтому уменьшенные копии создаются на этапе импорта, один раз, а не при каждом показе.

Общий принцип тот же: тяжёлую работу переносить с момента показа страницы на момент, когда данные попадают в систему.

Как понять, что тормозит именно у вас

Откройте сайт с телефона на мобильном интернете, а не по домашнему вай-фаю. Засеките, через сколько появляется текст первого экрана и через сколько страница перестаёт дёргаться.

Дальше разделите два случая. Если долго висит пустая белая страница — время уходит на сервере. Если содержимое появляется быстро, а потом ещё несколько секунд всё прыгает и подгружается — время уходит в браузере на картинках и скриптах.

Это разделение важнее любых баллов из инструментов проверки. Оно определяет, что чинить.

Порядок работ, если чинить всё-таки нужно

Порядок здесь имеет значение, потому что каждый следующий шаг дешевле предыдущего и даёт меньший эффект.

Первое — картинки. Уменьшенные копии и современный формат почти всегда дают самый заметный сдвиг и не требуют трогать логику.

Второе — сторонние скрипты. Отложенная загрузка чата, карт и виджетов. Здесь же полезно просто пересчитать, сколько их у вас накопилось: часто половина осталась от прошлых экспериментов с рекламой.

Третье — запросы к базе и кэширование. Это уже работа внутри кода, дороже и требует человека, который понимает проект.

Четвёртое — хостинг. Менять его имеет смысл последним, когда точно известно, что сервер отвечает медленно даже на пустую страницу.

Чего скорость не чинит

Быстрая страница с непонятным предложением остаётся страницей с непонятным предложением. Ускорение не добавляет доверия, не объясняет цену и не сокращает форму из семи полей.

Оно убирает одну конкретную потерю: людей, которые ушли до того, как что-либо увидели. Если таких мало, эффект будет незаметным, сколько бы баллов ни показал инструмент проверки.

Кому оптимизация не нужна

Сайту-визитке на пять страниц с тремя картинками. Там нечего ускорять, а несколько сотен миллисекунд не меняют ни заявок, ни позиций.

Проекту, где нет трафика. Ускорять страницу, на которую заходят десять человек в месяц, — работа ради отчёта.

Оптимизация окупается там, где есть каталог, платная реклама или много страниц из поиска. Тогда секунда задержки умножается на количество посетителей.

Коротко

Загрузка — это цепочка: имя домена, соединение, ответ сервера, разбор HTML, догрузка ресурсов. Дороже всего обходятся медленный ответ сервера из-за лишних запросов к базе, исходные фотографии без уменьшенных копий и блокирующие скрипты сторонних виджетов. Прежде чем что-то менять, определите на глаз, где уходит время: до появления страницы или после.