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

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

Так вот, мы 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 запросов в секунду.

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

Результат

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

Михаил Волков, Руководитель digital-проектов WWF России

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

33
4 комментария

К вам никаких претензий. Но час земли - это бред и кроме сбоев в системах энергоснабжения ничего никому не приносит. ИМХО

1

а как бы вы привлекли внимание к проблеме?
интересно какие еще варианты можно сделать