Ускорение сайта по Google PageSpeed Insights

Google PageSpeed Insights — не просто инструмент для отчётности. Это сигнал: если сайт грузится медленно, поисковики ранжируют его ниже. А пользователи уходят раньше, чем увидят кнопку «Заказать».

Что влияет на скорость и что я с этим делаю

Запускаю PageSpeed-аудит, разбираю отчёт по каждому пункту и устраняю причины, а не симптомы.

Блокирующие ресурсы — главный враг LCP

Большинство сайтов загружают CSS и JavaScript в заголовке страницы. Браузер останавливается и ждёт, пока скачаются и выполнятся все скрипты — только потом рисует страницу. Переношу некритичные файлы на отложенную загрузку (defer, async), вытаскиваю критичный CSS в inline-блок, убираю загрузку лишних стилей там, где они не нужны.

Изображения без оптимизации съедают трафик

Типичная картина: портретная фотография весит 800 КиБ, а отображается в блоке 200×200 пикселей. Конвертирую изображения в WebP — формат, который браузеры поддерживают с 2020 года и который даёт 60–80% экономию по весу. Добавляю атрибуты width и height, чтобы браузер заранее резервировал место и не двигал контент при загрузке (это CLS). Картинки ниже первого экрана получают loading="lazy" — загружаются только когда пользователь до них доскроллил.

LCP-элемент нужно предзагружать

LCP (Largest Contentful Paint) — это время появления самого крупного элемента на экране: обычно это фоновое изображение или главный баннер. Если оно загружается через CSS, браузер обнаруживает его поздно. Добавляю <link rel="preload"> в заголовок страницы — браузер начинает качать изображение сразу, не дожидаясь парсинга стилей.

Кеш — бесплатное ускорение для повторных визитов

Если у статических файлов не настроен кеш, браузер скачивает их заново при каждом посещении. Настраиваю на сервере заголовки Cache-Control с долгим сроком хранения для изображений, CSS и JS. Пользователь заходит второй раз — страница открывается почти мгновенно из локального кеша.

Сжатие gzip и Brotli

HTML, CSS и JavaScript хорошо сжимаются: файл в 100 КиБ после сжатия занимает 20–30 КиБ. Проверяю и настраиваю сжатие на уровне nginx или Apache — это снижает объём трафика в 3–5 раз без каких-либо изменений в коде.

Сторонние скрипты

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

Что получаете в итоге

• Отчёт PageSpeed до и после — с цифрами по каждому показателю
• LCP ниже 2,5 секунды — зелёный показатель вместо красного
• Меньший объём страницы — экономия трафика для мобильных
• Лучшие позиции в поиске: скорость — один из факторов ранжирования в Google и Яндексе
• Меньше отказов: каждая секунда задержки снижает конверсию на 7–12%

Работаю с любым стеком: PHP, WordPress, 1С-Битрикс, самописные сайты, nginx, Apache. Если причина медленной загрузки — в коде или базе данных, разберу и это.