Про проєкт
kvv-group.com — це офіційне цифрове представництво великого промислово-інвестиційного холдингу KVV Group, ключові напрямки діяльності якого охоплюють заготівлю та переробку металобрухту, будівництво, логістику та міжнародну металургію. Холдинг веде діяльність як в Україні, так і на європейському ринку.
Замість використання важких стандартних CMS, які перевантажують сервер та створюють сотні зайвих запитів, проєкт було реалізовано як легкий «самописний» сайт на чистому PHP.
Сайт складається з кількох лаконічних інформаційних сторінок зі стандартними контентними блоками. Головна перевага такого підходу – абсолютна чистота коду, блискавична швидкість роботи «з коробки» та можливість реалізувати нестандартні інтерактивні елементи без підключення сторонніх плагінів чи бібліотек.
Завдання, які стояли перед SebWeo:
- Розробка архітектури на чистому PHP: Створення простого, надійного та швидкого каркаса сайту без прив’язки до великих систем керування (CMS).
- Інтерактивна мапа представництв: Реалізація кастомної мапи України з клікабельними містами в розділі «Представництва» для зручної навігації філіалами.
- Кастомна інтеграція Google Maps: Налаштування та оптимізація карти на сторінці «Контакти» без уповільнення загального рендерингу сторінки.
- Максимальна оптимізація швидкості: Збереження природної легкості чистого PHP, вихід на рекордні показники в Google PageSpeed Insights.
Що було зроблено:
- Чиста архітектура на PHP. Ми відмовилися від сторонніх движків та розгорнули сайт на чистому PHP. Сторінки збираються з модульних блоків на стороні сервера. Це забезпечило нульове навантаження на базу даних та миттєву генерацію HTML-коду. Сайт важить лічені кілобайти і віддається користувачеві без жодних затримок (ідеальний показник TTFB — Time to First Byte).
- Інтерактивна мапа України («Представництва»). Головна фішка розділу — кастомна векторна мапа України. Ми реалізували її за допомогою легкого інтерактивного SVG-формату. Кожне місто є клікабельним елементом:
- При кліку користувач миттєво отримує інформацію про конкретне регіональне представництво, з можливістю прокласти маршрут.
- Оскільки це чистий вектор та мінімалістичний нативний JavaScript (Vanilla JS, ES6), мапа важить мінімум, ідеально масштабується на мобільних пристроях і не створює зсувів макета (повна стабільність CLS).
- Оптимізація сторінки «Контакти» та Google Maps. Звичайне підключення Google Maps через стандартний iframe сильно «б’є» по швидкості завантаження сторінки через купу сторонніх скриптів Google. Ми реалізували ліниве завантаження карти: важкі скрипти Google Maps ініціалізуються та підтягуються лише тоді, коли сторінка повністю завантажилась, або коли користувач починає взаємодіяти з блоком контактів.
Інтеграції та технологічний стек:
- Бекенд: Чистий PHP — швидка серверна збірка сторінок.
- Фронтенд: Адаптивний HTML5 / CSS3 (Flexbox/Grid), SVG для графічних елементів та інтерактивної карти.
- Скрипти: Чистий, легкий Vanilla JavaScript (часткова відмова від jQuery та важких UI-бібліотек).
- API: Оптимізована інтеграція Google Maps API.
Результат
Для KVV Group було створено максимально легкий, швидкий та надійний сайт-візитку. Це високопродуктивний міжнародний вебпортал, який ідеально виконує іміджеву функцію холдингу. Завдяки розробці на чистому PHP та відмові від важких JS-фреймворків, сайт отримав максимальні 100 балів у тестах Google PageSpeed Insights. Інтерактивна мапа України та оптимізована карта Google Maps забезпечили користувачам зручний UX, зберігши технічну бездоганність та високу швидкість завантаження на будь-яких пристроях. Що повністю відповідає преміальному статусу великого бізнесу.
