Cel
Seweryn Durczok to śląski DJ i konferansjer z ponad dekadą pracy na scenie i 500+ imprezami na koncie. Strona miała sprzedawać to, co naprawdę wybiera klient: pełny parkiet, światło, energię wejścia, pewny głos na mikrofonie i moment, w którym sala rusza. Zdjęcia mogły to uzupełnić, ale nie udźwignąć pierwszego wrażenia. Dlatego pierwszy ekran oparliśmy na prawdziwym materiale z imprez i dopilnowaliśmy, żeby działał na hotelowym Wi-Fi, LTE w pociągu, średnim Androidzie i starszym laptopie bez czekania na start.
Ryzyko
Najprostsza wersja to jeden MP4. W praktyce od razu tworzy problem. Jedno kodowanie musi obsłużyć każdy ekran i każde łącze. Ustawione pod desktop każe czekać użytkownikom mobile; ustawione pod telefon odbiera nagraniu ciężar na większym ekranie. Przeglądarka nadal musi pobrać zbyt dużo, zanim odtwarzanie stanie się pewne, więc 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 potem 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 realną przepustowość i wybiera bieżącą wersję segment po segmencie.
-
Odtwarzanie zaczyna się od niskiego poziomu, żeby szybko pokazać pierwszą klatkę, potem podnosi jakość wraz z dostępnym pasmem i schodzi niżej, gdy sieć słabnie, zamiast buforować.
-
Przeglądarka pobiera tylko segmenty, które użytkownik naprawdę ogląda, więc telefon na limitowanym LTE nigdy nie ściąga pełnego źródła 1080p.
-
Lekki plakat AVIF/WebP obsługuje pierwsze malowanie, wideo pozostaje leniwe do momentu, gdy jest potrzebne, a sygnały Save-Data / 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 telefonem i e-mailem. Całość jest mobile-first, bo większość par zaczyna szukanie DJ-a na telefonie.
-
Treść po polsku, ze strukturą i metadanymi przygotowanymi pod SEO oraz odkrywanie przez AI.
-
Wdrożenie na Vercel, z segmentami HLS i responsywnymi obrazami serwowanymi z CDN dla niskich 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. Plakat 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 unieść. Efekt to szybkie, mobilne portfolio, w którym najbardziej wymagający element strony jest opanowany od pierwszej klatki, z fundamentem pod widoczność budowaną w czasie.