Борьба за жизнь сайта после фрилансеров: кейс ускорения сайта

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

Дано: интернет-магазин детской мебели. Сайт сделан дружной кампанией любителей Wordpress. Да, магазин на Wordpress. А что? Дёшево ведь. Поскольку статья не про Wordpress, могу сослаться на статью о нём, чтобы исключить лишние бурления народных масс.

Запущена атомная лидогенерация на сайт по различным каналам. Рекламный бюджет — несколько сотен тысяч рублей в месяц. Это тот самый случай, когда закапывают деньги: рекламный бюджет на порядки больше затрат на разработку и поддержку. Конечно, есть жалобы на работу сайта. До такой степени, что сами клиенты уже звонят и жалуются. Сайт откровенно тормозит. Команда разработчиков разводит руками: мы все оптимизировали.

Процесс

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

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

Как обычно, пункт ноль это аудит. Определяем узкие места производительности (инструменты Google PageSpeed Insights, WebPagetest, Chrome Developers tools).

Были определены проблемы:

• в каталоге товаров в качестве миниатюр использовались исходные фото (примерно по 2000 px, а это лишние 5-10 секунд загрузки страницы списка товаров), загружены и прописаны в карточки товаров они были вручную, возможности фотогалереи не были задействованы — пришлось делать миниатюры, прописывать в каталоге, оптимизировать большие фото;
• подгружались внешние шрифты Google Fonts — сделали локальную загрузку, оптимизировали файлы шрифтов;
• обнаружено много подгружаемых файлов JS, которые по факту не использовались на страницах сайта;
• замусоренный CSS, чрезмерная фрагментация — уборка лишних стилей, объединение в один файл;
• старые версии JS-библиотек (jQuery и его плагинов) — обновлены до актуальных версий;
• код шаблонов имел блокирующие элементы — исправлена верстка, расположение блокирующих элементов в коде, перевод некоторых частей кода на асинхронную загрузку.

Оптимизированная версия сайта прошла тестирование на отдельном сервере, принята Заказчиком. Были сделаны замеры производительности, сняты согласованные в договоре метрики скорости работы. В процессе работы был найден оптимальный баланс между баллами Google PageSpeed Insights и субъективной скоростью для обычного посетителя (сервис Google PSI не всегда корректен в рекомендациях).

Только после этого новый вариант опубликован в интернет.

Что сделано:

• перенос сайта на выделенный сервер в дата-центре Selectel (Москва) — с учетом данных по географическому распределению аудитории сайта. Причины перехода на отдельный сервер: нагрузка 12000 хитов в сутки с перспективой роста, независимость от других сайтов на хостинге, стабильность работы, размещение на этом же сервере других проектов заказчика;
• настройка веб-сервера на максимальную производительность (тюнинг Nginx, MySQL);
• настроен мониторинг доступности сервера с уведомлением на почту и смс;
• настроено инкрементальное резервное копирование данных;
• настройка работы HTTP/2 и TLS;
• клиентская оптимизация сайта (картинки, скрипты, HTML-код шаблонов, CSS) — размер страницы каталога сократился в 2-3 раза без потери функционала.

Результат

Интегральная скорость загрузки страниц поднялась в 2-3 раза при уменьшении размера страниц в 1.5-2 раза. Такой эффект достигнут засчет синергетического влияния отдельных компонентов ускорения на общий результат. Оптимизированы как серверная, так и клиентская части. Написано руководство для разработчиков, чтобы не ходить по граблям.

Заказчик был весьма доволен результатом и заказал ускорение своего второго сайта-лендинга.

Что не так с разработчиками?

Надо сказать несколько слов о разработчиках. Их непосильный труд привел к печальному результату. Почему:

• спорный выбор платформы (Wordpress) для ИМ, причем еще и некорректное использование возможностей CMS, реализация функционала в лоб;
• отсутствие клиентской оптимизации, нет культуры разработки оптимизированного кода, минификации, оптимизации изображений — всё грузят как есть, по любимому принципу и так сойдёт.

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

Также не было технически грамотного руководителя проекта. Всего один пример: сайт на момент начала работ размещался на низкокачественном виртуальном хостинге. Это не позволяло сделать важные серверные оптимизации и держать хоть сколько-нибудь значительные нагрузки.