Ко мне обратилась студия ремонта и дизайна интерьеров с большим сайтом на WordPress: портфолио проектов, страницы услуг, разделы по жилым комплексам, блог, формы заявок. Проблема была в том, что сайт открывался очень медленно, особенно с телефонов. Первый экран на мобильном появлялся почти через 8 секунд, тяжёлые скрипты подвисали при касании, а оценка скорости в Google PageSpeed держалась в красной зоне (около 29 из 100). Бизнес много вкладывается в рекламу и приводит людей именно на сайт и такая скорость означала потерю заявок: посетитель просто не дожидался загрузки и уходил.
Ситуацию усложняло то, что сайт жил на общем хостинге (Beget shared), диск аккаунта был заполнен на 95 процентов и был выбран не эффективный тариф с общей стоимостью в 25 тыс/год, а сама тема оказалась очень тяжёлой, с большим объёмом встроенного кода и медиа. Накопились гигабайты исходных фотографий с камер, архивных файлов и старого мусора.
Цель простая: сделать сайт быстрым. Вывести его в верхнюю оранжевую или зелёную зону по скорости (Performance 80+, быстрый показ первого экрана, отзывчивость на телефонах), без потери функционала, без редизайна и без переезда на дорогой сервер. То есть выжать максимум из того, что уже есть.
Я начал с аудита: замерил реальные показатели по ключевым страницам(главная + 3 типа шаблонов по карточкам и "лёгкая" блоговая запись), нашёл главные проблемы медленной загрузки и составил примерный пошаговый план. Затем резервное копирование, временно расширение хостинга на ещё более дорогой тариф для работы с графикой.
Первым делом разгрузил диск. Удалил тяжёлый мусор: исходные фотографии с камер (если они не использовались на сайте), архивные изображения, неиспользуемые видео, тестовые библиотеки и старые служебные файлы. Освободил около 4.5гб.
Затем выгрузил всю графику и пережал её + на пережатую графику сформировал архив webp изображений. Ещё минус 17 гб. uploads 47 -> 30 гб (jpg+webp).
Тяжёлое видео на главной (около 33 мегабайт), которое сильнее всего тормозило первый экран, заменил на лёгкую картинку-постер, а само видео стал подгружать позже, в фоне, когда страница уже показана. Заодно убрал скачки вёрстки при загрузке, задав размеры элементам.
Дальше занялся самой скоростью. Полноценное кэширование страниц, чтобы сервер не собирал каждую страницу заново при каждом заходе. Кэширование данных в оперативной памяти через Redis: время ответа сервера упало с примерно 1.2 секунды до 0.1 секунды. Перевёл системные задачи на отдельное расписание (WP-cron переведён на системный cron), чтобы они не тормозили каждую загрузку.
Затем взялся за то, что грузит браузер. Отложил выполнение тяжёлого JavaScript, чтобы он не блокировал показ страницы, настроил исключения для форм, карт и аналитики. Лишние библиотеки подключаются только на тех страницах, где они реально нужны. Все рекламные и аналитические скрипты (пиксели соцсетей, виджеты, счётчики) перевёл на ленивую загрузку: они подгружаются только после первого действия пользователя, а не сразу. Капчу на формах тоже сделал ленивой, чтобы она не висела на каждой странице.
Сайт вышел в зелёную зону по скорости. Оценка Performance на мобильных выросла примерно с 29 до 90, на десктопе держится на уровне 95 из 100. Первый экран теперь появляется примерно за 2.3 секунды вместо 8, время ответа сервера сократилось с 1.2 секунды до 0.1, вес главной упал с 27 мб до 2.
Сайт остался на том же недорогом хостинге, но его стоимость теперь 11тыс/год, ничего из функционала не потеряно: формы, заявки, карты и аналитика работают как прежде.
Пожаловаться
