Сайт фотографа на 1С-Бітрікс: портфоліо, бронювання, кабінет

Фотограф завантажує знімки в 4K — відвідувачі скаржаться на довге завантаження. Галерея з 30 фото важить 150 МБ і грузиться 15 секунд. Результат — втрата клієнтів. Наша компанія — 10+ років досвіду в розробці на 1С-Бітрікс, понад 50 проєктів для фотографів — підтверджує: навіть десятки галерей не впливають на швидкість. Сертифіковані розробники 1С-Бітрікс гарантують оптимізацію Core Web Vitals та стабільну роботу. Розробка на 1С-Бітрікс дозволяє упакувати візуал у WebP, налаштувати CDN і дати клієнтам особистий кабінет для завантаження. Економія: використання CDN скорочує витрати на трафік до 200 доларів на місяць. Зв'яжіться з нами для консультації — ми покажемо кейси.

Чому 1С-Бітрікс обирають для сайту фотографа?

Платформа дає готові модулі інфоблоків, теговане кешування та фонові агенти. Для портфоліо використовуються інфоблоки v2.0 з множинними файловими властивостями. Бронювання, особистий кабінет і блог закриваються штатними інструментами. Вбудований модуль SEO генерує sitemap та Schema.org розмітку автоматично. Згідно з документацією Бітрікс (див. https://helpdesk.bitrix24.ru/), компонент 2.0 і ORM забезпечують високу продуктивність навіть при навантаженні в тисячі запитів.

Як оптимізувати портфоліо для швидкого завантаження?

Портфоліо — ядро сайту. Фотограф завантажує знімки 4000–6000 px, 5–15 МБ кожен. Відвідувач має бачити галерею миттєво. Ключові метрики LCP, FID, CLS мають бути в зелених зонах.

Крок 1: Структура інфоблоку

• Розділи: жанри (весільна, репортажна, предметна, портретна).
• Елементи: фотосесії або серії.
• Властивості: опис, дата, локація, множинна файлова властивість «Фотографії».

Крок 2: Генерація мініатюр

Після завантаження фотографії обробник OnAfterIBlockElementUpdate запускає фонове завдання. Використовуються агенти. Набір мініатюр:

Оригінал зберігається, але не віддається напряму — тільки через мініатюри. CFile::ResizeImageGet() з пропорційним ресайзом зберігає пропорції. WebP конвертується через Imagick, перевірка підтримки через Accept-заголовок або тег <picture>. WebP кращий за JPEG у 2–3 рази за розміром при тій самій якості.

Крок 3: Lazy loading з прогресуючим відображенням

Стандартний loading="lazy" часто дає стрибаючу розкладку. Наше рішення з використанням Intersection Observer вдвічі швидше за звичайний підхід:

1. Placeholder з домінантним кольором — при завантаженні фото витягується середній колір (PHP) і зберігається у властивості елемента. У CSS placeholder фарбується в цей колір.
2. Blur-up — мікро-прев'ю 20×13 px (< 1 КБ) інлайниться в HTML як base64, відображається розмитим. При завантаженні реальної картинки — плавна заміна через CSS transition.
3. Intersection Observer — кастомний скрипт завантажує зображення при наближенні до viewport (margin 200px).

Сітка галереї — Masonry на CSS Grid: grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)). Lightbox — Fancybox 5 або GLightbox з підтримкою свайпу.

Крок 4: Підключення CDN

Для аудиторії з різних регіонів CDN обов'язковий. Налаштування через модуль CDN Бітрікс або ручна конфігурація nginx з проксіюванням на CloudFlare / BunnyCDN. Мініатюри віддаються через CDN, оригінали — з сервера напряму. CDN скорочує час завантаження для віддалених користувачів на 40–60%.

Захист від завантаження

Повністю заборонити не можна, але ускладнюється:

• Відключення контекстного меню (JavaScript).
• Водяний знак на відображуваних версіях.
• Віддача через CSS background-image замість <img>.

Результат: галерея з 30 фото завантажується за 1.5–2 секунди на мобільному LTE. Перший екран відображається за 0.8–1 секунду завдяки інлайн-placeholder і preload hero-зображення.

Бронювання зйомки та онлайн-запис

Бронювання впроваджується через інтерактивний календар зайнятості на основі інфоблоків. Клієнт бачить вільні дати, натискає на потрібний день і заповнює форму з ім'ям, телефоном, типом зйомки. Заявка створює лід у CRM Бітрікс24 або надсилає email. Після підтвердження фотограф змінює статус дня через адмінку. Інфоблок «Послуги» містить пакети (погодинні, повні) з кнопкою «Забронювати».

