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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Улучшили производительность.

• Сделали три независимых блока (О Часе Земли, Как участвовать, Партнеры).

• Кнопка “Выключу” и лампочка. При наведении выключатель меняется, “лампочка” гаснет. При клике выходит окно для регистрации участника.

  Запускается таймер обратного отсчета до начала акции. В момент начала акции надпись “выключу свет через …” сменялась на “выключу свет” и начинался отсчет от 60 до 0 минут. Через неделю после акции счетчик обновляется на следующий год.

• Все это время на сайте есть видео, которое в период акции заменяется на прямую трансляцию.
• Счетчик “С нами … человек” обновляется по количеству лидов.Можно пройти тест “Узнай свое экопредназначение”. После — можно сравнить свой результат с результатами звезд.

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

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

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