Скорость сайта обсуждают в двух крайностях: «да нормально всё грузится» и «надо срочно переписать всё на новом фреймворке». Оба подхода стоят денег. Разбираемся, где середина.
#Почему «зелёный балл» — плохая цель
PageSpeed Insights показывает две разные вещи, и их постоянно путают. Верхний блок — данные реальных пользователей за последние 28 дней. Нижний — синтетический прогон на эмуляторе. Оптимизировать можно оба, но платят вам только за первый.
#Три метрики, которые стоит знать
LCP — когда виден главный экран
Момент, когда отрисовался самый крупный элемент: заголовок или картинка первого экрана. Ориентир — до 2,5 секунды. Это метрика номер один: до неё посетитель смотрит в пустоту.
CLS — прыгает ли вёрстка
Насколько содержимое смещается во время загрузки. Знакомое всем: нажимаешь кнопку, а в этот момент подгрузился баннер и кнопка уехала. Ориентир — меньше 0,1.
INP — отклик на действие
Сколько миллисекунд проходит от клика до реакции интерфейса. Ориентир — до 200 мс. Чаще всего страдает там, где на странице много сторонних скриптов.
#Что чинить в первую очередь
По нашему опыту работы с сайтами на разных платформах, порядок почти всегда один и тот же — и он не начинается со смены технологии.
- Картинки. Отдавать в WebP, задавать размеры в разметке, включить
loading="lazy"для всего ниже первого экрана. Одна необжатая фотография на 4 МБ в шапке перевешивает любую оптимизацию кода. - Шрифты. Хостить у себя, а не тянуть с чужого CDN, ставить
font-display: swapи предзагружать тот файл, которым набран первый экран. - Сторонние скрипты. Чаты, виджеты обратного звонка, счётчики, карты. Загружать после основного содержимого, а карту — только по клику.
- Кэширование и сжатие. Заголовки кэша на статику и gzip. Пять строк в конфиге сервера, эффект — сразу.
- И только потом — вопросы архитектуры: серверный рендеринг, пересборка, смена платформы.
<!-- Первый экран: размеры заданы заранее, поэтому вёрстка не прыгнет -->
<img src="/img/hero.webp" width="1200" height="630" alt="…" fetchpriority="high">
<!-- Всё ниже первого экрана грузим лениво -->
<img src="/img/case-1.webp" width="800" height="500" alt="…" loading="lazy" decoding="async">
<!-- Шрифт первого экрана предзагружаем -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>#Про региональную специфику
Тестировать сайт на офисном интернете и на новом телефоне — это тестировать сайт для себя, а не для клиента. В районных центрах и на выезде люди сидят с мобильного интернета, который бывает заметно медленнее городского.
- Проверьте сайт в режиме эмуляции медленной сети в браузере — это две минуты.
- Откройте его на телефоне 3–4-летней давности, а не на флагмане.
- Посмотрите в Метрике долю мобильного трафика — обычно она больше, чем ожидают.
Что даёт ускорение
- Меньше уходов с первого экрана
- Лучше ранжирование при прочих равных
- Дешевле реклама: та же посадочная работает эффективнее
- Меньше жалоб от менеджеров на «сайт тормозит»
Чего оно не даёт
- Не исправит непонятное предложение и плохие тексты
- Не заменит нормальный каталог и цены
- Не поднимет в выдаче сайт без содержания
- Не спасёт, если заявки некому обрабатывать
Скорость — это гигиена, а не преимущество. Быстрый сайт не выигрывает сам по себе — но медленный проигрывает всегда.
