Полный SEO-гайд по скорости и видимости в поиске

Как скорость загрузки страниц влияет на позиции и конверсию

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

Особенно важны показатели Core Web Vitals. Они напрямую связаны с восприятием скорости и удобства:

• LCP показывает, как быстро загружается основной видимый блок: баннер, изображение товара, заголовок или карточка услуги;
• INP оценивает реакцию страницы на действия пользователя: клик по кнопке, открытие меню, ввод данных в форму;
• CLS фиксирует сдвиги элементов, из-за которых посетитель промахивается по кнопке или теряет фокус при чтении.

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

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

Скорость также влияет на краулинговый бюджет. Если сервер и страницы отвечают быстро, поисковый робот успевает просканировать больше URL за один обход. Это ускоряет индексацию новых товаров, статей, посадочных страниц и обновлённых цен.

2 месяца SEO продвижения в подарок

Закажите у нас разработку сайта и сэкономьте 2 месяца SEO продвижения, потому как мы сразу проводим базовую SEO оптимизацию.

Заказать

Выбор правильного формата: WebP, AVIF, JPEG, PNG и SVG

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

• WebP — базовый выбор для большинства сайтов. Формат хорошо сжимает фотографии и иллюстрации, поддерживает прозрачность и анимацию. Часто дает файл на 25–35% меньше JPEG при сопоставимом качестве.
• AVIF — вариант для максимального сжатия. Подходит для крупных фото, баннеров, карточек товаров и обложек статей. Может быть заметно легче WebP, но требует проверки совместимости и скорости кодирования на стороне CMS.
• JPEG — рабочий формат для фотографий, если нужна широкая поддержка и простая обработка. Используйте прогрессивный JPEG и качество в диапазоне 70–85, чтобы сохранить детализацию без лишнего веса.
• PNG — нужен там, где важна прозрачность без потерь: логотипы, интерфейсные элементы, скриншоты с текстом. Для обычных фотографий PNG почти всегда слишком тяжелый.
• SVG — лучший выбор для иконок, логотипов, схем и простых векторных иллюстраций. Файл масштабируется без размытия и обычно весит меньше растровых аналогов.

Практичная схема внедрения: отдавайте AVIF для современных браузеров, WebP как запасной современный вариант, JPEG или PNG — как fallback. Для этого используйте тег picture с несколькими источниками:

• для фото: AVIF → WebP → JPEG;
• для прозрачной графики: WebP → PNG;
• для иконок и логотипов: SVG без растровых копий, если нет сложных эффектов;
• для скриншотов интерфейса: PNG или WebP lossless.

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

Сжатие без потери качества: инструменты и лучшие настройки

Для графики, где важна резкость деталей, используйте lossless-сжатие: оно удаляет лишние метаданные, оптимизирует таблицы кодирования и палитру, но не меняет пиксели. Такой подход подходит для логотипов, иконок, скриншотов интерфейсов, схем, PNG с прозрачностью и изображений, которые могут повторно редактироваться.

Рабочие инструменты для сжатия:

• Squoosh — удобен для ручной проверки: показывает исходный и итоговый вес, позволяет сравнить результат до публикации.
• TinyPNG — хорошо уменьшает PNG и WebP, подходит для быстрой пакетной обработки небольших наборов файлов.
• ImageOptim — вариант для macOS, удаляет EXIF, цветовые профили и служебные данные без ухудшения картинки.
• Oxipng — эффективен для PNG, можно подключить в CI/CD или npm-скрипты.
• jpegoptim — подходит для JPEG, если нужно убрать метаданные и сохранить визуальную идентичность файла.
• SVGO — обязательный инструмент для SVG: удаляет комментарии, скрытые слои, лишние атрибуты и мусор из редакторов.

Оптимальные настройки зависят от формата. Для PNG используйте Oxipng с уровнем -o 4 или -o 6: это дает хорошее сжатие без слишком долгой обработки. Для JPEG применяйте jpegoptim --strip-all --all-progressive, чтобы удалить метаданные и включить прогрессивную загрузку. Для SVG запускайте SVGO с включенным удалением metadata, comments, hiddenElems и unusedNS.

Перед загрузкой на сайт удаляйте EXIF-данные: координаты съемки, модель камеры, дату, миниатюры. Эти данные часто добавляют 50–300 КБ к файлу и не нужны пользователю. Исключение — фотопортфолио, где технические параметры снимка имеют ценность.

После сжатия проверяйте результат в браузере, а не только в редакторе. Особое внимание уделяйте мелкому тексту на скриншотах, границам иконок, прозрачным областям PNG и SVG после очистки.

Размеры, адаптивность и lazy loading для быстрой отрисовки

