Как мы улучшили производительность сайта акции “Час Земли”

Наверное, вы слышали об экологической акции “Час Земли”?

Так вот, мы Sailet, и нам удалось поучаствовать в организации этого мероприятия в 2021 году.

Как мы улучшили производительность сайта акции “Час Земли”

Мы — студия Sailet. Занимаемся web-разработкой, разработкой приложений, автоматизацией бизнес-процессов.

создаем корпоративные и государственные порталы;
веб-системы с разнообразными интеграциями;
SAAS-сервисы;
мобильные приложения на системах Android и IOS.

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

Организатор и наш клиент — Всемирный фонд дикой природы(WWF)

В 2021 году Час Земли второй год подряд прошел в онлайн-формате. “Выключить свет” участники могли в сторис в социальных сетях, а также на сайте. Именно мы отвечали за работу сайта, поэтому на нас лежала огромная ответственность.

Кампания прошла под девизом “Откройся!” и была посвящена вопросам открытости экологической информации.

С каждым годом акция становится все популярнее. Ожидался большой наплыв. Заказчик хотел, чтобы мы создали сайт на старом движке.

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

Процесс работы:

Поднять старый сайт;
Перетащить на новые сервера;
Обновить админку;
Накатить фронт.

В целом, все просто. Но проблема в том, что сайт высоконагруженный. Поэтому архитектура была такой:

Админка на Битриксе;
Апи на кохане;
Все это общается через RabbitMQ;
Обновление карты и контента запуском скриптов через крон.

Топорно, но ничего не поделаешь. Документации по минимуму. Методом тыка развернули, перетащили. Накатили фронт на React. Спойлер: в этом году полностью переделываем сайт на octobercms.

Итоговый дизайн со всеми состояниями и адаптивом.

Мы сделали (мини-плюшечки):

Улучшили производительность.
Сделали три независимых блока (О Часе Земли, Как участвовать, Партнеры).
Кнопка “Выключу” и лампочка. При наведении выключатель меняется, “лампочка” гаснет. При клике выходит окно для регистрации участника.
Запускается таймер обратного отсчета до начала акции. В момент начала акции надпись “выключу свет через …” сменялась на “выключу свет” и начинался отсчет от 60 до 0 минут. Через неделю после акции счетчик обновляется на следующий год.
Все это время на сайте есть видео, которое в период акции заменяется на прямую трансляцию.
Счетчик “С нами … человек” обновляется по количеству лидов.Можно пройти тест “Узнай свое экопредназначение”. После — можно сравнить свой результат с результатами звезд.

Все это было разнесено на три сервера: фронт, запасной фронт+апи, админка на битриксе. Делали с мыслью, что лучше перебдеть, чем недобдеть. И были правы :).

Максимально облегчили нагрузку на серверы и, в то же время, сохранили весь функционал предыдущего года. В период пиковой нагрузки выделялись дополнительные мощности. Сайт по сути трехмесячный. За время акции сайт принял чуть больше 410 000 посетителей, работал без перебоев. Но, основной поток уников был в день акции — больше 81 000. В моментах было 25-30 запросов в секунду.

Большое спасибо студии Sailet за подготовку сайта акции “Час Земли 2021.” Команда собрала быстрый стабильный адаптивный сайт с современным дизайном. Конверсия в регистрацию составила более 20% - это отличный результат для акции, особенно с учетом сложности темы экологической открытости.
Михаил Волков, Руководитель digital-проектов WWF России

Большая нагрузка не помешала обеспечить стабильную работу сайта. И он даже не “колыхнулся” в самый пик. Конверсия сайта более 20%. Заказчик остался доволен нашей работой и продлил с нами сотрудничество. Сейчас занимаемся разработкой сайта уже на 2022 год.

Как мы улучшили производительность сайта акции “Час Земли”

Кто мы такие?

О проекте

Работа над проектом

Результат