Скорость сайта

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

Как измерить скорость

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

• Тяжёлые картинки в JPG и PNG без сжатия и без WebP.
• CSS и JS, которые блокируют отрисовку страницы.
• Сторонние скрипты: чаты, виджеты, пиксели, счётчики. Каждый по отдельности лёгкий, вместе, секунды.
• Огромный DOM: скрытые меню и слайдеры с тысячами элементов.
• Медленный ответ сервера: нет кэша, слабый хостинг.

Что ускоряет сайт на Битриксе

1. Включить объединение и сжатие CSS и JS в настройках главного модуля.
2. Включить композитный режим или кэш страниц для гостей: время ответа сервера падает в разы.
3. Настроить конвертацию изображений в WebP и ленивую загрузку всего, что ниже первого экрана.
4. Главную картинку первого экрана, наоборот, грузить сразу, с высоким приоритетом.
5. Перенести сторонние виджеты на загрузку после взаимодействия с сайтом.
6. Настроить кэширование статики на сервере на год.

Скорость это обязательный пункт наших технических работ. При переезде «Посуда Центр» новый сайт по технике должен был быть не хуже старого, и оптимизация скорости шла до открытия индексации. У Aitech ускорение посадочных страниц было частью техоптимизации, после которой заказы из поиска выросли на 125%. Кейсы: «Посуда Центр», Aitech.

Сначала замерьте, потом ускоряйте

Перед работами снимите показатели ключевых страниц: главной, категории, карточки, статьи. После каждого изменения замеряйте снова. Так видно, что реально помогло, и не будет соблазна тратить неделю на правку, которая выиграла 50 миллисекунд. Реальные данные пользователей в Search Console обновляются с задержкой около месяца, поэтому для быстрых проверок используйте лабораторный тест Lighthouse.

Отдельно проверьте, как сайт открывается при медленном мобильном интернете: в Chrome DevTools есть режим ограничения скорости сети. То, что в офисе грузится за секунду, на 3G может занимать десять.

Пример плана ускорения

Как выглядит план для типичного корпоративного сайта на Битриксе с мобильной скоростью 40 баллов:

1. Неделя 1: включить объединение CSS и JS, кэш компонентов и композит для гостей. Эффект обычно заметен сразу на времени ответа сервера.
2. Неделя 2: конвертировать изображения в WebP, настроить lazyload для всего ниже первого экрана и приоритетную загрузку главной картинки.
3. Неделя 3: разобрать сторонние скрипты, отложить чаты и виджеты, убрать неиспользуемые счётчики.
4. Неделя 4: упростить тяжёлые блоки главной, уменьшить DOM, повторно замерить.

После каждого шага: замер Lighthouse на тех же страницах. Через месяц: проверка реальных данных в Search Console.

Частые ошибки

• Ускорять по десктопным замерам и не смотреть мобильные.
• Включить lazyload для главной картинки первого экрана.
• Ставить всё новые виджеты и счётчики без оценки их веса.
• Сжать изображения так, что они стали выглядеть плохо.

Вопросы про скорость

Разбор скорости входит в технический аудит, а внедрение: в доработку сайта.

Источники

• web.dev: «Web Vitals», «Optimize Largest Contentful Paint»
• 1С-Битрикс: документация по композитному сайту и оптимизации CSS/JS
• Кейсы E.BAEV: «Посуда Центр», Aitech

См. также: Core Web Vitals, Мобильная версия сайта, Технический аудит.