Почему сайт тормозит: 10 минут диагностики и что чинить первым

Проверка за 10 минут

Откройте PageSpeed Insights от Google, вставьте адрес сайта, нажмите «Анализ». Через полминуты получите два числа — для мобильных устройств и для десктопа, от 0 до 100. Всё, что ниже 50 на мобильном, означает: посетители уходят, не дождавшись загрузки.

Ниже баллов будет список рекомендаций с аббревиатурами вроде LCP, CLS, TBT. Разбираться в них сразу не нужно. Пролистайте до раздела с возможностями ускорения — там честно указано, что именно тормозит сайт и сколько секунд можно отыграть.

Картинки — почти всегда главный виновник

В большинстве случаев самая тяжёлая часть сайта — фотографии. Менеджер загружает картинку прямо с телефона или из фотобанка: 4-5 мегабайт, разрешение под печать, а не под экран.

Что проверить:

• формат — JPEG и PNG вместо WebP или AVIF съедают вдвое-втрое больше веса без разницы в качестве на глаз;
• размер в пикселях — если картинка выводится на сайте шириной 800px, а весит как оригинал в 3000px, браузер лишний раз обрабатывает то, что можно было отдать сразу нужного размера;
• количество — карусель из десяти полноразмерных фото на главной обычно не нужна, хватает трёх-четырёх.

Когда мы собирали магазин vareno.fun для доставки в 27 стран ЕС, каталог с тысячами карточек товара просто не выдержал бы полноразмерных фото — сжатие и ленивая подгрузка изображений закладывались в архитектуру с первого дня, а не добавлялись потом по итогам аудита.

Шрифты грузятся дольше, чем кажется

Красивый фирменный шрифт с Google Fonts или Adobe — это отдельный файл, который браузер должен скачать, прежде чем показать текст. Пока файл не пришёл, часть браузеров прячет весь текст на странице — так называемое мигание невидимого контента.

Практический чек-лист:

• используйте не больше двух шрифтовых семейств и двух-трёх начертаний — каждое начертание это отдельный файл на загрузку;
• подключайте шрифты с настройкой font-display: swap, чтобы текст показывался сразу системным шрифтом, а потом подменялся на фирменный;
• если необычный шрифт нужен только для заголовков, не тащите его начертания для обычного текста статей.

Скрипты, которые сайту не нужны прямо сейчас

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

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

Что делать:

• откройте вкладку «Сеть» в инструментах разработчика браузера и посмотрите, что реально загружается;
• уберите дубли аналитики — обычно достаточно одного счётчика;
• виджеты чатов и видео подгружайте не сразу при открытии страницы, а после её отрисовки или по клику пользователя.

Что чинить первым

Правило простое: сначала то, что весит больше всего и видно на первом экране.

1. Сожмите и переведите в WebP или AVIF картинки, которые видны без прокрутки.
2. Уберите или отложите лишние сторонние скрипты.
3. Ограничьте набор шрифтов и добавьте font-display: swap.
4. Только после этого разбирайтесь с более тонкими вещами вроде кэширования и CDN.

За один такой проход обычно удаётся поднять мобильный балл на 15-30 пунктов без переписывания сайта с нуля — а это уже заметно ускоряет загрузку для реального посетителя с обычным телефоном на мобильном интернете.

Когда это не чинится за 10 минут

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

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

Если после честного прогона по этому списку скорость всё равно не двигается, дело обычно в том, как сайт собран изначально — и это уже вопрос к разработчику, а не к дизайнеру. С таким разбором и переделкой мы как раз работаем.