Сайт быстрее за вечер: 9 шагов с замером до и после

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

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

Ваш пульт: «Что улучшить» и «Состояние системы» #

Откройте «Управление сайтом → SEO и доступность → Что улучшить» и выберите вкладку «Скорость»: там перечислено, что на вашем сайте ещё не включено. А в «Система → Диагностика → Состояние системы» внизу есть блок «Рекомендации»: он подсказывает про кэш, расписание и OPcache.

Шаг 1. Замерьте до #

Что сделать. Откройте PageSpeed Insights, вставьте адрес главной и запустите проверку для телефона. Или в браузере Chrome: инструменты разработчика, вкладка Lighthouse, «Analyze page load». Запишите три числа: LCP (когда появилась главная часть страницы), CLS (насколько страница «прыгает») и INP (как быстро сайт отвечает на нажатие). Цели по версии web.dev: LCP не больше 2,5 секунды, INP не больше 200 миллисекунд, CLS не больше 0,1, и это для трёх из четырёх посетителей (75-й перцентиль). Как проверить. У вас есть три записанных числа и дата замера. Если не делать. Вы не узнаете, помогли ли правки. Заодно запомните две вещи. Результат Lighthouse плавает от запуска к запуску: запустите три раза и возьмите середину. И оценка 100 не цель: документация Chrome пишет, что она крайне трудна и не ожидается, а зелёная зона начинается с 90.

Шаг 2. Готовые страницы для гостей #

Что сделать. В «Настройки сайта → Скорость и обслуживание» включите «Отдавать гостям готовые страницы». Страница, собранная для одного гостя, отдаётся остальным как есть, без обращений к базе. Вошедшие получают свои страницы как обычно, а кэш сбрасывается сам при любой правке через панель. «Сколько секунд держать» можно не трогать: пять минут (300) хватает. Как проверить. Запросите главную дважды:

curl -I https://example.com/
curl -I https://example.com/

Во втором ответе должна быть строка X-Nex1on-Cache: hit. На нашем тестовом стенде страница, собираемая заново, отдавалась за 0,6–0,8 секунды, а готовая за 0,12–0,17.

Если не делать. Каждый гость заставляет сервер заново собрать страницу из базы. На людном сайте это снимает с сервера большую часть работы.

Шаг 3. Сжимать HTML #

Что сделать. Там же включите «Сжимать HTML страниц»: из страниц уйдут лишние пробелы, переводы строк и комментарии. Вид не меняется, панель не трогается. Если после включения страница выглядит не так, выключите. Как проверить. Сравните размер ответа до и после:

curl -s https://example.com/ | wc -c

На нашей тестовой главной ответ уменьшился со 157 до 138 КБ, примерно на 12 процентов. Сжатие HTML полезнее вместе с готовыми страницами (шаг 2): без них сервер сжимает каждую страницу заново для каждого гостя, и «Состояние системы» об этом напомнит. Если не делать. Страницы весят больше нужного. Ничего не сломается, вы просто платите лишними килобайтами каждому посетителю.

Шаг 4. Только нужные стили #

Что сделать. Включите «Только нужные стили на странице»: вместо нескольких полных файлов стилей страница получит один, только с теми правилами, что на ней могут сработать. Вид не меняется. Как проверить. Откройте исходный код страницы (Ctrl+U) и найдите rel="stylesheet". На нашем тестовом стенде три файла стилей (около 634 КБ без сжатия) заменились одним (157 КБ). Если не делать. Телефон скачивает правила для страниц, которых он не открывал: главная открывается заметно медленнее, особенно в мобильной сети.

Шаг 5. Картинки #

