Как ускорить сайт: изображения, шрифты, скрипты

Чтобы ускорить сайт, сначала измерьте скорость в PageSpeed Insights и Search Console, найдите самые большие причины торможения и исправляйте их по очереди. Чаще всего это тяжелые изображения, лишние шрифты, сторонние скрипты и медленный ответ сервера. После каждого изменения замеряйте результат еще раз, чтобы увидеть, что именно помогло.

Коротко

• Начинайте с измерения: показатели LCP, INP и CLS и реальные данные пользователей важнее оценки 100 в лабораторном тесте.
• Изображения: современные форматы, размер под место на экране, ленивая загрузка ниже первого экрана.
• Шрифты: одно-два семейства, несколько начертаний, формат WOFF2 и правильное поведение во время загрузки.
• Скрипты: убрать лишние теги, остальные отложить или загружать после взаимодействия.
• Сервер: кеширование страниц, CDN для статических файлов, актуальная версия PHP или платформа с быстрым откликом.
• Мобильную версию проверяют на среднем телефоне и медленной сети.

Что измерять и как читать отчет

Google оценивает опыт посетителя по трем показателям, которые называют Core Web Vitals.

Оценка опирается на реальные визиты (75-й процентиль) отдельно для телефонов и компьютеров. PageSpeed Insights показывает два типа данных: полевые, собранные от настоящих посетителей, и лабораторные, полученные имитацией в Lighthouse. Лабораторный тест удобен для поиска причин, полевые данные показывают реальный опыт. В Search Console есть отчет Core Web Vitals, который группирует страницы по состоянию.

Проверяйте типовые страницы: главную, категорию, карточку товара или услуги и страницу с формой. Начинайте с мобильной версии, потому что именно на ней проблемы заметнее. Запишите базовые значения, чтобы сравнивать результат после изменений.

Изображения

Изображения часто составляют большую часть веса страницы, поэтому начинать стоит с них.

Размер и формат

• Размер файла соответствует месту на экране: фото шириной 4000 пикселей в блоке шириной 800 пикселей загружает лишние данные.
• Сжатие без заметной потери качества; современные форматы WebP и AVIF обычно легче JPEG.
• Адаптивные изображения (атрибуты srcset и sizes) отдают телефону меньшую картинку.
• Логотипы и иконки удобно делать в формате SVG.
• Для видео используют постер и загрузку по нажатию.

Загрузка и стабильность макета

• Изображения ниже первого экрана загружаются лениво (атрибут loading).
• Главное изображение первого экрана откладывать не стоит: его загружают с приоритетом (атрибут fetchpriority).
• Указанные ширина и высота изображения резервируют место, и страница не прыгает во время загрузки (это снижает CLS).
• В слайдере приоритет имеет только первый слайд.

Изображения в CMS и магазине

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

Видео и фоновые анимации

Видео на первом экране требует осторожности: оно часто становится самым тяжелым элементом страницы. Используйте сжатое видео с постером, отключайте автозапуск на телефонах и заменяйте анимированный фон статичным изображением, если эффект не приносит пользы.

Шрифты

Каждый файл шрифта – это дополнительный запрос, поэтому набор нужно ограничить.

• Достаточно одного-двух семейств и двух-трех начертаний (ориентир для большинства сайтов).
• Используйте формат WOFF2 и подмножества символов: кириллица и латиница без лишних языков.
• Переменные шрифты могут заменить несколько файлов одним.
• Правило font-display: swap показывает текст системным шрифтом, пока загружается основной; для главного шрифта полезна упреждающая загрузка (preload).
• Собственное размещение шрифтов убирает запрос к стороннему серверу.
• Резервный шрифт подбирают со схожими пропорциями, чтобы текст не прыгал после подмены.
• Шрифты-иконки заменяют SVG-иконками.

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

Скрипты конкурируют с отображением страницы за ресурсы браузера; тяжелые скрипты ухудшают реакцию на действия пользователя (INP).

Составьте перечень всех скриптов: во вкладке Network инструментов разработчика, в отчете PageSpeed Insights и в контейнере Tag Manager. Для каждого задайте вопрос: какое решение зависит от этих данных?

• Атрибуты defer и async позволяют загружать скрипт, не блокируя показ страницы.
• Тяжелые виджеты (чат, отзывы, карты) подключают после взаимодействия или после основной загрузки.
• Аналитика и рекламные теги остаются там, где они помогают принимать решения; скрипты, которыми никто не пользуется, убирают.

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

