Скорость сайта — почему она стоит денег и как её поднять

Скорость сайта стоит денег буквально. Рекламу вы оплачиваете за показы или переходы, а не за тех, кто дождался загрузки. Если страница открывается долго, часть людей уходит до первого экрана, и бюджет тратится на тех, кто вас даже не увидел. Поднять скорость часто можно без переделки сайта: сжать изображения, убрать лишние виджеты и скрипты, навести порядок со шрифтами, включить кеширование. Ниже — как измерить скорость честно и что чинить в первую очередь.

Медленный сайт — это потерянные заявки и бюджет

На аудите сайта одной типографии я замерил 14,5 секунды до загрузки. С телефона люди закрывали вкладку раньше, чем видели первый экран. Реклама приводила людей, поиск приводил людей — и всё это работало вхолостую.

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

Есть и второй эффект: Google учитывает скорость при ранжировании. Не так сильно, как содержание страницы, но при прочих равных медленный сайт проигрывает быстрому. Про остальную техническую основу — в статье об SEO-основе сайта.

Как правильно измерить скорость сайта

PageSpeed Insights (pagespeed.web.dev) — бесплатный сервис Google. Он показывает две картины. Первая — данные реальных пользователей Chrome за последние недели, если посещаемость сайта для них достаточная. Вторая — лабораторный замер в одинаковых условиях: он полезен, чтобы сравнивать «до» и «после» правок. Смотрите результаты для мобильных, а не для компьютера. Если данных реальных пользователей нет, значит, посещаемость пока небольшая — тогда ориентируйтесь на лабораторный замер и свой телефон.

Главные показатели там — Core Web Vitals:

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

Цель — зелёная зона по всем трём. Общая оценка в кружке говорит меньше, чем эти показатели по отдельности.

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

Страницы из рекламы. Проверяйте не только главную, а те страницы, на которые ведёт реклама. Именно туда приходят оплаченные переходы.

Что тормозит сайты

Причины почти всегда из одного списка.

• Фото прямо с камеры. Снимок на несколько мегабайт, уменьшенный на странице до размера открытки. Браузер всё равно скачивает его целиком.
• Видео на первом экране. Красиво на компьютере, тяжело на телефоне. Часто его можно заменить постером или запускать по нажатию.
• Виджеты. Онлайн-чат, лента Instagram, всплывающее «перезвоните мне», несколько счётчиков аналитики и рекламных пикселей. У каждого свои скрипты, и все они грузятся вместе с вашей страницей.
• Шрифты. Несколько шрифтов во всех начертаниях там, где хватило бы одного шрифта в обычном и жирном.
• Плагины и тяжёлые темы. На WordPress каждый плагин может добавлять свои скрипты и стили на все страницы, даже там, где он не нужен.
• Слайдеры и анимации. Карусель на первом экране тянет за собой картинки всех слайдов и библиотеку для анимации.
• Хостинг. Дешёвый перегруженный сервер или сервер далеко от ваших клиентов.

Что чинить первым

Порядок, который даёт результат быстрее всего:

1. Изображения. Перевести в WebP или AVIF, отдавать размер под экран, подгружать по мере прокрутки. Обычно это самая тяжёлая часть страницы.
2. Сторонние скрипты. Составить список всех виджетов и счётчиков и для каждого ответить: кто этим пользуется и что это даёт? Лишнее — убрать, нужное — загружать после основного содержимого. Особенно всплывающие окна и чаты: на телефоне они ещё и закрывают первый экран.
3. Первый экран. Убрать видео и слайдер, если они не продают. Главная картинка первого экрана должна грузиться первой, а не в общей очереди.
4. Шрифты. Оставить нужные начертания и разместить файлы у себя, а не тянуть со сторонних сервисов.
5. Кеширование и CDN. Статика отдаётся из кеша и с серверов ближе к посетителю.
6. Платформа. Если после всего этого сайт всё равно медленный, проблема в самой платформе или теме. Тогда честнее пересобрать, чем латать.

Каждый шаг проверяйте замером «до» и «после». Ускорение, которое не видно в цифрах, — не ускорение.

Почему сайт со временем снова тормозит

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

Защищаются от этого тремя вещами. Админка сама сжимает и уменьшает изображения при загрузке — человек не должен об этом думать. Любой новый скрипт проходит через разработчика, а не вставляется в код страницы напрямую. И замер скорости повторяется регулярно, хотя бы раз в квартал, по тем же страницам, что и при запуске.

Как я делаю быстрые сайты с первого дня

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

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

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

Скорость — одна из первых вещей, которые я проверяю на аудите: замер на мобильном и на компьютере входит в него всегда. А если медленная загрузка — лишь одна из причин, почему нет заявок, остальные разобраны в статье «Почему с сайта нет заявок».