Скорость загрузки сайта: что тормозит и как исправить
Скорость сайта — это не про «красиво» и не про оценку в сервисе проверки. Это про то, сколько людей дождётся загрузки и сколько страниц поисковик успеет обойти. Разберу, что реально влияет на скорость, как её измерить и в каком порядке исправлять.
Что происходит, пока страница грузится
Человек с телефона в метро ждёт примерно три секунды. Дальше он либо нажимает «назад», либо уходит к следующему результату — их ещё девять. На медленном сайте это происходит не с частью людей, а с большинством: каждая лишняя секунда отнимает ощутимую долю посетителей.
Второй эффект виден не сразу: поисковый робот тоже ограничен во времени. Если сайт отвечает медленно, робот обходит меньше страниц за тот же визит. Новые статьи и разделы ждут своей очереди неделями, а часть страниц из индекса выпадает.
Как измерить честно
Есть три показателя, которые поисковик использует как ориентир. Запомнить их стоит, потому что в отчётах вы увидите именно эти сокращения:
LCP — загрузка
За сколько миллисекунд появляется главный блок страницы: заголовок или большое изображение. Хорошо — до 2,5 секунды, плохо — больше 4.
INP — отклик
Как быстро страница отвечает на нажатие. Человек тапнул по кнопке — сколько ждал. Хорошо — до 200 миллисекунд.
CLS — сдвиг
Дёргается ли вёрстка, пока грузится. Если текст прыгает под пальцем и вместо кнопки нажимается реклама — это он. Хорошо — до 0,1.
Мерить надо не один раз, а на живых посетителях: цифры на быстром компьютере в офисе и на телефоне в лифте различаются в разы. В Метрике для этого есть отчёт по скорости, и там же видно распределение — сколько людей получили быструю страницу, а сколько нет.
Отдельно про сервисы проверки: не гонитесь за 100 из 100. Оценка в них — это агрегат из десятков правил, часть которых на ваш трафик не влияет вовсе. Ориентируйтесь на три показателя выше и на то, сколько весит страница.
Замер на живых посетителях и замер на быстром компьютере
Метрика считает по реальным визитам: слабый телефон, мобильная связь, открытые вкладки, чужие виджеты, которые в этот момент не ответили. Так видно, что переживают люди, но не видно причину.
Сервис проверки открывает страницу с быстрого канала на мощном компьютере и выдаёт список замечаний. Условия одинаковые от запуска к запуску, поэтому замер сравнивают с прошлым замером, а не с жизнью: у посетителя страница грузится дольше. Решение принимайте по живым визитам, причину ищите прибором, а правки проверяйте тем же инструментом и на тех же страницах.
Что почти всегда тормозит сайт
По опыту разбора сайтов причины повторяются в одном и том же порядке.
Изображения
Самая частая и самая дешёвая в исправлении проблема. Фотография из телефона весит 4–8 мегабайт, а на странице её показывают в блоке шириной 600 точек. Достаточно уменьшить её до нужного размера и перевести в современный формат — выигрыш бывает в десять раз.
Что сделать конкретно: уменьшить размеры картинок до размера блока на экране, сжать их, включить ленивую загрузку для всего, что ниже первого экрана, и не ставить видео на первый экран вместо картинки-обложки.
По шагам это выглядит так:
- Посмотреть блок: сколько места снимок занимает на большом экране и на телефоне.
- Уменьшить до этого размера с небольшим запасом под экраны высокой плотности.
- Сжать до момента, когда разница перестаёт быть видна на телефоне. Схемы и логотипы портятся раньше фотографий.
- Перевести в современный формат, старый оставить запасным для старых устройств.
- Включить ленивую загрузку для всего, что ниже первого экрана.
- Первый экран оставить без задержки: главное изображение грузится сразу, его ждёт человек и его ждёт поисковик в показателе загрузки. Размеры картинки укажите в разметке, тогда вёрстка не поедет, пока файл не пришёл.
Скрипты чужих сервисов
Счётчики, онлайн-чаты, всплывающие окна, карты, кнопки соцсетей, виджеты отзывов — каждый из них отдельный запрос к чужому серверу, который может отвечать медленно. Пять таких виджетов способны замедлить страницу сильнее, чем вся вёрстка.
Что сделать: посмотреть, какие скрипты действительно нужны, остальные убрать; чат и карту грузить не сразу, а после нажатия или при прокрутке до блока с ними.
Отсутствие кэширования
Если при каждом открытии страницы сервер заново собирает её из базы, он делает одну и ту же работу тысячи раз. Кэширование сохраняет готовый вариант — это настройка на стороне сервера или модуль на сайте, и обычно она даёт самый большой эффект при минимальных усилиях.
Что даёт кэширование и сжатие
Сжатие уменьшает объём текстов: страницы, стили и скрипты уходят посетителю в архиве. Кэш браузера хранит файлы у самого человека, и при повторном визите картинка не запрашивается заново. Кэш на сервере отдаёт готовую страницу вместо сборки из базы на каждый запрос.
Правила задают в панели хостинга или в настройках сервера, из редактора текстов до них не добраться. Там же указывают, что кэшировать нельзя: корзину, личный кабинет, страницы с формами. После смены цен старый кэш покажет старую цифру, поэтому очистку обсуждают с тем, кто отвечает за сервер.
Слабое место хостинга
Бывает, что сайт оптимизирован, а отвечает медленно: тариф с общими ресурсами, старая версия PHP, база данных на том же перегруженном сервере. Тогда помогает не оптимизация, а переезд. Проверить просто: время ответа сервера измеряется отдельно от загрузки картинок, и если оно больше секунды — дело в сервере.
Как отличить медленный хостинг от тяжёлой страницы
В замерщике два времени стоят отдельно: сколько ждать ответа сервера и сколько грузится страница целиком. Первое зависит от тарифа и настроек сервера, второе — от картинок, скриптов и связи у посетителя.
На хостинг указывают одинаковые задержки на всех страницах, включая лёгкую служебную, медленный ответ админки и разная скорость утром и вечером, когда рядом работают соседи по тарифу. На тяжёлую страницу указывает другое: сервер отвечает быстро, а сама страница собирается долго из-за картинок и скриптов. Простая проверка: откройте по прямой ссылке одну картинку. Ждёт ответа и она — работа с изображениями делу не поможет.
Мобильная версия
Отдельный сюрприз: на компьютере сайт быстрый, на телефоне — нет. Мобильный интернет хуже, процессор слабее, и всё, что на десктопе незаметно, на телефоне становится заметным. Смотреть надо на телефоне, и не только на своём.
В каком порядке исправлять
- Измерить. Сначала замер: без цифр непонятно, что именно тормозит. Замер до и после — единственный способ доказать, что стало лучше.
- Изображения. Самое частое и самое быстрое в исправлении.
- Кэширование и сжатие. Настройка на сервере, эффект сразу на всех страницах.
- Скрипты. Убрать лишнее, остальное отложить до взаимодействия.
- Хостинг. Если после всего этого сервер отвечает медленно — переезд, а не оптимизация.
- Проверить на телефоне и сравнить с замером до начала работ.
Что написать разработчику
Просьбу «ускорьте сайт» проверить невозможно. Короткое задание снимает вопрос: подрядчик знает границы работы, вы получаете отчёт с цифрами.
- Точки замера: главная, страница услуги, страница с фотографиями. Инструмент один, условия те же, замер до и после.
- Что грузится на этих страницах: изображения, скрипты, шрифты, виджеты чужих сервисов. По каждому пункту решение — нужен или убираем.
- Требования к картинкам: размер под блок, современный формат, ленивая загрузка ниже первого экрана.
- Настройки сервера: сжатие, сроки кэша, кэш страниц и его очистка после правок.
- Время ответа сервера в отчёте отдельной цифрой. Вне нормы — тариф обсуждают до правок в вёрстке.
- Проверка на мобильном интернете: пройти путь до отправки формы на телефоне.
Ограничения платформы обсудите до работ: на самописной системе часть правок в вёрстке сделать не получится без переделки шаблона. Если сайт только собираются делать, требования к весу страниц дешевле заложить в задание сразу — при обсуждении создания сайта.
Чего скорость не делает
Важно не переоценить: быстрый сайт сам по себе не выводит в топ. Он убирает тормоз. Если страница не отвечает на запрос, из-за которого её показывают, ускорение ничего не изменит — люди уйдут так же быстро, только чуть вежливее.
Порядок работ обычно такой: сначала соответствие страницы запросу и понятный первый экран, потом техническая часть. Быстрый сайт с плохим содержанием проигрывает медленному с хорошим — просто потому, что до содержания доходят не все, а до скорости поисковик доберётся и сам.
Что делать дальше
Если непонятно, что именно тормозит ваш сайт и сколько это стоит в заявках, покажет аудит: там скорость разбирается вместе со структурой и содержанием, а не отдельно от них. Про то, как скорость влияет на поведение посетителей и как это видно в отчётах, — в статье про поведенческие факторы. А почему сайт может быть быстрым и всё равно не приносить заявок — в разборе продвижения интернет-магазина.