Kreatywna strona internetowa a szybkość: jak pogodzić design z wydajnością

Kreatywne strony internetowe, takie jak te nagradzane w konkursach projektowych, przyciągają uwagę: nietypowa typografia, animacje reagujące na przewijanie, pełnoekranowe zdjęcia. Taki projekt potrafi zbudować wizerunek marki skuteczniej niż kolejna poprawna strona z szablonu. Ma też swoją cenę w wydajności, bo każdy efekt to dodatkowe pliki, obliczenia i praca dla przeglądarki.

Efektowny design i szybkość strony nie zawsze idą w parze, ale nie muszą się wykluczać. Przy większym wysiłku i dobrze dobranych technikach da się zbudować stronę, która robi wrażenie i nadal sprawnie się ładuje, także na telefonie.

Nie każdy projekt może sobie pozwolić na efekt wow

Kreatywna strona sprawdza się, gdy marka jest rozpoznawalna i strona ma przede wszystkim budować wizerunek, gdy nie odpowiada bezpośrednio za sprzedaż ani pozyskiwanie zapytań, albo gdy jest osobnym projektem obok głównego serwisu. Typowy przykład to dedykowany landing kampanii lub kolekcji, który przyciąga uwagę, podczas gdy sklep działa osobno i pozostaje szybki i przewidywalny.

Tam, gdzie priorytetem jest szybkość ładowania i reakcji na kliknięcia, czyli w sklepie, formularzu zamówienia czy panelu klienta, z designem łatwo przesadzić. Każda dodatkowa animacja na karcie produktu czy w koszyku zwiększa ryzyko, że klient zrezygnuje, zanim strona zareaguje.

Techniki kreatywnego web designu

Strony nastawione na jakość wizualną, a nie na wydajność, korzystają z technik, które dobrze wyglądają, ale w różnym stopniu obciążają przeglądarkę:

• Parallax: warstwy przesuwające się z różną prędkością podczas przewijania, które budują głębię. Realizowany w JavaScripcie potrafi przycinać przewijanie na słabszych telefonach.
• Glassmorphism: półprzezroczyste panele z rozmytym tłem, przypominające matowe szkło. Rozmycie tła jest kosztowne, szczególnie przy przewijaniu.
• Neumorphism: miękkie, jakby wytłoczone elementy zbudowane z cieni. Łatwo tu o zbyt niski kontrast i kłopoty z czytelnością.

• Bento grids: treść ułożona w kafelkach różnej wielkości, jak przegródki w pudełku bento. Technicznie lekkie, ale wymagają przemyślanej wersji mobilnej. Alternatywą jest układ masonry, w którym kafelki o tej samej szerokości i różnej wysokości wypełniają kolumny bez pustych miejsc, jak na Pintereście. Dobrze sprawdza się w galeriach i portfolio, ale zbudowany w JavaScripcie potrafi przesuwać elementy podczas ładowania i pogarszać wskaźnik CLS.

• Mikrointerakcje: drobne reakcje na najechanie, kliknięcie czy przełączenie, dzięki którym strona sprawia wrażenie żywej.
• Tryby mieszania (blend modes): nakładanie tekstu i grafik z efektami znanymi z programów graficznych.
• Typografia kinetyczna: tekst, który się porusza, zmienia albo układa w rytm przewijania.
• Skeleton screens: szkielety treści wyświetlane w trakcie ładowania. Ta technika poprawia odczuwalną szybkość strony, zamiast ją obniżać.
• Nieskończone marquee: pasy z tekstem lub logotypami przewijające się w pętli.

• Animacje sterowane przewijaniem (scroll-driven animations): efekty powiązane z pozycją przewijania. W nowych przeglądarkach można je zrobić w samym CSS, bez obciążania strony JavaScriptem.
• Gradienty typu mesh: płynne, wielobarwne tła z kilku nakładających się gradientów CSS, często lżejsze niż grafika o tym samym wyglądzie.
• Morfujące clip-path: kształty, które płynnie przechodzą jeden w drugi, na przykład przy przejściach między sekcjami.

