Скорость сайта: почему она решает и как её поднять

Как скорость превращается в деньги

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

Особенно это заметно на мобильном интернете. То, что на офисном Wi-Fi открывается за секунду, в дороге может грузиться пять — и именно там находится большая часть аудитории.

Какие показатели действительно важны

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

Что тормозит чаще всего

1. Изображения

Причина номер один почти на всех сайтах. Фотография весом 4 мегабайта, показанная в блоке шириной 300 пикселей, — обычное дело. Лечится сжатием, современными форматами и правильными размерами.

2. Скрипты, блокирующие отрисовку

Браузер доходит до скрипта и останавливает построение страницы, пока его не загрузит. Несколько таких — и первый экран появляется на секунду позже.

3. Сторонние виджеты

Чат, обратный звонок, счётчики, карты, всплывающие акции. Каждый тянет свои файлы с чужих серверов. Пять виджетов легко добавляют пару секунд.

4. Шрифты

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

5. Хостинг

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

6. Тяжёлая тема или шаблон

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

В каком порядке чинить

1. ИзмерьтеНе на глаз, а инструментом, и обязательно в мобильном режиме. Зафиксируйте цифры до начала работ.
2. Займитесь картинкамиСжать, перевести в современный формат, отдавать по размеру блока, включить отложенную загрузку для нижних.
3. Уберите лишние виджетыЧестно ответьте, какими из них пользуются. Обычно половину можно удалить без потерь.
4. Разберитесь со скриптамиВсё, что не нужно для первого экрана, должно загружаться после него.
5. Настройте кеширование и сжатиеНа стороне сервера. Это делается один раз и работает всегда.
6. Проверьте хостингЕсли сервер отвечает дольше полусекунды — вопрос к хостингу, а не к сайту.
7. Измерьте сноваСравните с исходными цифрами. Без этого вы не знаете, помогло ли.

Чего не надо делать

• Гнаться за 100 баллами в ущерб функциям, которые нужны бизнесу.
• Отключать аналитику ради скорости: без данных вы ослепнете.
• Мерить только на компьютере с быстрым интернетом.
• Оптимизировать, не зафиксировав исходные цифры.
• Считать, что скорость исправит плохое предложение. Быстрый сайт с ценой выше рынка остаётся сайтом с ценой выше рынка.

Что делать с изображениями подробно

Раз это причина номер один, разберём её отдельно. Работа состоит из четырёх шагов, и каждый даёт заметный выигрыш.

1. Правильный размерКартинка не должна быть шире блока, в котором показывается. Фотография 4000 пикселей в блоке 400 — это в десять раз больше данных, чем нужно.
2. СжатиеКачество 75–85% визуально неотличимо от 100%, а весит в разы меньше.
3. Современный форматWebP или AVIF вместо JPEG и PNG — обычно минус 30–50% веса при том же качестве.
4. Отложенная загрузкаИзображения ниже первого экрана грузятся, когда до них доскроллили, а не сразу.

Отдельно: у каждого изображения должны быть заданы ширина и высота. Без них страница «прыгает» при загрузке, а это отдельная претензия поисковика.

Шрифты: незаметная задержка

Пока шрифт не загрузился, текст либо не виден вовсе, либо показывается запасным начертанием и потом прыгает. Оба варианта плохи.

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

Как проверять правильно

1. Мерить в мобильном режиме, а не на компьютере.
2. Проверять не только главную: внутренние страницы часто медленнее.
3. Делать несколько замеров — цифры плавают.
4. Смотреть на реальные данные пользователей, если они доступны, а не только на лабораторный тест.
5. Сравнивать с конкурентами из топа: важна не абсолютная цифра, а положение относительно них.