Борьба за жизнь сайта после фрилансеров: кейс ускорения сайта
В ходе своей работы мы постоянно сталкиваемся с примерами некачественной разработки сайтов с точки зрения скорости. Поскольку скорость это наша специализация, а ситуация из раза в раз повторяется, решили даже написать статью.
Дано: интернет-магазин детской мебели. Сайт сделан дружной кампанией любителей 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, реализация функционала «в лоб»;
- отсутствие клиентской оптимизации, нет культуры разработки оптимизированного кода, минификации, оптимизации изображений — всё грузят «как есть», по любимому принципу «и так сойдёт».
Самое плохое и неприятное — даже после составления подробного руководства по приемам оптимизации в разработке, программисты продолжили ваять код «на своей волне». Контент-менеджеры продолжали грузить огромные фото без обработки. Просто так проще и быстрее. Вот как банально технические усовершенствования хоронят из-за ленивого, нерадивого разраба, вебмастера.
Также не было технически грамотного руководителя проекта. Всего один пример: сайт на момент начала работ размещался на низкокачественном виртуальном хостинге. Это не позволяло сделать важные серверные оптимизации и держать хоть сколько-нибудь значительные нагрузки.