1. Измерьте страницу со всеми скриптами и запишите показатели.
2. Временно отключите один тег или виджет, например в режиме просмотра Tag Manager.
3. Повторите измерение на той же странице в тех же условиях.
4. Сравните разницу с пользой, которую этот инструмент приносит бизнесу.
5. Оставьте скрипт, оптимизируйте его загрузку или удалите.

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

Сервер, кеш и стили

Даже идеально сжатые изображения не помогут, если сервер отвечает медленно. Время ответа сервера (TTFB) зависит от хостинга, версии PHP, кеширования и оптимизации базы данных.

• Кеш страниц отдает готовый HTML без полной обработки запроса на каждый визит.
• CDN размещает статические файлы ближе к посетителям, что полезно для аудитории из разных регионов.
• Сжатие Brotli или Gzip и протоколы HTTP/2 или HTTP/3 уменьшают объем данных и количество запросов.
• В стилях убирают неиспользуемый код, а критичные правила первого экрана иногда встраивают в страницу.
• На WordPress помогают качественный хостинг, кеширование и умеренное количество плагинов; на SaaS-платформах (например, Хорошоп) основные рычаги – изображения, блоки дизайна и подключенные приложения.

Кеш браузера и база данных

Кеш браузера позволяет повторным посетителям не загружать статические файлы заново. Для этого файлам стилей, скриптов, изображений и шрифтов задают длительный срок хранения; при обновлении меняют версию имени файла. На WordPress дополнительно помогает очистка старых ревизий, временных записей и неиспользуемых таблиц в базе данных, потому что большая база замедляет ответ сервера. Проверяйте также, не работают ли одновременно несколько плагинов кеширования, так как они могут конфликтовать.

План работ: от измерения до контроля

1. Измерьте мобильные показатели ключевых страниц и запишите базовые значения.
2. Исправьте изображения: размер, формат, ленивая загрузка, атрибуты размеров.
3. Сократите набор шрифтов и настройте их загрузку.
4. Проведите аудит скриптов и уберите лишнее.
5. Настройте кеш, проверьте хостинг и при необходимости подключите CDN.
6. Повторите замеры и сравните с базовыми значениями.
7. Поставьте контроль в календарь: раз в месяц просматривайте отчет Search Console и несколько страниц в PageSpeed Insights.

Типичные ошибки

• Погоня за оценкой 100. Ориентиром служат Core Web Vitals в полевых данных и реальное удобство.
• Оригиналы фото на сайте. Файлы с камеры часто весят в разы больше, чем нужно для экрана.
• Ленивая загрузка главного изображения. Она задерживает показ первого экрана.
• Слишком много шрифтов и начертаний. Каждый дополнительный файл увеличивает нагрузку.
• Нагромождение тегов. Старые пиксельные теги и виджеты остаются годами.
• Тестирование только на мощном компьютере. Покупатели пользуются телефонами со средними характеристиками.
• Оптимизация без повторного измерения. Без сравнения неизвестно, что именно помогло.

Вопросы и ответы

Какую оценку PageSpeed считать достаточной?

Единого числа нет. Оценка в лабораторном тесте колеблется в зависимости от условий. Ориентируйтесь на статус Core Web Vitals в полевых данных и на скорость работы ключевых страниц на реальных телефонах.

Влияет ли скорость на позиции в Google?

Google учитывает опыт страницы, в том числе Core Web Vitals, но релевантность контента остается главным фактором. Быстрый сайт также удобнее для людей и обычно лучше превращает посетителей в заявки.

Почему тест каждый раз показывает разный результат?

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

Нужна ли CDN?

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

Стоит ли убирать аналитику и пиксель ради скорости?

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

Вывод

Скорость сайта складывается из нескольких причин, и каждую можно исправить отдельно: вес изображений, количество шрифтов, сторонние скрипты, кеш и ответ сервера. Работайте по плану: замеряйте, меняйте одну группу вещей, замеряйте еще раз и записывайте результат. Так скорость растет постепенно и остается под контролем. Ежемесячный просмотр отчетов поможет заметить возвращение проблем после обновлений, новых виджетов или тяжелых изображений, пока они не повлияли на заявки. Если нужна помощь, LightSEO может помочь с техническим разбором в рамках SEO-аудита сайта и с построением легкого сайта на шаблоне.

Читайте также

• Многоязычный сайт: UX и SEO – структура URL, hreflang, переключатель языков
• Страница 404: как сделать её полезной – дизайн, текст и код ответа
• Контент для нового сайта: тексты, фото, структура – что подготовить