Скорость загрузки сайта: что тормозит и как исправить

Скорость сайта — это не про «красиво» и не про оценку в сервисе проверки. Это про то, сколько людей дождётся загрузки и сколько страниц поисковик успеет обойти. Разберу, что реально влияет на скорость, как её измерить и в каком порядке исправлять.

Что происходит, пока страница грузится

Человек с телефона в метро ждёт примерно три секунды. Дальше он либо нажимает «назад», либо уходит к следующему результату — их ещё девять. На медленном сайте это происходит не с частью людей, а с большинством: каждая лишняя секунда отнимает ощутимую долю посетителей.

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

Как измерить честно

Есть три показателя, которые поисковик использует как ориентир. Запомнить их стоит, потому что в отчётах вы увидите именно эти сокращения:

LCP — загрузка

За сколько миллисекунд появляется главный блок страницы: заголовок или большое изображение. Хорошо — до 2,5 секунды, плохо — больше 4.

INP — отклик

Как быстро страница отвечает на нажатие. Человек тапнул по кнопке — сколько ждал. Хорошо — до 200 миллисекунд.

CLS — сдвиг

Дёргается ли вёрстка, пока грузится. Если текст прыгает под пальцем и вместо кнопки нажимается реклама — это он. Хорошо — до 0,1.

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

Отдельно про сервисы проверки: не гонитесь за 100 из 100. Оценка в них — это агрегат из десятков правил, часть которых на ваш трафик не влияет вовсе. Ориентируйтесь на три показателя выше и на то, сколько весит страница.

Замер на живых посетителях и замер на быстром компьютере

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

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

Что почти всегда тормозит сайт

По опыту разбора сайтов причины повторяются в одном и том же порядке.

Изображения

Самая частая и самая дешёвая в исправлении проблема. Фотография из телефона весит 4–8 мегабайт, а на странице её показывают в блоке шириной 600 точек. Достаточно уменьшить её до нужного размера и перевести в современный формат — выигрыш бывает в десять раз.

Что сделать конкретно: уменьшить размеры картинок до размера блока на экране, сжать их, включить ленивую загрузку для всего, что ниже первого экрана, и не ставить видео на первый экран вместо картинки-обложки.

По шагам это выглядит так:

  1. Посмотреть блок: сколько места снимок занимает на большом экране и на телефоне.
  2. Уменьшить до этого размера с небольшим запасом под экраны высокой плотности.
  3. Сжать до момента, когда разница перестаёт быть видна на телефоне. Схемы и логотипы портятся раньше фотографий.
  4. Перевести в современный формат, старый оставить запасным для старых устройств.
  5. Включить ленивую загрузку для всего, что ниже первого экрана.
  6. Первый экран оставить без задержки: главное изображение грузится сразу, его ждёт человек и его ждёт поисковик в показателе загрузки. Размеры картинки укажите в разметке, тогда вёрстка не поедет, пока файл не пришёл.

Скрипты чужих сервисов

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

Что сделать: посмотреть, какие скрипты действительно нужны, остальные убрать; чат и карту грузить не сразу, а после нажатия или при прокрутке до блока с ними.

Отсутствие кэширования

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

Что даёт кэширование и сжатие

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

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

Слабое место хостинга

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

Как отличить медленный хостинг от тяжёлой страницы

В замерщике два времени стоят отдельно: сколько ждать ответа сервера и сколько грузится страница целиком. Первое зависит от тарифа и настроек сервера, второе — от картинок, скриптов и связи у посетителя.

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

Мобильная версия

Отдельный сюрприз: на компьютере сайт быстрый, на телефоне — нет. Мобильный интернет хуже, процессор слабее, и всё, что на десктопе незаметно, на телефоне становится заметным. Смотреть надо на телефоне, и не только на своём.

В каком порядке исправлять

  1. Измерить. Сначала замер: без цифр непонятно, что именно тормозит. Замер до и после — единственный способ доказать, что стало лучше.
  2. Изображения. Самое частое и самое быстрое в исправлении.
  3. Кэширование и сжатие. Настройка на сервере, эффект сразу на всех страницах.
  4. Скрипты. Убрать лишнее, остальное отложить до взаимодействия.
  5. Хостинг. Если после всего этого сервер отвечает медленно — переезд, а не оптимизация.
  6. Проверить на телефоне и сравнить с замером до начала работ.

Что написать разработчику

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

  1. Точки замера: главная, страница услуги, страница с фотографиями. Инструмент один, условия те же, замер до и после.
  2. Что грузится на этих страницах: изображения, скрипты, шрифты, виджеты чужих сервисов. По каждому пункту решение — нужен или убираем.
  3. Требования к картинкам: размер под блок, современный формат, ленивая загрузка ниже первого экрана.
  4. Настройки сервера: сжатие, сроки кэша, кэш страниц и его очистка после правок.
  5. Время ответа сервера в отчёте отдельной цифрой. Вне нормы — тариф обсуждают до правок в вёрстке.
  6. Проверка на мобильном интернете: пройти путь до отправки формы на телефоне.

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

Чего скорость не делает

Важно не переоценить: быстрый сайт сам по себе не выводит в топ. Он убирает тормоз. Если страница не отвечает на запрос, из-за которого её показывают, ускорение ничего не изменит — люди уйдут так же быстро, только чуть вежливее.

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

Что делать дальше

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