Скорость загрузки сайта: как проверить и ускорить за 7 шагов

Скорость загрузки сайта — это не про красивые баллы в отчёте, а про человека с телефоном в руке, который ждёт, пока откроется страница. Если ждать долго, он закроет вкладку и пойдёт к конкуренту. В статье разберём, как проверить скорость бесплатно, как читать отчёт Google и что именно ускорять в первую очередь. Мы в Webman с 2016 года делаем сайты в Казахстане, и проверка скорости входит в приёмку любого проекта.

Первая причина — люди. Большинство посетителей сайтов малого бизнеса приходят с телефона, часто по мобильному интернету и не в самой лучшей зоне покрытия. Страница, которая открывается долго, теряет часть этих людей ещё до первого экрана. Точные потери зависят от ниши и аудитории, поэтому мы не будем называть цифры «в среднем по рынку»: вы можете увидеть их сами в Google Analytics, сравнив долю быстро ушедших посетителей на быстрых и медленных страницах.

Вторая причина — поиск. Google учитывает опыт пользователя на странице, и скорость входит в набор показателей Core Web Vitals. Это не главный фактор ранжирования: релевантный и полезный контент по-прежнему важнее. Но при прочих равных быстрая страница выглядит предпочтительнее, а медленная создаёт лишний повод для ухода.

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

Google измеряет опыт страницы тремя метриками. Пороги «хорошо» опубликованы в документации Google (web.dev):

• LCP (Largest Contentful Paint) — за сколько появляется самый крупный элемент первого экрана: обычно главная картинка или заголовок. Хорошо — до 2,5 секунды.
• INP (Interaction to Next Paint) — как быстро страница реагирует на нажатие: меню, кнопка, форма. Хорошо — до 200 миллисекунд.
• CLS (Cumulative Layout Shift) — насколько «прыгает» вёрстка, пока страница догружается. Хорошо — не больше 0,1.

Запомнить удобнее так: LCP — «как быстро я вижу», INP — «как быстро сайт откликается», CLS — «не прыгает ли контент под пальцем». В жизни это выглядит так: кнопка сместилась в момент нажатия — это CLS, а главная картинка появилась через несколько секунд после текста — это LCP.

Отчёт в сервисе — это модель. Проверьте то же самое руками, как это делает клиент.

1. Возьмите телефон, отключите Wi-Fi и откройте сайт по мобильному интернету.
2. Засеките, через сколько секунд вы увидели первый экран и смогли нажать на кнопку.
3. Откройте сайт из закладок, а потом в режиме инкогнито: разница покажет, помогает ли кеширование.
4. В Google Analytics сравните долю быстро ушедших посетителей по страницам: у самых тяжёлых страниц она обычно выше.
5. Спросите двух знакомых, не связанных с проектом, открыть сайт на их телефонах. Их впечатления ценнее любых цифр.

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

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

В отчёте две вкладки: «Мобильные» и «Компьютеры». Смотрите в первую очередь мобильную. Вверху будут реальные данные пользователей (если у сайта достаточно трафика) и лабораторные данные, снятые в момент проверки. Если реальных данных нет, это нормально для молодого сайта: ориентируйтесь на лабораторные.

Ниже идут «Возможности» и «Диагностика» — готовый список того, что тормозит страницу. Не пытайтесь исправить всё подряд: выберите 2–⁠3 пункта с самым большим ожидаемым эффектом.

Тяжёлые картинки — самая частая причина медленной страницы. Фото с телефона может весить несколько мегабайт, а в блоке на сайте показывается в ширину 400 пикселей.

Что делать:

1. Загружайте картинку в том размере, в котором её показывают, а не оригинал с фотоаппарата.
2. Используйте современные форматы WebP или AVIF вместо тяжёлых PNG и JPG, где это возможно.
3. Для картинок ниже первого экрана включите отложенную загрузку: атрибут loading со значением lazy. Главную картинку первого экрана лениво грузить нельзя — иначе вы сами замедлите LCP.
4. Всегда указывайте ширину и высоту картинки в разметке: тогда браузер заранее резервирует место и вёрстка не прыгает (это лечит CLS).

