Почему сайт должен работать быстро: Google, PageSpeed и клиенты

Клиент чаще всего открывает ваш сайт с телефона — в дороге, через мобильный интернет. Если страница грузится долго, он не будет ждать: вернётся назад и откроет сайт конкурента. Google это тоже понимает и учитывает удобство страницы, в том числе скорость.

В этой статье простым языком разбираем, почему скорость загрузки сайта так важна, как Google её измеряет и с чего начать.

Почему скорость важна

Для клиента. Быстрый сайт вызывает доверие. Медленная страница, «прыгающие» кнопки и поздно появляющийся текст — повод уйти.
Для Google. Google учитывает удобство страницы, в том числе показатели Core Web Vitals, в своих системах ранжирования. Главным остаётся соответствие контента запросу, но среди похожих страниц преимущество может получить более удобная.
Для рекламы. Если клиент, пришедший с платной рекламы, уходит, не дождавшись загрузки, бюджет на рекламу потрачен впустую.

Core Web Vitals простым языком

Core Web Vitals — три основных показателя, которые Google выбрал для оценки пользовательского опыта.

LCP — когда появляется основной контент

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

INP — как быстро сайт реагирует на действия

Interaction to Next Paint показывает, насколько быстро страница отвечает на нажатие кнопки или открытие меню. Хороший результат — до 200 миллисекунд. С марта 2024 года INP заменил прежний показатель FID.

CLS — не «прыгает» ли страница

Cumulative Layout Shift измеряет, насколько сдвигаются элементы во время загрузки. Если вы читаете текст, а сверху вдруг появляется картинка и всё съезжает вниз, — это плохой CLS. Хороший результат — 0,1 или меньше.

Google оценивает эти показатели по данным реальных пользователей: страница считается хорошей, если порог не превышен как минимум в 75 % посещений.

Что показывает PageSpeed Insights

PageSpeed Insights (pagespeed.web.dev) — бесплатный инструмент Google. Он показывает данные двух типов:

Данные реальных пользователей — статистика, собранная у пользователей Chrome. Если у сайта мало посещений, этот блок может оставаться пустым.
Лабораторный тест (Lighthouse) — страница проверяется в искусственных условиях и получает оценку от 0 до 100. Оценка 90 и выше отмечается зелёным и считается хорошей.

Мобильный тест намеренно имитирует более медленную сеть и телефон среднего уровня. Поэтому мобильная оценка обычно ниже, чем для компьютера, и смотреть стоит именно на неё.

Мобильный интернет

Скорость мобильного интернета зависит от места, времени и оператора. Сайт, который проверяли на компьютере через быстрый офисный Wi-Fi, на телефоне может вести себя совсем иначе. Каждый лишний мегабайт — это ожидание и расход трафика для клиента. Поэтому сайт нужно проектировать в первую очередь под телефон и обычный мобильный интернет.

Google тоже индексирует сайты в основном по мобильной версии (mobile-first indexing): для Google основная версия вашего сайта — мобильная.

Оптимизация изображений

На многих сайтах большая часть веса страницы приходится на изображения. С них и стоит начать:

Современные форматы. Изображение в WebP или AVIF обычно заметно легче, чем в JPEG или PNG.
Правильный размер. Не нужно отправлять на экран телефона снимок шириной 4000 пикселей — отдавайте каждому экрану вариант подходящего размера (srcset).
Отложенная загрузка. Изображения внизу страницы пусть загружаются, когда пользователь до них долистает (lazy loading). Но не применяйте это к главному изображению на первом экране — это ухудшит LCP.
Указывайте размеры. Если у изображения заданы ширина и высота, браузер заранее резервирует место, и страница не «прыгает» (CLS).
Сжатие. Небольшое, незаметное глазу снижение качества заметно уменьшает размер файла.

Другие важные факторы

Лишний JavaScript. Каждая библиотека, виджет и анимация нагружают процессор телефона. Уберите ненужное.
Шрифты. Загружайте шрифты со своего сервера и оставляйте только нужные начертания и наборы символов.
Сторонние скрипты. Виджеты чатов, множество счётчиков аналитики и рекламные коды заметно замедляют страницу.
Сервер и кэш. Сервер должен отвечать быстро, а статические файлы — кэшироваться и раздаваться через CDN.

Как скорость связана с SEO

Скорость — не единственный фактор SEO-продвижения: полезный контент, правильные заголовки и надёжные ссылки по-прежнему на первом месте. Но на позиции в поиске скорость влияет несколькими путями:

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

Как проверить свой сайт

Проверьте свой сайт в pagespeed.web.dev и смотрите на мобильный результат.
Откройте отчёт Core Web Vitals в Google Search Console — он покажет, какие страницы проблемные.
Начните с самых тяжёлых изображений: формат, размер, сжатие.
Уберите лишние плагины, виджеты и скрипты.
Проверьте сайт на реальном телефоне через мобильный интернет.

Об этом сайте

Сайт uflex.uz построен по тем же принципам, с прицелом на 100 баллов в PageSpeed: на публичных страницах нет тяжёлых JavaScript-фреймворков, шрифты загружаются с собственного сервера, а изображения оптимизированы. Если вы заказываете разработку сайта в Узбекистане, закладывайте требования к скорости с самого начала проекта.

Оставьте заявку на сайте UFLEX, если хотите проверить скорость своего сайта или заказать новый быстрый сайт.