Почему скорость сайта убивает ваше SEO

давайте начнём с трёх чисел. 53% мобильных пользователей отказать от веб-сайта, который загружается дольше, чем 3 секунды. задержка на 1 секунду при времени загрузки страницы вызывает 7% сокращение конверсий. и Amazon однажды оценила, что каждая дополнительная секунда времени загрузки будет стоить им $1,6 миллиарда в год в потерянных продажах.

ваш веб-сайт не Amazon. но математика шкалы вниз пропорционально. если ваш сайт зарабатывает €10000/месяц и загружается в 5 секунд вместо 2, вы оставляете примерно €700-1400/месяц на столе. не потому что ваш продукт плохой. не потому что ваш маркетинг неправильный. потому что люди нажали кнопку назад, прежде чем ваша страница завершила загрузку.

скорость не приятно иметь. с 2021 года Google сделал Core Web Vitals фактор ранжирования. медленные сайты ранжируют ниже. и с 2023 года разрыв расширился — собственное исследование Google показывает, что когда время загрузки страницы идёт с 1 секунды на 3 секунды, вероятность отскока увеличивается на 32%.** когда это идёт на 5 секунд, вероятность прыгает на **90%.

Core Web Vitals: три метрики Google на самом деле измеряет

Google не просто измеряет "скорость" как единственное число. они отслеживают три конкретные метрики, и каждый говорит другую историю о опыте вашего пользователя.

LCP (Largest Contentful Paint) — как долго, пока основной контент виден. цель: менее 2,5 секунд. это измеряет, когда самый большой элемент на странице (обычно изображение героев или блок заголовка) заканчивает рендеринг. если ваше изображение героев — это 3MB несжатого JPEG, ваш LCP будет ужасным.

INP (Interaction to Next Paint) — как быстро ваша страница отвечает на щелчки, касания и ввод клавиатуры. цель: менее 200 миллисекунд. это заменило FID (первая задержка ввода) в марте 2024 года. это измеряет полную задержку между действием пользователя и визуальным ответом. тяжелые фреймворки JavaScript и сторонние скрипты обычно виновны.

CLS (Cumulative Layout Shift) — сколько страница прыгает вокруг при загрузке. цель: менее 0.1. вы знаете опыт: вы собираетесь нажать ссылку и объявление загружается выше него, толкая всё вниз. это смещение макета. это раздражает и Google штрафует это.

как проверить вашу текущую скорость

прежде чем вы что-нибудь исправляете, измерьте. есть два свободных инструмента, которые вы должны использовать:

Google PageSpeed Insights (pagespeed.web.dev) — введите ваш URL и он даёт вам оценки для мобильных и рабочего стола, плюс конкретные рекомендации. обратите внимание на раздел "Opportunities" — он говорит вам точно то, что замедляет вас и оценивает время экономии.

Google Search Console — под "Core Web Vitals" в меню слева, вы'll видеть, сколько ваших страниц пройти или не пройти пороги Google. это использует реальные данные пользователя из браузеров Chrome, поэтому он отражает фактический опыт посетителя, не лабораторный тест.

оценка 90+ на PageSpeed Insights — хорошо. 50-89 требует работы. ниже 50 означает, что вы активно теряете клиентов и позиции ранжирования.

исправления, которые делают наибольшее различие

вот оптимизации ранжированы по влиянию. начните с верху.

1. оптимизируйте ваши изображения (самый большой выигрыш для большинства сайтов)

изображения обычно 50-70% от общего веса страницы. исправление прямолинейно:

• преобразовать изображения в WebP или AVIF формат. WebP на 25-35% меньше, чем JPEG на одинаковом качестве. AVIF на 50% меньше.
• размер изображения на размеры, фактически отображаемые. если ваше изображение отображается на 700px шириной, не загружайте оригинал 4000px. измените размер на 1400px (для сетчатой) и позвольте браузеру справиться с остальным.
• используйте ленивую загрузку для изображений ниже складки. добавить loading="lazy" на любое изображение не видно на первоначальном экране. это означает, что браузер загружает изображение только когда пользователь прокручивает близко к нему.
• используйте отзывчивые изображения с атрибутом srcset, чтобы мобильные пользователи загружали меньше файлы, чем пользователи рабочего стола.

для большинства веб-сайтов оптимизация изображения один улучшает LCP на 1-3 секунды.

2. снизить JavaScript

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

