Cel
Seweryn Durczok to śląski DJ i konferansjer z ponad dekadą doświadczenia i ponad 500 imprezami na koncie. Strona miała sprzedawać to, co klienci wybierają naprawdę: pełny parkiet, światło, energię wejścia, pewny głos przy mikrofonie i moment, w którym sala rusza do zabawy. Zdjęcia mogły to uzupełniać, ale nie udźwignęłyby tego zadania samodzielnie. Dlatego pierwszy ekran oparliśmy na autentycznych materiałach wideo z imprez i zadbaliśmy o to, aby działał sprawnie niezależnie od warunków — na hotelowym Wi-Fi, LTE w pociągu, średniej klasy Androidzie czy starszym laptopie, bez czekania na start.
Ryzyko
Najprostsze rozwiązanie to umieszczenie jednego pliku MP4. W rzeczywistości szybko pojawia się jednak problem. Jedno kodowanie musi obsłużyć każdy ekran i każde połączenie. Wersja przygotowana pod desktop wydłuża czas oczekiwania użytkownikom mobilnym. Wersja zoptymalizowana pod telefon odbiera materiałowi jakość i efekt na większych wyświetlaczach. Przeglądarka i tak musi pobrać zbyt dużo danych, zanim odtwarzanie stanie się płynne, przez co najmocniejszy element strony może stać się jej najwolniejszym momentem. Dla DJ-a to zły pierwszy takt.
Dostawa adaptacyjna
Zamieniliśmy hero w adaptacyjny strumień HLS. Materiał źródłowy jest transkodowany w FFmpeg do drabiny bitrate'ów — od małej wersji o niskim bitrate po Full HD — a następnie dzielony na krótkie segmenty opisane playlistą .m3u8.
HLS.js obsługuje odtwarzanie tam, gdzie przeglądarka tego potrzebuje; Safari i iOS korzystają z natywnego HLS. Odtwarzacz mierzy rzeczywistą przepustowość i wybiera odpowiednią wersję materiału segment po segmencie.
Odtwarzanie zaczyna się od niskiego poziomu, żeby szybko pokazać pierwszą klatkę, a potem podnosi jakość wraz z dostępnym pasmem i schodzi niżej, gdy sieć słabnie, zamiast buforować.
Przeglądarka pobiera tylko te segmenty, które użytkownik naprawdę ogląda, więc telefon na limitowanym LTE nigdy nie ściąga pełnego źródła 1080p.
Za szybkie wyświetlenie pierwszego widoku strony odpowiada zoptymalizowany obraz startowy (poster) w formacie AVIF/WebP. Wideo jest ładowane dopiero wtedy, gdy jest potrzebne, a sygnały Save-Data i reduced-data są respektowane.
Pełne portfolio
Wokół hero zbudowaliśmy pełne portfolio: sekcję „O mnie”, czteroczęściową ofertę obejmującą wesela, studniówki, eventy firmowe i imprezy okolicznościowe, galerię serwowaną jako responsywne AVIF/WebP przez next/image, rekomendacje, logotypy partnerów oraz formularz kontaktowy z numerem telefonu i adresem e-mail. Całość stworzyliśmy zgodnie z podejściem mobile-first, bo większość par zaczyna szukanie DJ-a właśnie na telefonie.
Treść po polsku, ze strukturą i metadanymi przygotowanymi pod SEO oraz widoczność w narzędziach AI.
Wdrożenie na Vercel, z segmentami HLS i responsywnymi obrazami serwowanymi z CDN, co pozwala utrzymać niski poziom opóźnień w całej Polsce.
Efekt startu
Na starcie strona ma hero oparte na wideo, które szybko rusza i pozostaje płynne na różnych urządzeniach i łączach, bez wysyłania jednego ciężkiego pliku do wszystkich użytkowników. Zdjęcie zastępcze utrzymuje szybki Largest Contentful Paint, HLS przejmuje właściwe odtwarzanie, a adaptacyjne dostarczanie ogranicza zużycie danych mobilnych, wysyłając tylko jakość, którą dane łącze jest w stanie obsłużyć. Efekt to szybkie, mobilne portfolio, w którym najbardziej wymagający element strony jest opanowany już od pierwszej klatki, z solidnym fundamentem pod widoczność budowaną w czasie.