Блог і SEO

Блог привертає трафік за запитами типу «як підготуватися до весільної фотосесії» та демонструє експертність. Реалізується через стандартний інфоблок новин. SEO: ЧПУ через urlrewrite, мета-теги через властивості інфоблоку, хлібні крихти, Schema.org Article в JSON-LD. Sitemap генерується модулем SEO.

Клієнтський кабінет для видачі фотографій

Замість Яндекс.Диска — закрита галерея на сайті. Інфоблок «Клієнтські галереї»: прив'язка до користувача, дата зйомки, набір фото, статус, термін доступу. Доступ: авторизація або посилання з паролем. Галерея з lightbox, завантаження окремих фото або ZIP-архіву через ZipArchive. Водяний знак на прев'ю — через GD/Imagick.

Що входить у роботу та терміни

• Аналітика та прототипування структури портфоліо, послуг, календаря.
• Дизайн макету з акцентом на мобільну версію.
• Налаштування інфоблоків, генерації мініатюр, агрегатного кешування (Memcached/Redis).
• Розробка клієнтського кабінету з авторизацією та онлайн-записом.
• Інтеграція CDN, оптимізація Core Web Vitals (LCP, FID, CLS).
• Передача документації, навчання, пост-запускна підтримка.

Разом: 7–9 тижнів. Критично отримати фотоматеріали заздалегідь — обробка та завантаження займають більше часу. Середня вартість такого проєкту — від 1500 до 3000 доларів залежно від складності.

Отримайте консультацію інженера: зв'яжіться з нами для обговорення вашого проєкту. Ми запропонуємо оптимальне рішення під ваші завдання з гарантією результатів.

Як правильно проектувати інфоблоки?

Ми бачимо десятки проєктів, де неправильна структура інфоблоків перетворює сайт на гальмо. Типовий сценарій: замовник просить «каталог товарів». Розробник створює один інфоблок catalog, закидає туди 15 властивостей. Через півроку — 40 властивостей, 8 з яких використовуються лише для однієї категорії. Фільтр гальмує, таблиця b_iblock_element_property розрослася до мільйонів рядків, CIBlockElement::GetList виконується 3 секунди. Наслідки — падіння конверсії, втрата клієнтів, додаткові витрати на оптимізацію. В одному проєкті після рефакторингу каталогу час генерації сторінки знизився з 4,2 до 0,8 секунди, а вартість підтримки значно скоротилася — за рахунок усунення надлишкових запитів та агентів.

Наш підхід: проектуємо інфоблоки до першого рядка коду. Окремі інфоблоки під сутності (товари, категорії, бренди), властивості-довідники через HL-блоки, торгові пропозиції для SKU. Це закладає продуктивність на роки вперед. Якщо хочете отримати попередній аудит вашої схеми інфоблоків — зв'яжіться з нами, розберемо типові помилки та надамо рекомендації.

Чому 1С-Бітрікс вигідніший за альтернативи?

Вибір CMS диктується не уподобаннями, а бізнес-завданнями. Ось ключові аргументи:

• Нативний обмін з 1С — модуль catalog.import.1c забезпечує двосторонній обмін товарами, цінами, залишками та замовленнями через CommerceML. Без сторонніх модулів. Це в 5 разів швидше, ніж розробка власного обміну на OpenCart або WordPress. Економія на інтеграції — до 200 000 грн порівняно з кастомними рішеннями.
• Проактивний захист — модуль security включає WAF, контроль цілісності файлів, захист від SQL-ін'єкцій, двофакторну автентифікацію. Для проєктів з вимогами ФСТЭК — сертифіковане рішення (згідно з Wikipedia, це стандарт для корпоративних систем).
• Модульна архітектура — підключаємо лише потрібні модулі: iblock, catalog, sale, search. Менше модулів — менше запитів до БД на кожен хіт.
• Регулярні патчі — вендор випускає security-патчі, закриваючи вразливості швидше, ніж open-source проєкти (середній час виправлення CVE — 2 тижні). Офіційна документація по модулях доступна на сайті розробника.

Що дають HL-блоки і як ми прискорюємо каталог

