Как ускорить сайт: план из 12 шагов для владельца без программиста
Как ускорить загрузку сайта своими силами: где замерить скорость, что тормозит страницу, что чинить первым и когда пора менять хостинг или уходить с Тильды.
Эдуард Хакимов, маркетолог, сооснователь EdMax Опубликовано Обновлено 8 минут чтения
Коротко
Сначала замер: PageSpeed Insights, отчёт Метрики и Вебмастер, отдельно для телефона. Больше всего секунд обычно съедают тяжёлые картинки, чужие скрипты и шрифты: их можно поправить без переделки сайта. Хостинг и кэш — следующий шаг. После каждой правки замер повторяют тем же способом, иначе не понять, что сработало.
Медленная загрузка сайта съедает заявки: люди с телефона закрывают вкладку, не дождавшись первого экрана, а оплаченные клики из рекламы пропадают зря. Разобраться, как ускорить сайт, помогает замер скорости, и первый замер владелец делает сам за вечер. Ниже 12 шагов в том порядке, в котором мы проходим их сами: от проверки скорости до правок, которые дают больше всего секунд.
Шаги 1–3 и 12 владелец делает сам за вечер. Шаги 4–6 часто тоже. Шаги 7–11 требуют доступа к коду или серверу, и на них стоит звать разработчика или заказать ускорение сайта у студии.
Шаги 1–3: замерьте скорость до любых правок
Без замера «до» вы не узнаете, помогла ли правка. Три бесплатных инструмента закрывают почти все вопросы.
Шаг 1. PageSpeed Insights. Откройте pagespeed.web.dev, вставьте адрес главной и двух-трёх страниц, куда приходит больше всего людей: страница услуги, карточка товара, статья. Смотрите вкладку «Мобильный телефон». Итоговый балл делится на три зоны: 90 и выше — хорошо, 50–89 — есть что улучшить, ниже 50 — плохо (справка Google о PageSpeed Insights).
Шаг 2. Три главные метрики Core Web Vitals. Балл — это сводка. Важнее три цифры под ним, их Google называет Core Web Vitals:
| Метрика | Что показывает простыми словами | Хорошо |
|---|---|---|
| LCP | За сколько появляется главное на первом экране: заголовок, фото, баннер | до 2,5 с |
| INP | Как быстро страница откликается на нажатие кнопки или меню | до 200 мс |
| CLS | Насколько «прыгает» вёрстка, пока грузится страница | до 0,1 |
Пороги взяты из описания Core Web Vitals на web.dev. Там же сказано, что оценивают их по 75 % посещений: три из четырёх людей должны получать страницу не медленнее порога.
В отчёте PageSpeed Insights два блока. Верхний — данные реальных посетителей Chrome за последние 28 дней. Нижний — лабораторный замер: одна загрузка на имитации телефона. У небольшого сайта верхнего блока может не быть совсем, тогда ориентируйтесь на нижний.
Шаг 3. Метрика и Вебмастер. Если стоит Яндекс Метрика, откройте «Отчёты → Мониторинг → Время загрузки страниц». Там видно, сколько занимает ответ сервера и когда страница начинает отрисовываться у ваших настоящих посетителей (справка Метрики). В Яндекс Вебмастере есть оценка скорости по пятибалльной шкале: её считают по переходам из мобильного поиска в Яндекс Браузере (блог Вебмастера). Если посетителей мало, оценки не будет.
Запишите результаты в таблицу: дата, страница, балл на телефоне, LCP, INP, CLS. Эта таблица понадобится на шаге 12.
Почему сайт долго загружается: шесть частых причин
Отчёт PageSpeed Insights в разделе «Диагностика» называет конкретные файлы. Почти всё, что там окажется, сводится к шести причинам:
- Тяжёлые картинки. Фото с телефона весит несколько мегабайт, и вставленное без сжатия оно может оказаться тяжелее всей остальной страницы.
- Видео на первом экране. Красивый фон, который телефону приходится скачивать целиком.
- Чужие скрипты. Онлайн-чат, виджет обратного звонка, пиксели рекламы, карта, квиз. Каждый тянет свои файлы с чужого сервера.
- Шрифты. Три-четыре начертания с внешнего сервиса, а текст не показывается, пока они не скачаются.
- Медленный сервер. Дешёвый хостинг или сайт, который собирает каждую страницу заново для каждого посетителя.
- Код конструктора или темы. Лишние стили и скрипты, которые движок подключает на всех страницах подряд.
Первые четыре причины чинятся без переделки сайта. Пятая и шестая требуют работы с сервером или движком.
Шаги 4–6: картинки и видео
Картинки дают самый быстрый выигрыш. С них начинают, когда решают, как ускорить загрузку сайта своими силами: этот этап часто проходят в админке без разработчика.
Шаг 4. Сожмите картинки и переведите их в WebP. WebP и AVIF — современные форматы, которые при том же качестве весят заметно меньше JPEG и PNG. Большинство движков умеют конвертировать сами (в WordPress для этого есть плагины), для ручной работы подойдёт бесплатный Squoosh от команды Chrome.
Ширина картинки не должна превышать ширину, в которой её показывают: фото для колонки в 800 пикселей не нужно загружать в 4000.
Шаг 5. Ленивая загрузка для всего ниже первого экрана. Картинки, до которых человек ещё не долистал, браузер может скачать позже. В коде это атрибут loading="lazy", во многих конструкторах и темах — галочка в настройках. Главную картинку первого экрана откладывать нельзя: она и есть LCP. Заодно проверьте, что у картинок прописаны ширина и высота, иначе текст будет прыгать при загрузке (метрика CLS).
Шаг 6. Уберите видео с первого экрана. Замените видео-фон неподвижной картинкой-постером, а ролик запускайте по нажатию. Видео с YouTube, VK Видео или RuTube лучше показывать заглушкой с кнопкой: настоящий плеер со всеми его скриптами загрузится, когда человек решит смотреть.
Шаги 7–9: шрифты, скрипты и виджеты
Здесь уже нужен доступ к коду сайта или к настройкам темы.
Шаг 7. Наведите порядок в шрифтах. Оставьте одно-два начертания, загружайте шрифт со своего сервера и включите режим font-display: swap: текст появится сразу системным шрифтом, а фирменный подменит его через мгновение. Если сайт на русском, достаточно кириллицы и латиницы, остальные наборы знаков можно не загружать.
Шаг 8. Проведите ревизию чужих скриптов. Выпишите всё, что подключено: чаты, виджеты звонка, пиксели, счётчики, карты, отзывы. Против каждого пункта ответьте, кто и когда последний раз им пользовался. Пиксель рекламной системы, где вы давно не крутите рекламу, и чат, в который никто не пишет, удаляйте первыми.
Шаг 9. Отложите то, что осталось. Нужные скрипты подключают так, чтобы они загружались после основного содержимого страницы. Карту показывают картинкой и загружают настоящую по нажатию. Чат запускают через несколько секунд после открытия страницы. Посетитель этого не заметит, а главный экран появится раньше.
Шаги 10–11: ускорение загрузки сайта на стороне сервера
Если PageSpeed Insights пишет про долгое время ответа сервера, картинки и скрипты уже не помогут.
Шаг 10. Включите кэш и сжатие на сервере. Кэш хранит готовые страницы и файлы, чтобы не собирать их заново для каждого посетителя. Сжатие (gzip или brotli) уменьшает текстовые файлы при передаче в несколько раз: HTML прошлой главной нашего сайта весил 36 КБ, сжатый — 8,6 КБ.
На WordPress и Битриксе кэш страниц включается плагином или модулем, на своём сервере — настройкой. Проверьте заодно, что работает HTTPS и протокол HTTP/2: без них браузер тратит лишнее время на соединение.
Шаг 11. Проверьте хостинг. Хорошим ответом сервера считается 0,8 секунды и быстрее (web.dev о TTFB). Если после включения кэша сервер всё равно отвечает дольше, тариф хостинга не справляется. Для клиентов в России выбирайте сервер в России: ближе к людям — короче путь. Статический сайт, где страницы собраны заранее и лежат готовыми файлами, отвечает быстрее всего: серверу не нужно ничего вычислять.
Шаг 12: повторите замер и держите скорость
Шаг 12. После каждой правки снимите замер тем же способом, что на шагах 1–3: те же страницы, тот же профиль телефона. Лабораторный балл PageSpeed Insights заметно гуляет от прогона к прогону, поэтому делайте три замера и смотрите на средний. Данные реальных посетителей обновятся только через 28 дней, так что финальный вердикт выносите через месяц.
Дальше скорость нужно держать. Сайт тяжелеет незаметно: новый баннер без сжатия, ещё один виджет, пиксель для разовой рекламной кампании. Раз в месяц открывайте PageSpeed Insights и отчёт Метрики. Если LCP на телефоне заметно вырос, ищите, что добавили на сайт за этот месяц.
| Что делать | Кто может | Сколько даёт |
|---|---|---|
| Сжать картинки, WebP, размеры | владелец в админке | обычно больше всего |
| Убрать видео и лишние виджеты | владелец | много, если их было несколько |
| Шрифты, отложенные скрипты | разработчик | заметно на телефоне |
| Кэш, сжатие, хостинг | разработчик или хостинг | главное при медленном сервере |
| Переезд на быстрый движок | студия | когда остальное упёрлось в платформу |
Как это было у нас
В студии EdMax мы проходили ускорение на своих проектах, поэтому покажем два реальных замера.
Собственный сайт студии. Прошлая версия edmax.pro собиралась с шрифтом Inter из Google Fonts. Замер Lighthouse на телефоне дал 87 баллов, главный экран появлялся через 3,1 секунды. Lighthouse показал причину: файл стилей шрифтов с чужого сервера задерживал отрисовку, оценка потерь — 2 050 мс.
Нашлась и нелепая деталь: браузер скачивал набор знаков latin-ext на 85 КБ ради одного символа «₽». Всего шрифты весили 152 КБ из 165 КБ страницы.
В новой версии мы сделали то, что описано в шаге 7: один файл шрифта на нашем сервере, только кириллица, латиница, «₽» и типографские знаки, режим swap, предзагрузка. Шрифт стал весить 34 КБ вместо 152 КБ, внешних запросов у страницы не осталось.
Сайт сети квестов obraz-strah.ru. Когда сеть переезжала с Тильды на собственный код, на второй день перевели 63 картинки из PNG в WebP (шаг 4), а страницы собрали статическими файлами (шаг 11). Сервер отвечает за 40–80 мс.
На компьютере страница квеста получает 98 баллов Lighthouse и показывает главный экран за 1,0 секунды. На телефоне баллы ниже, поэтому в кейсе мы называем компьютерный замер отдельно. Сравнения «было → стало» по скорости там нет: сайт на Тильде до переезда никто не замерил, а повторить замер уже нельзя.
Подробно о переезде и о том, что он дал заявкам, — в кейсе obraz-strah.ru.
Скорость и позиции в поиске: чего ждать
Быстрый сайт помогает продвижению, хотя и в меру. Google в документации пишет: поиск всегда старается показать самый подходящий по смыслу ответ, даже если страница работает не лучшим образом (Google Search Central). Скорость решает, когда несколько страниц одинаково полезны.
Где ускорение помогает:
- Меньше людей уходит до загрузки. Особенно с телефона и в слабой сети. В кейсе переезда сети квестов отказы людей из поиска со смартфонов снизились с 16,7 % до 13,4 % (февраль–март против апреля–мая, у квестов есть сезонность). Замера скорости старого сайта нет, поэтому долю скорости в этом результате мы не выделяем.
- Реклама дешевле в пересчёте на заявку. Вы платите за клик, а человек закрыл вкладку раньше, чем увидел форму. Каждый такой уход — оплаченный и потерянный клик.
- Чистая техническая основа для SEO. Быстрые страницы, понятная структура и отсутствие мусорного кода облегчают остальную работу по продвижению сайта.
Когда ускорять уже поздно и выгоднее переехать
Бывает, что шаги 4–11 пройдены, а телефонный балл застрял в жёлтой зоне. Обычно это значит, что упёрлись в платформу: конструктор или тема подключают свой тяжёлый код на каждую страницу, и доступа к нему нет.
Три признака, что пора думать о переезде:
- Сайт на конструкторе, и настройки сервера, кэша и кода вам закрыты. Самый частый пример — Тильда: для таких сайтов у нас есть отдельная услуга переноса сайта с Тильды на свой хостинг.
- Тема WordPress тянет десятки плагинов, и отключение любого ломает вёрстку.
- Сайт старый, его дорабатывали разные люди, и любая правка скорости стоит дороже новой сборки.
В этих случаях иногда дешевле сделать сайт заново на быстром движке с сохранением адресов страниц и позиций, чем чинить старый по кусочкам. Если сомневаетесь, с чего начать, закажите аудит и ускорение сайта: замерим скорость до работ, назовём, что тормозит, и повторим замер после.
Частые вопросы
Какая скорость загрузки сайта считается нормальной?
Google называет хорошими три порога: главный экран появляется за 2,5 секунды, реакция на нажатие — за 200 миллисекунд, вёрстка сдвигается не больше чем на 0,1. Мерить надо на телефоне: там сайт почти всегда медленнее, чем на компьютере.
Влияет ли скорость сайта на позиции в поиске?
Влияет, но скромно. Google прямо пишет, что покажет самый подходящий по смыслу ответ, даже если страница медленная. Скорость помогает, когда страницы конкурентов одинаково полезны, и снижает число людей, которые закрыли вкладку до загрузки.
Почему PageSpeed на телефоне показывает меньше, чем на компьютере?
Для телефона сервис имитирует медленный мобильный интернет и слабый процессор. Разница бывает заметной: прошлая версия нашего сайта получала 87 на телефоне и 99 на компьютере. Сравнивайте телефон с телефоном: вчерашний замер с сегодняшним.
Можно ли ускорить сайт без программиста?
Частично да. Сжать картинки, убрать лишние виджеты и видео с первого экрана владелец может сам в админке. Настройка сервера, кэша, шрифтов и отложенной загрузки скриптов требует доступа к коду: здесь нужен разработчик или студия.
Сколько времени занимает ускорение сайта?
Зависит от движка и того, что найдёт замер. Сжать картинки на лендинге — дело одного дня. Разобрать скрипты, шрифты и кэш на сайте из сотни страниц — несколько дней работы. Точный срок называют после аудита, когда видно, что именно тормозит.
Что делать, если сайт на Тильде грузится медленно?
На Тильде доступно немногое: сжать картинки, убрать тяжёлые блоки и лишние виджеты. Настройки сервера и код конструктора закрыты. Если этого мало, сайт переносят на свой хостинг: код становится вашим, и ускорять можно всё.