• удалить скрипты, которые вы не используете. что-то виджет обмена в социальных сетях, никто не нажимает? инструмент аналитики, который вы установили и забыли? виджет чата, который загружает 400KB кода? аудит ваших скриптов и удалить что-то неэффективное.
• отложить некритичные скрипты. добавить defer или async для тегов скрипта, которые не требуются для первоначального рендеринга страницы. аналитика, виджеты чата и социальные скрипты могут все загружаться после видимой страницы.
• используйте современный фреймворк мудро. React, Next.js и подобные фреймворки могут быть быстрыми — но только если вы используете рендеринг на стороне сервера и разделение кода. неправильно настроенное приложение React может отправить 500KB+ JavaScript браузеру перед чем-либо рендер.

3. используйте CDN (сеть доставки контента)

CDN хранит копии вашего веб-сайта на серверах по всему миру. когда пользователь в Токио посещает ваш сайт, размещённый в Барселоне, CDN служит странице из сервера в Токио — сокращая время загрузки на 50-70%.

популярные опции CDN: Cloudflare (бесплатный уровень отличный), AWS CloudFront, Bunny.net. установка занимает 15-30 минут для большинства веб-сайтов.

4. включить кэширование браузера

когда кто-то посещает ваш сайт впервые, их браузер загружает всё: HTML, CSS, JavaScript, изображения. кэширование говорит браузеру, чтобы сохранить эти файлы локально, чтобы повторные посещения загружались почти мгновенно.

установить заголовки кэша на хранилище статические активы (изображения, CSS, шрифты) по крайней мере 30 дней. динамический контент (HTML) должен иметь более короткое время кэша — несколько часов или дня.

5. минимизировать CSS и HTML

удалить неиспользуемые правила CSS (большинство сайтов имеют 30-50% неиспользуемый CSS), минимизировать вашу таблицы стилей и встроил критическую CSS, чтобы браузер мог отрендерить структуру страницы немедленно.

инструменты как PurgeCSS или вкладка Coverage в Chrome DevTools покажут вам точно какие правила CSS неиспользованы на каждой странице.

6. исправление смещения макета (CLS)

смещение макета обычно происходит из трёх источников:

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

мобильный разрыв скорости

большинство людей проверяют скорость их веб-сайта на своём рабочем компьютере с быстрым интернет-соединением. но 60% веб-трафика это мобильный, и мобильные скорости кардинально медленнее.

тест скорости Google использует имитированное мобильное соединение регулируемое примерно на 4G скорости. что загружается в 1.5 секунд на вашем рабочем столе может занять 6 секунд на телефоне. и помните — 53% мобильных посетителей оставить если это занимает больше 3 секунд.

всегда тест мобильной скорости конкретно. ваш мобильный счёт на PageSpeed Insights — это то, что имеет значение больше всего для SEO.

скорость и поиск AI

вот что-то большинство людей не рассматривали: скорость страницы косвенно влияет на вашу видимость в поиске AI слишком. Perplexity, Google AI Overviews и Bing Copilot все благоприятствуют источникам, которые загружают быстро и имеют чистый HTML. когда AI краулер попадает на ваш сайт и требует 8 секунд для рендеринга из-за JavaScript-тяжёлого рендеринга, краулер может не ждать — и вы не будете процитированы.

чистый, быстрый, сервер-рендеренный HTML легче для оба краулеры поисковой машины и системы AI для анализа. улучшения скорости помогают везде.

реалистичный план улучшения скорости

вам не нужно делать всё сразу. вот 4-недельный план:

неделя 1: запустить PageSpeed Insights на ваших 5 наиболее важных страницах. преобразовать все изображения в WebP и добавить ленивую загрузку на изображения ниже складки.

неделя 2: аудит ваш JavaScript. удалить неиспользуемые скрипты, отложить некритичные. установить бесплатный CDN Cloudflare.

неделя 3: добавить явную ширину/высоту на все изображения. исправление загрузки шрифта. зарезервировать пространство для динамических элементов.

неделя 4: включить кэширование браузера. минимизировать CSS. перепроверить все 5 страниц и сравнить с базовой линией недели 1.

большинство компаний, которые следуют этому плану, видят 40-60% улучшение во время загрузки в течение месяца. это обычно означает 1-2 секунды быстрее, которые прямо переводиться на больше посетителей пребывание, больше просмотров страницы и больше конверсий. для жёстких данных позади этих утверждений — включая проверённые примеры из Vodafone, Google, Pinterest и Walmart — см. скорость сайта и доход: данные из 6 компаний.

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

нужна помощь при диагностировании проблемы скорости? мы проверяем веб-сайты на узкие места производительности и внедрить исправления — из оптимизации изображения к полных улучшений архитектуры. Мы внедряем эти улучшения в масштабе через наш сервис разработки программного обеспечения на заказ.