O kliencie
LPG View to platforma do monitoringu zbiorników LPG firmy IPS SYSTEM Przemysław Śmiechowski. System umożliwia zdalne monitorowanie poziomu gazu w zbiornikach zarówno klientom indywidualnym (DOM), jak i biznesowym (BIZNES), oferując dashboard, aplikację mobilną i integracje API.
Wyzwanie
Poprzednia strona LPG View, zbudowana na Elementorze, generowała poważne problemy z wydajnością i użytecznością. Brak segmentacji użytkowników powodował dezorientację odwiedzających, a przestarzały design nie odpowiadał standardom konkurencji.
Brak segmentacji użytkowników DOM/BIZNES
Duże pliki CSS/JS (>2MB łączne)
Wolny czas ładowania (>5s na mobile)
Problemy z Core Web Vitals
Statyczna mapa partnerów trudna do aktualizacji
Przestarzały design bez responsywności
Personalizacja treści per segment (DOM/BIZNES)
Dedykowany motyw zamiast Elementora
Czas ładowania poniżej 2s
Core Web Vitals — wszystkie na zielono
Dynamiczna mapa partnerów z panelem admina
Nowoczesny, responsywny design
Rozwiązanie
1. System segmentacji DOM/BIZNES
Wdrożono inteligentny system segmentacji użytkowników, który personalizuje treść od pierwszego kontaktu z witryną.
Modal powitalny
Przy pierwszej wizycie użytkownik wybiera swój segment — DOM lub BIZNES — co wpływa na wyświetlane treści
Floating widget
Pływający przełącznik w prawym dolnym rogu z płynną animacją fly-in effect umożliwiający zmianę segmentu
Persystencja wyboru
Wybór zapisywany w sessionStorage — użytkownik nie musi wybierać ponownie podczas sesji
2. Dedykowany motyw WordPress
Cała strona została przepisana od podstaw jako dedykowany motyw WordPress, eliminując narzut Elementora. Motyw zawiera 11 reużywalnych komponentów, 10 grup pól ACF i 15 modułów JavaScript.
-
Hero z slideshow i video toggle
Dynamiczny baner główny z możliwością przełączenia na wideo -
Kalkulator oszczędności LPG
Interaktywne narzędzie obliczające potencjalne oszczędności dla użytkownika -
Cennik z przełącznikiem DOM/BIZNES
Tabelka cenowa dynamicznie dostosowująca się do wybranego segmentu użytkownika -
FAQ z accordion i Schema.org
Sekcja pytań i odpowiedzi z FAQPage structured data dla lepszego SEO
3. Optymalizacja wydajności
Przejście z Elementora na dedykowany motyw przyniosło drastyczną poprawę wydajności na każdej metryce.
| Metryka | Przed (Elementor) | Po (Dedykowany) | Poprawa |
|---|---|---|---|
| Rozmiar CSS | ~800KB | ~150KB | 81% |
| Rozmiar JS | ~1.2MB | ~45KB | 96% |
| Czas ładowania | 5.2s | 1.4s | 73% |
| LCP | 4.8s | 1.9s | 60% |
| CLS | 0.25 | 0.02 | 92% |
4. Profesjonalna mapa partnerów
Statyczna mapa partnerów została zastąpiona interaktywną mapą Leaflet z pełnym panelem administracyjnym do zarządzania lokalizacjami.
-
Interaktywna mapa Leaflet + OpenStreetMap
Bez kosztów API Google Maps — pełna funkcjonalność map z darmowym OpenStreetMap -
Custom Post Type „Partner” z ACF
Klient samodzielnie dodaje partnerów przez intuicyjny formularz (nazwa, adres, GPS, telefon, email, typ) -
Filtrowanie i wyszukiwanie
Filtrowanie po typie (Dystrybutor, Serwis, Punkt sprzedaży) i wyszukiwanie po nazwie/mieście -
Popup z danymi kontaktowymi
Kliknięcie w marker wyświetla dane partnera z linkiem do nawigacji
5. SEO i Schema.org
Wdrożono 7 schematów structured data dla kompleksowej optymalizacji SEO.
WebSite z SearchAction
FAQPage
LocalBusiness
BreadcrumbList
Article
Product
Open Graph
Twitter Cards
Canonical URLs
Technologie
PHP 8.0+
Vanilla JS ES6
CSS3
Leaflet.js + OpenStreetMap
Advanced Custom Fields PRO
Forminator
Schema.org (custom)
Rezultaty
Kompleksowy redesign platformy LPG View obejmował zastąpienie strony opartej na Elementorze w pełni dedykowanym motywem WordPress. Wdrożono system segmentacji DOM/BIZNES personalizujący treść, interaktywną mapę partnerów na Leaflet.js z panelem administracyjnym ACF PRO, kalkulator oszczędności LPG oraz 7 schematów Schema.org. Redukcja rozmiaru JS o 96% i CSS o 81% przyniosła 73% poprawę czasu ładowania i wynik PageSpeed 95+ na mobile.