купи-медцентр.рф: лендинг на Astro, который весит меньше одной фотографии

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

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

Готовый HTML вместо приложения. Astro собирает сайт заранее: в браузер уходит обычная страница, а не JavaScript, который строит её на месте. HTML этого сайта после сжатия весит 5 КБ, стили — 6 КБ.

Острова — когда они нужны. Если на странице понадобится калькулятор или форма на React, Vue или Svelte, Astro подключит такой компонент отдельным «островом», и его код загрузится только для этого кусочка страницы. Здесь не понадобилось ни одного: переключатель темы и мобильное меню — два коротких встроенных скрипта.

Быстро собрать. Вёрстка — Tailwind CSS 4 через Vite, HTML дополнительно сжимается при сборке. Сайт вырос из готовой темы, переделанной под задачу, и собирается за пару секунд.

Первая версия страницы весила 1,36 МБ, и почти всё это были три картинки: фотография на первом экране в JPG и два PNG с прозрачным фоном, один из них — 838 КБ. Телефон получал те же файлы, что и большой монитор.

Теперь картинки подключены через встроенный в Astro компонент <Picture>. При сборке он сам нарезает каждую в нескольких размерах, в AVIF и WebP, сохраняет прозрачность и прописывает браузеру, какой размер нужен для какого экрана. Первая фотография грузится в первую очередь, остальные — только когда до них докрутят. На компьютере все три картинки теперь весят 46 КБ, на телефоне — 65 КБ.

Цель страницы — звонок, поэтому номер телефона стоит в шапке (на телефоне — в меню) и крупной кнопкой в финальном блоке, и по нажатию сразу начинается вызов. Яндекс Метрика считает не только визиты, но и нажатия на номер, так что видно, сколько людей дошло до звонка.