Браузер быстрее показывает страницу, когда заранее знает, сколько места займет картинка. Поэтому для каждого изображения стоит задавать атрибуты width и height или фиксировать соотношение сторон через CSS. Это снижает CLS: текст, кнопки и карточки не «прыгают» после загрузки медиафайлов.

Размер файла должен соответствовать реальному месту в макете. Если в карточке товара изображение выводится шириной 320 px, нет смысла отдавать файл 1600 px. Для Retina-экранов достаточно подготовить варианты x1 и x2, а выбор передать браузеру через srcset и sizes.

• Для иконок и простых иллюстраций используйте SVG, если нет сложных растровых эффектов.
• Для фотографий применяйте WebP или AVIF, оставляя JPEG/PNG как резервный вариант.
• Для баннеров готовьте отдельные версии под desktop, tablet и mobile, а не масштабируйте один тяжелый файл.
• Для изображений выше первого экрана задавайте приоритет загрузки, например fetchpriority="high" для главного hero-изображения.

Адаптивная выдача особенно важна на мобильном трафике. Пользователь со смартфона не должен скачивать десктопный баннер весом 800 КБ, если в видимой области нужен вариант на 120–180 КБ. Это напрямую влияет на LCP: главный визуальный элемент появляется раньше, а страница быстрее становится полезной.

Lazy loading применяйте к изображениям, которые находятся ниже первого экрана: loading="lazy" откладывает их загрузку до приближения к зоне просмотра. Но не ставьте ленивую загрузку на логотип, первый экран, главное изображение статьи или товара — это ухудшит скорость первичной отрисовки.

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

SEO-атрибуты изображений: alt, title, имена файлов и подписи

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

• Alt описывает содержимое изображения для поисковых роботов и пользователей со скринридерами. Пишите конкретно: «деревянный обеденный стол на шесть персон», а не «картинка» или «фото». Если изображение функциональное, например кнопка, alt должен объяснять действие: «скачать прайс-лист PDF».
• Title можно использовать как дополнительную подсказку при наведении курсора, но он не заменяет alt. Не копируйте в него тот же текст автоматически. Лучше добавить уточнение: материал, модель, год, формат, назначение.
• Имя файла должно быть читаемым до загрузки на сайт. Вместо IMG_4821.jpg используйте translit или латиницу с дефисами: kuhnya-s-mramornoj-stoleshnicej.jpg. Не набивайте имя файла ключами; достаточно 3–6 слов по сути изображения.
• Подпись под изображением нужна там, где она помогает принять решение: у товаров, схем, сравнений, инструкций, кейсов. В подписи можно указать параметр, цену, размер, этап работ или результат.

Для одной страницы задавайте уникальные alt и имена файлов, особенно если на ней несколько похожих изображений. Например, для карточки товара разделяйте ракурсы: fasad, sboku, v-interere, detal-furnitury. Так поисковику проще сопоставить каждое изображение с конкретным фрагментом контента, а пользователю — быстрее понять, что он видит.

Скидка 5000 рублей на SEO продвижение

Дарим скидку 5000 рублей на SEO продвижение сайта. Акция действует до конца октября.

Заказать SEO

Проверка результата: метрики, сервисы и типичные ошибки

После сжатия и смены форматов проверьте не только вес файлов, но и влияние на загрузку страницы. Ориентируйтесь на реальные метрики, а не на субъективное «стало быстрее». В первую очередь смотрите LCP: если самый крупный баннер или карточка товара загружается дольше 2,5 секунды, изображение всё ещё требует доработки. Для CLS контролируйте наличие атрибутов width и height, чтобы блоки не прыгали при отрисовке.

• PageSpeed Insights — показывает LCP, CLS, INP, даёт список тяжёлых изображений и рекомендации по WebP/AVIF.
• Lighthouse в Chrome DevTools — удобен для проверки конкретной страницы после правок.
• WebPageTest — помогает увидеть водопад загрузки, TTFB, порядок подключения ресурсов и задержки CDN.
• Search Console — фиксирует проблемы Core Web Vitals по группам URL, а не по одной странице.
• Screaming Frog — находит изображения без alt, файлы большого размера, битые URL и дубли.

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

• Загрузка оригинала 3000×2000 вместо нужных 600×400.
• Использование PNG для фотографий, где достаточно WebP или JPEG.
• Отсутствие srcset и sizes для адаптивных экранов.
• Ленивая загрузка первого экрана, из-за чего ухудшается LCP.
• Слишком сильное сжатие, заметные артефакты на товарных фото.
• Кэширование не настроено: браузер повторно скачивает те же файлы.

После исправлений сравните показатели до и после: вес страницы, количество запросов, LCP, CLS, объём переданных данных и позиции проблемных URL в Search Console.