Каждый подключённый чат, виджет, пиксель и счётчик — это отдельный файл, который нужно скачать и выполнить. Часто на сайте остаются скрипты от сервисов, которыми давно никто не пользуется.

Составьте список всего, что подключено на сайте: аналитика, пиксели рекламы, онлайн-чат, виджеты отзывов, карты, всплывающие окна. Для каждого пункта задайте вопрос: «Кто смотрит данные оттуда?». Если ответа нет, отключайте. Остальное по возможности подключайте после загрузки основного содержимого, а карту и видео — по клику на заглушку.

Если у вас подключён Google Tag Manager, проверьте и его контейнер: старые теги тоже грузятся.

Каждое начертание шрифта — отдельный файл. Если на сайте подключены пять начертаний, а используются два, три лишних вы грузите зря.

• Оставьте 1–⁠2 семейства и 2–⁠3 начертания (обычное, жирное).
• По возможности размещайте файлы шрифтов на своём домене, а не подгружайте с внешних сервисов.
• Подключайте формат WOFF2: он сжат лучше старых форматов.
• Добавьте `font-display: swap`, чтобы текст появлялся сразу системным шрифтом, а потом заменялся на фирменный.

Если сервер отвечает медленно, никакая оптимизация картинок не спасёт. В отчёте PageSpeed это видно по пункту про время ответа сервера.

Что проверить:

1. Расположение сервера. Для аудитории в Казахстане выгоднее сервер ближе к ней, а не на другом континенте.
2. Кеширование. Статичные файлы (картинки, стили, скрипты) должны кешироваться в браузере, чтобы при повторном визите не скачиваться заново.
3. Сжатие. Включите сжатие текстовых файлов (gzip или Brotli) на сервере.
4. Актуальная версия PHP на WordPress-сайтах и плагин кеширования страниц.

Хостинг и домен .kz входят в стоимость сайта у нас в Webman, поэтому мы подбираем и настраиваем это сами. Если сайт делали давно, а хостинг дешёвый и общий на сотни сайтов, причина тормозов часто именно в нём.

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

Задайте себе вопрос по каждому элементу первого экрана: «Что он даёт посетителю?». Фоновое видео редко приводит заявки, а вот время загрузки увеличивает заметно. Замените слайдер одной сильной картинкой с понятным предложением и кнопкой. О том, что должно быть на первом экране, мы писали в статье про главную страницу сайта.

После правок проверьте те же страницы снова и сравните. Ориентируйтесь на изменения, а не на «зелёные» цифры любой ценой: если страница стала грузиться заметно быстрее и не потеряла в содержании, цель достигнута.

Дальше следите регулярно: в Google Search Console есть отчёт «Основные интернет-показатели», где видно, какие группы страниц плохо работают на реальных устройствах. Как пользоваться Search Console, мы рассказывали в отдельной статье.

Закрепите правила для команды: перед добавлением нового скрипта или картинки спрашивайте, не замедлит ли это страницу. Один тяжёлый баннер, добавленный маркетологом, способен свести на нет месяц оптимизации.

• Гнаться за 100 баллами. Баллы — подсказка, а не цель. Важнее реальный опыт посетителя.
• Проверять только компьютер. Мобильная версия почти всегда медленнее.
• Грузить оригиналы фотографий. Картинка на 5 МБ в блоке шириной 400 пикселей.
• Ставить плагины «для ускорения» без понимания. Они могут конфликтовать и ломать вёрстку.
• Делать один замер. Результаты колеблются, смотрите несколько проверок и разные страницы.
• Забывать про сторонние виджеты. Чат и карта могут давать львиную долю задержки.

1. Проверяйте мобильную версию в PageSpeed Insights на ключевых страницах: услуга, товар, форма.
2. Запомните три показателя: LCP до 2,5 с, INP до 200 мс, CLS не больше 0,1.
3. Начните с картинок: размер, формат WebP, отложенная загрузка ниже первого экрана.
4. Уберите ненужные скрипты и лишние шрифты.
5. Проверьте хостинг и кеширование, затем повторите замер.

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