Главная в 2,5 раза быстрее без редизайна: 12 точечных правок — и через месяц рост позиций в поиске
Задача
Сайт мастерской по перетяжке мягкой мебели: живой трафик из поиска, заявки через формы, чат и звонки, CMS MODX, которой много лет. Жалоба владельца звучала обобщённо — «сайт медленный». Типовой ответ на такую жалобу — «сожмите картинки и включите кеш». Мы решили сначала измерить: где именно теряются секунды и что из этого чувствует посетитель. Ограничения — как всегда у работающего бизнеса: не сломать формы заявок, капчу и админку, не затевать редизайн и не останавливать сайт ни на минуту. Скорость здесь не только про удобство: показатели загрузки страницы входят в факторы ранжирования и у Яндекса, и у Google.
Как проверяли
Скорость сайта нельзя оценить «на глаз»: у владельца страница давно в кеше браузера, а посетитель приходит с телефона по мобильной сети. Поэтому мерили инструментами Chrome — так же, как это делают поисковики, — и сразу на боевом сайте.
Что нашли — и что с этим сделали
Ни одна из находок не была «просто сожмите картинки». За каждой стояла своя причина, своё влияние на посетителя и своё отдельное решение.
- 1
Сервер отдавал страницу дольше полутора секунд
- Нашли
- Картинки и скрипты сервер отдавал за 50 мс, а саму страницу — от 1,2 до 3 секунд. Проверили очевидное: кеш CMS работал, база данных занимала 5 % времени, «тяжёлые» блоки страницы — ещё меньше. 95 % уходило на сам PHP: сайт работал на версии 5.6 — 2014 года, хостинг её всё ещё поддерживал.
- Почему важно
- Пока сервер думает, посетитель смотрит на белый экран. Эту задержку не спрячешь никакой оптимизацией картинок — она стоит перед всем остальным.
- Сделали
- Прогнали сайт на сервере под PHP 7.2, 7.4 и 8.0. Версия 7.4 дала ровно двукратное ускорение при побайтно одинаковых страницах; 8.0 с этой CMS не работает. Переключили на 7.4 в панели хостинга, проверили админку, формы и загрузку фото.
Ответ сервера −33 %: 1,78 → 1,19 с - 2
Главная картинка весила 347 КБ и грузилась в последнюю очередь
- Нашли
- Фон первого экрана — JPEG на 347 КБ. Браузер грузил его с низким приоритетом: так устроены все фоновые картинки из стилей. «Предзагрузка» на странице была — но настроена на баннер другой страницы: 26 КБ качались впустую на каждой странице сайта, а настоящий баннер не предзагружался вовсе.
- Почему важно
- Момент, когда посетитель видит главный контент (LCP), — один из трёх показателей, по которым поисковики оценивают удобство сайта.
- Сделали
- Пережали баннер в WebP: 33 КБ вместо 347, на глаз неотличимо — он всё равно лежит под затемняющим градиентом. Предзагрузка теперь берёт баннер именно открытой страницы и с высоким приоритетом.
Главный контент виден через 0,7 с вместо 1,8 - 3
Пять капч на одной странице — и в каждой своя копия Метрики
- Нашли
- На главной семь форм. При открытии страницы стартовали пять капч: каждая поднимала два фрейма и свой набор скриптов, а внутри каждого фрейма грузилась ещё и отдельная копия Яндекс.Метрики.
- Почему важно
- Десятки запросов и четверть мегабайта ради форм, которые большинство посетителей не откроет, — и всё это в момент, когда браузер должен рисовать первый экран.
- Сделали
- Капча загружается при первом касании формы и только для этой формы. Серверную проверку не трогали. Проверили тремя сценариями и реальной заявкой.
10 → 0 фреймов при загрузке, −233 КБ - 4
«Ленивая загрузка» показывала заглушки вместо фотографий работ
- Нашли
- На странице 156 изображений, 151 из них грузилось сразу, хотя они далеко за первым экраном. Стояла старая библиотека «ленивой загрузки», настроенная так, что браузер брал заглушку «нет изображения» вместо настоящего фото. На фотографиях работ «до и после» и образцах тканей посетитель видел «нет фото», пока не доскроллит: 75 заглушек, одна повторялась 42 раза.
- Почему важно
- Фотографии работ — главный аргумент мастерской. Сайт показывал вместо них пустые картинки, а сверху ещё и грузил всё разом.
- Сделали
- Убрали библиотеку и включили ленивую загрузку, встроенную в браузер. 62 картинкам проставили размеры, чтобы страница не прыгала при подгрузке.
При открытии 8 картинок вместо 156, вес 1165 → 479 КБ, заглушек 0 - 5
Фирменный шрифт качался в устаревшем формате
- Нашли
- Шрифт логотипа лежал в форматах десятилетней давности. В описании шрифта старый формат стоял раньше нового, а браузер берёт первый подходящий — и качал файл вдвое тяжелее, хотя лёгкий лежал рядом.
- Почему важно
- Шрифты грузятся с высшим приоритетом и конкурируют за канал с первым экраном — каждый лишний килобайт здесь заметен.
- Сделали
- Пережали в современный woff2, исправили порядок форматов, предзагрузку перевели на новые файлы. Старые оставили для очень старых браузеров.
Два файла шрифта: −47 % и −56 % - 6
Правка из чек-листа, которую делать не стали
- Нашли
- Любой чек-лист по скорости требует «предподключение» к сторонним сервисам — чату, Метрике, колл-трекингу. Замерили, когда они реально нужны: первый запрос к колл-трекингу уходит на 2-й секунде, к чату и Метрике — на 7-й. Главный контент к этому моменту показан давно.
- Почему важно
- Ранние соединения только отняли бы канал у стилей и шрифтов первого экрана: по чек-листу правильно, по замеру — хуже.
- Сделали
- Ничего. Отказ от правки — тоже результат аудита.
Лишних правок: 0 - 7
Ускоритель PHP на хостинге был выключен
- Нашли
- OPcache — стандартный ускоритель PHP — на сервере был, но не подключён: каждый запрос заново компилировал 4,7 тысячи файлов CMS.
- Почему важно
- Под наплывом посетителей это лишняя нагрузка на процессор, а в теории — сотни миллисекунд на каждом запросе.
- Сделали
- Включили через панель хостинга и замерили: старт CMS ускорился вдвое, а время ответа не изменилось — компиляция оказалась малой долей. Оставили ради запаса прочности и честно записали: на скорость для посетителя не влияет.
Старт CMS ×2, время ответа без изменений - 8
Кнопка «Назад» перезагружала страницу с сервера
- Нашли
- Сервер отдавал страницы с заголовком «не хранить». Браузер не мог держать страницу в памяти, и нажатие «Назад» запускало полную перезагрузку — больше секунды ожидания.
- Почему важно
- На сайте услуг посетитель постоянно ходит между «Ценами», «Работами» и «Контактами». Каждое возвращение — заново.
- Сделали
- Заголовок исправили только для обычных страниц; админку не трогали. По дороге поймали ловушку: в ответе оказалось два заголовка кеширования, и «плохой» побеждал — исправили и это. Проверили по факту: страница восстанавливается из памяти, а не с сервера.
Возврат «Назад» — мгновенно вместо ~1,1 с - 9
В форме заявки не подставлялся телефон
- Нашли
- 12 полей форм без подписей и без подсказок автозаполнения. Браузер не предлагал подставить имя и телефон, а на смартфоне для номера открывалась буквенная клавиатура.
- Почему важно
- Форма заявки — главный элемент сайта. Каждое лишнее движение на телефоне — минус часть заявок.
- Сделали
- Добавили атрибуты автозаполнения и подписи, не трогая маску номера и логику отправки. На смартфоне теперь цифровая клавиатура. Проверили тестовой заявкой.
Lighthouse: доступность 88 → 92, практики 58 → 73 - 10
Регрессия, которую поймали сами
- Нашли
- Контрольный прогон Lighthouse после всех правок показал новую проблему: иконки соцсетей в подвале растянулись по вертикали. Размеры, которые мы проставили картинкам, вступили в конфликт со старыми стилями, где была задана только ширина.
- Почему важно
- Любая правка может что-то сломать. Разница в том, проверяешь ли ты после себя — или это заметят посетители.
- Сделали
- Починили в том же заходе и перепроверили все 156 картинок: искажённых нет.
Регрессий не осталось
Ещё две находки накануне
За день до аудита мы переводили этот же сайт на работу через git — систему контроля версий, без которой такие правки на живом сайте делать опасно. Попутно всплыли ещё две проблемы, и обе оказались не про скорость.
- 11
Шрифт в шапке «прыгал» — и виноват был не тот, на кого думали
- Нашли
- Шапка на мгновение отрисовывалась запасным шрифтом, потом «перескакивала» на фирменный. Первая версия — Google Fonts с отложенной подменой; перевели шрифты на локальные файлы, обращений к Google не осталось. Но замер показал: прыгал другой шрифт — шрифт логотипа, который не был в предзагрузке и доезжал к 1,15 секунды.
- Почему важно
- Прыжок текста в шапке — это и раздражение посетителя, и штраф в показателе стабильности вёрстки (CLS), который тоже учитывают поисковики.
- Сделали
- Добавили предзагрузку шрифта логотипа. Теперь он готов к 0,2 с — раньше первой отрисовки страницы.
Шрифт готов до первого кадра, обращений к Google — 0 - 12
Колл-трекинг давно не работал на внутренних страницах
- Нашли
- В логе CMS копилась «безобидная» ошибка, которую никто не читал. Разобрались: шаблонизатор принимал код скрипта колл-трекинга за собственную команду и молча вырезал его из страницы. На внутренних страницах звонки не отслеживались.
- Почему важно
- Реклама оптимизируется по звонкам. Если часть звонков не видна, бюджет уходит не туда.
- Сделали
- Переформатировали код так, чтобы шаблонизатор его не трогал, и проверили на боевых страницах: скрипт на месте.
Статистика звонков снова полная
Что сознательно не трогали
Хороший аудит отличается от чек-листа тем, что в нём есть и список того, чего делать не надо.
Самый тяжёлый ресурс страницы, но грузится на 7-й секунде и первому экрану не мешает. Отложить его до клика по иконке несложно, только тогда чат не всплывёт первым с «Чем помочь?». Это канал заявок, и решение здесь за владельцем, а не за техникой.
30 КБ, которые формально задерживают отрисовку. Но на страницах много старого кода, который обращается к библиотеке сразу. Риск сломать больше, чем выигрыш.
175 КБ разметки и 1900 элементов — в это упирается оставшееся время ответа сервера. Лечится только переработкой вёрстки главной, а это уже редизайн, а не оптимизация.
Цифры до и после
| Показатель | До | После | Разница |
|---|---|---|---|
| Показ главного контента (LCP) | 1,8 с | 0,7 с | −61 % |
| Ответ сервера | 1,7 с | ~0,6 с | −60 % |
| Вес страницы | 1165 КБ | 479 КБ | −59 % |
| Запросов при открытии | 107 | 58 | −46 % |
| Картинок грузится сразу | 156 | 8 | −95 % |
| Фреймов капчи при загрузке | 10 | 0 | −100 % |
| Заглушек «нет изображения» | 75 | 0 | −100 % |
| Сдвиг вёрстки (CLS) | 0,00 | 0,00 | без регрессий |
Показ главного контента ускорился в 2,5 раза, страница стала легче больше чем вдвое, а показатель стабильности вёрстки остался идеальным — правки ничего не сдвинули.
Что мы сделали
- Нашли причину медленного ответа сервера — устаревший PHP 5.6 — и перевели сайт на 7.4: ответ сервера −33 %, страницы совпадают байт в байт
- Баннер первого экрана: JPEG 347 КБ → WebP 33 КБ; предзагрузка настроена на нужную картинку, а не на баннер чужой страницы
- Пять капч, стартовавших при открытии страницы, теперь загружаются по первому касанию формы — и только для неё
- Заменили «ленивую загрузку», которая показывала заглушки вместо фото работ, на встроенную в браузер; проставили размеры 62 картинкам
- Шрифт логотипа перевели в современный woff2, исправили порядок форматов, предзагрузку переключили на новые файлы
- Замерили, когда реально нужны сторонние сервисы, и отказались от «предподключения» из чек-листа — оно сделало бы хуже
- Включили ускоритель PHP на хостинге, замерили и честно зафиксировали: на скорость для посетителя не влияет, оставлен ради запаса прочности
- Вернули мгновенную кнопку «Назад»: убрали заголовок, который запрещал браузеру держать страницу в памяти
- Полям форм добавили подписи и автозаполнение, не трогая маску телефона и отправку; на смартфоне — цифровая клавиатура
- Поймали собственную регрессию контрольным прогоном Lighthouse и починили в том же заходе
- Накануне: убрали «прыжок» шрифта в шапке — шрифты перенесли с Google Fonts на свой сервер, шрифту логотипа добавили предзагрузку
- Накануне: нашли, что шаблонизатор молча вырезал скрипт колл-трекинга с внутренних страниц, — починили, звонки снова считаются
Контрольный замер
Результат
Главная показывает основной контент через 0,7 секунды вместо 1,8, весит 479 КБ вместо 1,2 МБ и делает 58 запросов вместо 107. Кнопка «Назад» работает мгновенно, на фотографиях работ больше нет заглушек «нет изображения», а в форме заявки подставляется телефон. Все правки сделаны за один день на работающем сайте — по одной, с замером после каждой; формы и капча проверены реальной заявкой. Контрольный Lighthouse через две недели: 93 / 92 / 100 / 92. Через месяц эффект дошёл до поиска: позиции сайта по основным запросам заметно выросли.
Чек-лист: семь вопросов к вашему сайту
Если 5.x или 7.0–7.3 — двукратное ускорение может стоить одного переключателя в панели. Но сначала проверьте совместимость CMS: в этом кейсе 8.0 оказалась закрыта.
Откройте её отдельно и посмотрите размер. Больше 100 КБ и не WebP — почти наверняка есть что улучшить. Проверьте и предзагрузку: указывает ли она на нужный файл.
Капчи, чаты, виджеты, карты. Всё, что нужно только после действия посетителя, должно и загружаться после него.
Откройте сайт с телефона по мобильной сети и пролистайте до фотографий работ. Если видите «нет изображения» хоть на секунду — ленивая загрузка настроена неправильно.
Перейдите на внутреннюю страницу и вернитесь. Если страница загружается заново — сервер запрещает браузеру держать её в памяти.
Нажмите на поле номера с телефона: должны появиться цифровая клавиатура и подсказка автозаполнения. Если нет — часть заявок теряется на ровном месте.
Отправьте тестовую заявку, войдите в админку, загрузите фото. Каждая правка на живом сайте — это и возможность что-то испортить.