Siła kreatywnej strony rzadko bierze się z liczby efektów. Częściej z dwóch czy trzech technik dobranych do charakteru marki i dopracowanych w szczegółach.

Grafiki wysokiej jakości mają swoją cenę

W kreatywnych projektach klient często wymaga grafik w wysokiej jakości i rozdzielczości, i trudno się temu dziwić, skoro to one budują wrażenie. Każde takie zdjęcie to jednak megabajty, które telefon odwiedzającego musi pobrać. Rozwiązaniem nie jest rezygnacja z jakości, tylko optymalizacja: nowoczesne formaty, takie jak AVIF i WebP, kilka rozmiarów tego samego zdjęcia dobieranych do ekranu, leniwe ładowanie grafik poniżej pierwszego ekranu i kompresja ustawiona tak, żeby różnicy nie było widać. Duże zdjęcie w pierwszym ekranie decyduje o wskaźniku LCP, więc to ono wymaga najwięcej uwagi.

Podobnie jest z fontami. Nie można dorzucić pięciu krojów pisma w kilku grubościach i liczyć na to, że strona pozostanie szybka. Każdy plik fontu to kolejne pobranie, a tekst w danym kroju wyświetli się poprawnie dopiero wtedy, gdy font dotrze do przeglądarki. Pomaga ograniczenie liczby krojów i grubości, fonty zmienne, które mieszczą wiele grubości w jednym pliku, oraz okrojenie fontu do znaków, których strona naprawdę używa.

Animacje z umiarem

Animacja, która na komputerze projektanta działa płynnie, na kilkuletnim telefonie potrafi przycinać przewijanie i opóźniać reakcję na kliknięcia, co pogarsza wskaźnik INP. Bezpieczniejsze są animacje oparte na przesunięciu i przezroczystości, które przeglądarka obsługuje sprawnie, niż na zmianie rozmiaru czy położenia elementów w układzie strony. Trzeba też uszanować systemowe ustawienie ograniczające ruch, bo część osób źle znosi animacje i ma prawo je wyłączyć. Animacja ma coś podkreślać, a nie zasłaniać treść.

Animowane tło w praktyce: GigaBackground

Dobrym przykładem tych zasad jest GigaBackground, generator animowanych teł rozwijany przez BeGiga. Tworzy płynne, animowane tła na bazie dowolnego zdjęcia, a cała animacja działa w przeglądarce na shaderach WebGL, czyli na karcie graficznej, a nie w JavaScripcie przeliczającym każdą klatkę. Efekty nakłada się warstwami: płynne zniekształcenie obrazu, wiry sterowane mapą (wyciąganą automatycznie ze zdjęcia, rysowaną ręcznie w edytorze albo generowaną jako wzór promienisty, spiralny lub wirowy), dryfujące plamy kolorów pobranych z obrazu, raster półtonowy, rozszczepienie kanałów RGB, winieta i ziarno filmowe. Animację może uruchamiać przewijanie, ruch kursora albo pętla, a każdy efekt da się ustawić osobno.

Z punktu widzenia wydajności ważniejsze od samych efektów jest to, jak tło trafia na stronę. Generator tworzy statyczny plakat PNG, który pokazuje tło w stanie początkowym, zanim ruszy animacja. Odwiedzający od razu widzi gotowy obraz, a wskaźnik LCP nie czeka na inicjalizację WebGL. Samą animację można też uruchamiać dopiero po załadowaniu strony, wywołaniem window.GigaBackground.start(), dzięki czemu ciężka część nie konkuruje z treścią o zasoby przeglądarki. Gotową konfigurację eksportuje się jako plik JSON albo jako HTML z osadzonymi ustawieniami i plakatem.

Generator najwygodniej obsługuje się na komputerze, bo panel ustawień ma kilkadziesiąt parametrów. Przy wdrożeniu na stronie warto przewidzieć wersję dla telefonów, na przykład z mniejszą liczbą warstw albo z samym plakatem w miejscu animacji.

