Гигантский сайт для недвижимости

К нам обратился клиент с запросом на создание быстрого и удобного сайта. У клиента был собственный дизайн будущего проекта. Это агентство недвижимости, в базе которого находилось огромное количество объектов. В общем, это очень крупный проект с большим количеством сущностей. Ниже — их статистика.

• 415+ тыс. страниц
• 14 языков
• 4 валюты
• 150 тыс. фото

Стек:

• Astro JS, React JS, Linaria css
• Strapi JS, Postgresql, Node JS
• Docker, Prometheus
• OpenAI для переводов.

Первые результаты

В течение месяца после завершения всех работ сайт получил рост органического трафика на 450 %, а средняя позиция в поиске улучшилась с 30-й до 10-й.

В чем причина? Грамотная работа с ресурсом и использование Astro JS.

Мультиязычность

Сайт поддерживает 14 языков. В административной панели контент можно создавать и редактировать на одном языке — после этого он автоматически переводится на остальные. За перевод отвечает ChatGPT: он не только выполняет перевод, но и проверяет его качество. Работают две модели.

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

Мультивалютность

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

Гибридный рендеринг страниц и оптимизация загрузки

Страницы сайта рендерятся по разным сценариям. Часть создается статично SSG, а другая часть генерируется по запросу SSR on demand. Такой подход позволяет показывать пользователю основные страницы максимально быстро и при этом значительно сокращает время сборки проекта, учитывая, что суммарное количество страниц около 415 тысяч.

Чтобы сайт работал очень быстро, мы использовали два механизма:

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

Также на сайте есть дополнительные способы оптимизации: все картинки, которые попадают на сайт из CMS, конвертируются в WebP формат, оптимизируются по качеству, и для каждой фотографии делается несколько вариантов для разных размеров экрана. Здесь мы добиваемся сразу простоты и скорости - людям, заполняющим контент сайта, не нужно думать об оптимизации картинок, они получают такие картинки автоматически на сайте, независимо от того, какую картинку они загрузили в CMS.

Отдельное внимание уделялось точечной настройке компонентов системы для максимальной производительности. Сюда относятся: настройка кеша на уровне прокси-сервера, грамотное использование keepalive соединений, оптимизация пула соединений БД под используемую платформу.

Библиотека компонентов и превью страниц

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

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

Тестирование скорости загрузки

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

Загрузка контента для сайта из Google Таблиц

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

Кроме создания, через таблицу можно обновлять существующие объявления. Достаточно изменить значения в таблице, и при загрузке обновятся только те поля, которые были изменены.

Мониторинг сервера

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

Изначальный переезд сайта

Сайт разрабатывался не с нуля. Мы выполнили переезд с Modx и преобразовали всю структуру базы данных под новую архитектуру.

Документация

Весь код фронтенда и бекенда задокументирован для разработчиков и других заинтересованных участников.

Партнерские объявления

На сайте также размещаются объявления от компаний партнеров. Перед публикацией они проходят обработку AI алгоритмами, чтобы точно соответствовать формату наших объявлений.

Карта

На самом сайте есть производительная гугл карта которая отображает 10 тыс. + объявлений в разных странах и городах с кластеризацией и удобным просмотром этих объявлений прямо на карте