Что сделать. В «Настройки сайта → Картинки и видео» проверьте три вещи. Первое: «Наибольшая ширина картинки, точек» по умолчанию 0, то есть без предела. Поставьте число, которое вам действительно нужно (например, 2000): большие картинки при загрузке уменьшаются с теми же пропорциями. Фотография в шесть тысяч точек для колонки в тысячу лишняя. Второе: «Сжатие картинок»: по умолчанию «Локально», и ничего не уходит с сайта; внешний сервис TinyPNG присылает файлы легче, но ваша картинка при этом отправляется на чужой сервер. Третье: включите «Картинки ещё и в WebP»: сайт хранит ещё и более лёгкую копию и отдаёт её тем браузерам, которые её просят. Копии делаются только для новых загрузок; для уже загруженных выполните на сервере команду php nex1on media:webp. «Подсказки браузеру для картинок» оставьте включёнными: движок сам дописывает размеры, ленивую загрузку ниже первого экрана и приоритет главной картинке.

Как проверить. Посмотрите, что движок вписал в страницу:

curl -s https://example.com/ | grep -o '<img[^>]*>' | head -3

У картинок должны быть width и height (страница не прыгает при загрузке), srcset, decoding="async". У главной картинки на первом экране fetchpriority="high" и нет loading="lazy", у остальных ниже на странице loading="lazy". Так и задумано: web.dev прямо предупреждает не откладывать загрузку картинки, которая видна сразу, иначе страница открывается медленнее.
Если не делать. Картинки обычно самая тяжёлая часть страницы, и одна неподходящая фотография способна перевесить всё остальное.

Шаг 6. Шрифты #

Что сделать. Темы из коробки не подключают шрифты с сервера: текст набран теми шрифтами, что уже есть на устройстве посетителя, поэтому ничего не скачивается. Если вы всё же добавляете свой шрифт, держитесь правил web.dev: формат WOFF2, только нужные начертания, font-display: swap (или optional) и не предзагружайте всё подряд. Как проверить. В инструментах разработчика, вкладка Network, фильтр Font: у сайта без подключённых шрифтов список пуст. Если не делать. Каждый подключённый шрифт это лишний файл, который блокирует показ текста или заставляет страницу «прыгать», когда шрифт подменяется.

Шаг 7. Расписание и OPcache #

Что сделать. Откройте «Система → Диагностика → Состояние системы» и посмотрите блок «Рекомендации». Если есть «Письма отправляются при заходах посетителей», добавьте на хостинге расписание (cron) раз в минуту: готовую команду показывает сама рекомендация. Тогда письма и фоновые дела разбираются без посетителей, а страницы не ждут почту. Если есть «PHP OPcache недоступен», попросите поддержку хостинга включить его: OPcache держит разобранный PHP в памяти, и сервер не разбирает одни и те же файлы при каждом заходе. Как проверить. Соответствующие строки в «Рекомендациях» исчезают. Если не делать. Сайт будет делать лишнюю работу на каждом заходе, и вы заметите это только в часы пик.

Шаг 8. Мгновенные переходы (по желанию) #

Что сделать. Включите «Мгновенные переходы»: когда посетитель наводит курсор на ссылку, браузер (Chrome и подобные) заранее берёт страницу, и переход открывается почти мгновенно. Работает для гостей и для страниц, которые уже лежат в кэше готовых страниц, поэтому сначала включите шаг 2. Просмотры и счётчики от предзагрузки не растут. Панель, вход, скачивание файлов, письма-подтверждения и адреса с знаком вопроса не предзагружаются. Как проверить. В инструментах разработчика, вкладка Network: при наведении на ссылку в списке появляется запрос этой страницы. Если не делать. Ничего страшного: это бонус, а не необходимость.

Шаг 9. Замерьте после #

Что сделать. Повторите шаг 1 и сравните три числа. Чтобы смотреть не лабораторные данные, а настоящих посетителей, включите «Реальная скорость у посетителей»: браузер посетителя измеряет LCP, CLS и INP и при уходе отправляет только числа. IP-адрес, куки и сведения о браузере не сохраняются, роботы и те, кто включил «не отслеживать», не считаются, согласие посетителя обычно не требуется, раз личных данных нет, но уточните у юриста для вашей страны. Итоги появятся в «SEO и доступность → Скорость». Как проверить. Три новых числа рядом со старыми. Лабораторный замер показывает одно устройство и одну сеть, а настоящая картина это то, что видят ваши посетители, поэтому при расхождении верьте второму. Если не делать. Вы будете гадать, а не знать.

Чего этот список не делает #

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