Highload-блоки — це альтернатива розширеним властивостям інфоблоків, коли список значень може зростати до тисяч записів. Типовий приклад: виробники, країни, кольори. Якщо зберігати їх як властивості-списки в інфоблоці, кожна фільтрація викликає повне сканування таблиці b_iblock_property_enum. З HL-блоками вибірка йде по індексу — час відповіді фільтра знижується з 1–2 секунд до 50 мс. Продуктивність HL-блоків у 8 разів вища за властивості-списки інфоблоків. Ми використовуємо HLB компонент і кастомні запити через Bitrix\Highloadblock\DataManager. Це особливо критично для каталогів з 100 000+ товарами.

З нашої практики — проєкт інтернет-магазину з 500 000 товарів. Стандартний фільтр по бренду виконувався 4 секунди. Сервер не витримував навантаження в 50 одночасних запитів — сторінки падали. Ми перевели довідник брендів у HL-блок, додали теговане кешування на 15 хвилин і налаштували агент для скидання кешу при зміні. Після доопрацювання час фільтрації склав 120 мс, середній LCP сторінки — 1,8 секунди. Проєкт працює стабільно без збоїв.

Що входить у розробку сайту на 1С-Бітрікс

Кожен проєкт включає повний комплект документації та артефактів, що виключає втрату знань після передачі.

• Технічне завдання — user stories, діаграми інфоблоків, схеми інтеграцій.
• Вихідний код у Git — з історією комітів, тегами релізів, правилами гілкування.
• Адміністративна документація — опис кастомних компонентів, інструкції з розгортання, перелік агентів і подій.
• Навчання співробітників — до 3 годин вебінару: панель управління, робота з замовленнями, налаштування цін. Записуємо, щоб можна було переглянути.
• Доступ до staging на час розробки — тестуєте самостійно до деплою на продуктив.
• Гарантійна підтримка — виправлення помилок коду протягом 30 днів після запуску. Післягарантійні абонентські пакети з SLA (реакція 2 години, рішення 8 годин).

Наш процес і технології

Стек: верстка mobile-first, тестуємо на фізичних пристроях (iPhone, iPad, Android). Використовуємо BrowserStack для Safari на iOS. Продуктивність — LCP < 2,5 с, FID < 100 мс, CLS < 0,1. Включаємо композитний сайт (composite), CDN, теговане кешування, WebP/AVIF, lazy loading. SEO — Schema.org через JSON-LD, автогенерація sitemap.xml модулем seo, canonical і hreflang для мультимовних версій. robots.txt закриваємо /bitrix/ від індексації. CI/CD — Git, автодеплой через GitLab CI, staging. Міграції бази — модуль sprint.migration з версіонуванням.

Процес роботи:

1. Аналітика — вивчаємо конкурентів, збираємо вимоги, малюємо прототипи в Figma. На виході — ТЗ з user stories.
2. Дизайн — UI/UX з дизайн-системою. Компоненти перевикористовуються.
3. Розробка — пишемо компоненти з кастомними шаблонами в local/templates/. Бізнес-логіку виносимо в модулі local/modules/.
4. Тестування — функціональне, кросбраузерне, навантажувальне (до 1000 запитів). Критичні баги виправляємо до запуску.
5. Запуск — деплой на прод, моніторинг через UptimeRobot, алерти в Telegram. Усуваємо перші 48 годин.

Інтеграції, мультимовність і редизайн

• Повна локалізація через мовні файли lang/ і механізм SITE_ID. hreflang для кожної версії. Регіональні версії з різними цінами та контентом — визначення за IP (main.geo) або ручний вибір. Мультидоменність — єдине управління кількома доменами.

• Редизайн без втрати позицій: аудит продуктивності (PageSpeed, WebPageTest), SEO (Screaming Frog). Новий шаблон у local/templates/ із збереженням URL-структури. 301-редиректи лише якщо URL змінюється суттєво. Оновлення ядра, перехід на D7 ORM, реструктуризація інфоблоків, міграція через sprint.migration з Git.

Гарантія та підтримка

Ми працюємо з 1С-Бітрікс 12+ років, реалізували 500+ проєктів. У штаті сертифіковані розробники. Фіксована вартість у договорі — без сюрпризів. Гарантійний період покриває помилки коду. Після — абонентські пакети з SLA (час реакції — 2 години, рішення — 8 годин). Моніторинг доступності 24/7, алерти в Telegram. За потреби отримайте попередній аудит — зв'яжіться з нами через форму на сайті або напишіть у чат, відповімо протягом години. Замовте розробку під ключ — ми спроєктуємо інфоблоки, інтегруємо 1С і розженимо каталог. Якщо вже є сайт на іншій CMS — замовте аудит продуктивності та міграцію на Бітрікс.