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.