72 карточки квартир на Tilda: что пришлось изменить, чтобы сайт загружался за 2 секунды

Застройщик «Азбука Development», с которым мы уже сотрудничали, обратился к нам за разработкой сайта для ЖК бизнес-класса MONTEROSSO в Ереване. Нужна была площадка для презентации комплекса, выбора квартиры и сбора заявок от покупателей из разных стран.

Мы разработали сайт на Tilda на армянском, русском и английском языках. Одной из самых сложных задач стал показ 55 уникальных планировок в 72 карточках: после наполнения первая версия сайта загружалась около 7 секунд, а в некоторых тестах на iOS не открывалась вовсе.

Как организовали выбор квартиры

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

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

Что изменили после тестов

В первой версии для подробной информации о каждой квартире использовали отдельный Zero Block с изображениями и описанием. После наполнения такой способ подачи перегружал страницу. Мы проверили её в разных браузерах и на разных устройствах: в тестовой версии сокращали количество планировок, но проблемы на iOS сохранялись. Поддержка Tilda подтвердила, что причина — в объёме контента.

Сокращать выбор квартир было нельзя, поэтому мы изменили способ показа подробностей. Площадь, особенности и описание квартиры, кнопку «Узнать цены» и переход к 3D-туру перенесли непосредственно в карточки. Это позволило сохранить информацию о квартирах и сократить количество отдельных блоков. Карточки внутри каждой подборки объединили в слайдеры.

Дополнительно убрали CSS-стили и JS-анимации, которые не требовались для основных функций сайта. Вместо сложных эффектов оставили плавные появления элементов. После этих доработок время загрузки сократилось примерно с 7 до 2 секунд. Все 55 уникальных планировок сохранили. 

Что учесть при разработке похожего сайта

На этом проекте мы убедились, насколько важно проверять страницу после наполнения реальными материалами. Несколько тестовых карточек ещё не показывают, как сайт будет работать со всеми изображениями и описаниями.

Если на сайте ЖК планируется большой блок планировок, в проверку стоит включить:

• загрузку страницы со всем объёмом контента на разных устройствах, в том числе на iOS;

• переключение подборок и просмотр карточек на смартфоне;

• доступность характеристик квартиры и кнопки обращения в отдел продаж.

Что получилось в целом

Разработка сайта MONTEROSSO заняла 35 рабочих дней. Мы адаптировали фирменный стиль клиента для сайта, подготовили три языковые версии и сохранили возможность самостоятельно обновлять контент в Tilda. Сайт получил награду Made on Tilda и вошёл в галерею лучших проектов платформы.

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

В полном кейсе на нашем сайте показываем дизайн MONTEROSSO, три языковые версии и весь процесс разработки — от структуры страницы до работы с планировками.