Мобильный трафик в 2026 году превышает десктопный в большинстве ниш. Если сайт медленно загружается на смартфонах — вы теряете больше половины аудитории. Google и Яндекс используют мобильную версию как основную для ранжирования. В этой статье — 10 приёмов, которые ускоряют загрузку сайта на мобильных без потери функциональности.
Почему мобильная скорость важна
Три причины.
Mobile-first индексация. Google и Яндекс ранжируют сайт по мобильной версии. Если она медленная — позиции падают.
Core Web Vitals. LCP, INP, CLS измеряются на мобильных устройствах. Медленная загрузка ухудшает эти метрики.
Конверсия. Каждая дополнительная секунда загрузки снижает конверсию на 7-20% на мобильных.
Проверить текущую скорость можно через проверку TTFB и SEO-аудит SerpMax.
Приём 1. Адаптивные изображения через srcset
Изображения — самая тяжёлая часть мобильных страниц. Если вы отдаёте одно и то же изображение на десктоп и смартфон — мобильный пользователь скачивает лишние мегабайты.
Решение: атрибут srcset с несколькими версиями изображения. Браузер сам выберет подходящий размер.
<img src="image-800.jpg" srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w" sizes="(max-width: 600px) 400px, 800px" alt="...">
Проверить формат изображений можно через проверку формата изображений.
Приём 2. Ленивая загрузка изображений
Изображения ниже первого экрана не должны загружаться сразу. Атрибут loading="lazy" откладывает загрузку до момента, когда пользователь доскроллит до изображения.
<img src="image.jpg" loading="lazy" alt="...">
Важно: не применяйте lazy load к изображениям первого экрана — это ухудшит LCP. Проверить, какие изображения без lazy load, можно через проверку ленивой загрузки.
Приём 3. Оптимизация шрифтов
Шрифты блокируют рендеринг текста. Если шрифт грузится долго — пользователь видит пустой экран.
Что делать:
— использовать font-display: swap — текст отображается сразу системным шрифтом, потом заменяется на кастомный;
— подключить только нужные начертания;
— использовать WOFF2 вместо WOFF и TTF;
— предзагрузить критичные шрифты через rel="preload".
О способах — в статье Ускорение загрузки шрифтов.
Приём 4. Критический CSS в HTML
CSS блокирует рендеринг: пока браузер не загрузит все стили, страница не отобразится. Критический CSS — это стили для первого экрана, которые можно встроить прямо в HTML.
Что делать:
— выделить критический CSS (стили для видимой части страницы);
— встроить его в <style> в <head>;
— остальной CSS загрузить асинхронно.
Проверить встроенный CSS можно через проверку встроенного CSS.
Приём 5. Отложить некритичный JavaScript
JavaScript блокирует парсинг HTML. Скрипты аналитики, чатов, виджетов не нужны для первого рендера — их нужно загружать отложенно.
Атрибуты:
defer — скрипт выполнится после парсинга HTML;
async — скрипт выполнится параллельно, как только загрузится.
Проверить скрипты без defer можно через проверку JavaScript defer. О способах — в статье JavaScript defer и async.
Приём 6. Уменьшить размер DOM
Большой DOM замедляет рендеринг. На мобильных устройствах с ограниченными ресурсами это особенно заметно.
Что делать:
— упростить структуру HTML;
— убрать лишние обёртки;
— использовать семантические теги.
Проверить размер DOM можно через проверку размера DOM.
Приём 7. Оптимизировать viewport
Meta viewport определяет, как страница масштабируется на мобильных. Если viewport настроен неправильно — страница может отображаться некорректно, что ухудшает пользовательский опыт.
Правильный viewport:
<meta name="viewport" content="width=device-width, initial-scale=1">
Проверить viewport можно через проверку meta viewport.
Приём 8. Использовать WebP или AVIF
Форматы WebP и AVIF легче JPEG и PNG на 30-50% при том же качестве. Для мобильных, где важен каждый килобайт, это критично.
Что делать:
— конвертировать изображения в WebP или AVIF;
— использовать <picture> с fallback на JPEG для старых браузеров.
О способах — в статье Оптимизация изображений.
Приём 9. Включить сжатие на сервере
Gzip или Brotli уменьшают размер передаваемых данных в 2-5 раз. Для мобильных сетей это существенно.
Проверить сжатие можно через проверку сжатия сервера.
Приём 10. Подключить CDN
CDN раздаёт статические ресурсы с ближайшего к пользователю сервера. Для мобильных пользователей, которые часто в движении и меняют сети, это ускоряет загрузку.
О выборе CDN — в статье Кеширование и CDN.
Как измерить результат
После каждого изменения проверяйте:
TTFB — через проверку TTFB.
Размер страницы — через проверку размера страницы.
Core Web Vitals — через SEO-аудит SerpMax.
Целевые значения для мобильных: LCP до 2,5 секунд, INP до 200 мс, CLS до 0,1.
Часто задаваемые вопросы
Почему сайт медленно грузится на телефоне, но быстро на компьютере?
Причины: изображения не адаптированы под мобильные, шрифты грузятся долго, CSS и JS блокируют рендеринг, нет lazy load. Проверьте каждый пункт из этой статьи.
Как проверить скорость сайта на мобильных?
Через SEO-аудит SerpMax — он показывает Core Web Vitals для мобильных. Или через Chrome DevTools → Lighthouse с режимом Mobile.
Что важнее для мобильных: TTFB или размер страницы?
Оба важны. TTFB влияет на начало загрузки, размер — на её продолжительность. Для мобильных сетей критичны оба параметра.
Нужен ли AMP в 2026 году?
AMP потерял популярность. Google больше не требует AMP для новостей. Вместо AMP лучше оптимизировать основную версию сайта. О способах — в статье Ускорение мобильной версии.
Как часто нужно проверять мобильную скорость?
Раз в месяц, а также после обновления CMS, установки новых плагинов, добавления изображений или скриптов.
Можно ли ускорить мобильную версию без программиста?
Да. Установите плагин оптимизации, включите сжатие на сервере, конвертируйте изображения в WebP, включите lazy load. Это закроет 80% задач.
Влияет ли мобильная скорость на позиции?
Да. Google и Яндекс используют мобильную версию как основную для ранжирования. Медленная мобильная версия = низкие позиции.