Świetnie na komputerze, niewygodnie na telefonie

Projekt, który na dużym monitorze wygląda świetnie, na telefonie może okazać się nieczytelny i niewygodny w użyciu. Drobny tekst nałożony na zdjęcie, elementy rozrzucone swobodnie po ekranie, efekty reagujące na kursor, którego na telefonie nie ma. Responsywność w kreatywnych projektach rzadko sprowadza się do zmniejszenia elementów. Czasem trzeba zaprojektować osobny układ dla telefonów, z inną kompozycją, prostszymi animacjami i innym kadrem zdjęć. To dodatkowa praca, ale dla większości odwiedzających właśnie ta wersja jest stroną.

Proporcje i przejścia między sekcjami

O charakterze kreatywnej strony decydują nie tylko efekty, ale też rytm. Proporcje sekcji, ilość wolnej przestrzeni, zmiana tempa między gęstszym tekstem a pełnoekranowym zdjęciem i sposób przejścia z jednej części do drugiej składają się na spójną opowieść. Dobrze zaprojektowane przejścia, na przykład kolorem tła, kształtem krawędzi czy animacją przy przewijaniu, prowadzą wzrok dalej. Źle dobrane rozbijają stronę na przypadkowe kawałki albo każą czekać na efekt, zanim pojawi się treść.

SEO i design: najlepiej projektować je razem

Uwag specjalistów SEO nie zawsze da się zastosować bez wywracania designu do góry nogami. Nagłówek H1 wpisany w grafikę, sekcje z jednym hasłem zamiast akapitu, treść ukryta w zakładkach i karuzelach, nagłówki dobrane pod wygląd zamiast pod strukturę: poprawienie tego po zatwierdzeniu projektu zwykle oznacza przebudowę wielu sekcji. Do tego dochodzi wydajność, bo wolna strona traci także w wynikach wyszukiwania.

W idealnym świecie treść i design powstają jednocześnie. Projektant wie, ile tekstu musi się zmieścić w sekcji i jakie nagłówki mają się w niej znaleźć, a osoba odpowiedzialna za treść i SEO wie, jakie efekty planuje projektant. Tekst jest wtedy prawdziwym tekstem, a nie obrazkiem, nagłówki tworzą logiczną strukturę, a grafiki mają opisy. Kompromisy zapadają na etapie projektu, a nie po wdrożeniu.

Bez CMS-u prościej i taniej

Kreatywna strona często ma niewiele podstron i treść, która rzadko się zmienia. Jeśli z wymagań wypada system zarządzania treścią, a z formularza panel do samodzielnej edycji wszystkich sekcji, projekt wyraźnie się upraszcza. Nie trzeba dopasowywać każdej animacji do edytora, przewidywać, co się stanie, gdy ktoś wklei za długi tekst, ani utrzymywać wtyczek. Taka strona może działać jako statyczna, a jej przygotowanie wymaga mniej pracy i kosztuje mniej. Więcej o tym podejściu mówią artykuły strony internetowe bez bazy danych i generatory stron statycznych czy WordPress.

Gdzie szukać inspiracji

Dobrym źródłem inspiracji są serwisy, które regularnie wyróżniają strony za projekt, kreatywność i wykonanie: Awwwards, CSS Design Awards i Web Design Awards. Przy każdej stronie warto zajrzeć dalej niż w pierwszy ekran: jak wygląda na telefonie, jak szybko się ładuje i czy da się z niej wygodnie korzystać. Część nagradzanych projektów to eksperymenty, które dobrze wypadają w konkursie, ale nie w codziennym użyciu.

Kreatywna strona internetowa z myślą o wydajności

Kreatywny projekt wymaga decyzji: które efekty są najważniejsze dla marki, gdzie można pójść na kompromis i jak strona ma działać na słabszych urządzeniach. BeGiga przygotowuje takie strony w ramach dedykowanych projektów webowych, łącząc projekt wizualny z optymalizacją grafik, fontów i animacji.