Design, który nie czeka. Jak projektowanie pod wydajność dało nam 100/100 w PageSpeed.
Często słyszymy, że w procesie tworzenia strony internetowej istnieje konflikt: Designerski Wygląd vs. Szybkość Działania. Że jeśli chcesz mieć piękną stronę z animacjami, musisz pogodzić się z tym, że będzie się chwilę ładować.
W V Design uważamy, że to błąd w myśleniu. Wydajność to nie jest dodatek techniczny. Wydajność to Design.
Szybkość ładowania jest pierwszą rzeczą, jakiej doświadcza użytkownik – jeszcze zanim zobaczy Twoje logo czy przeczyta nagłówek. Dlatego osiągnięcie wyniku 100/100 w Google PageSpeed nie było dla nas zadaniem dla programisty na koniec projektu. Było założeniem projektowym od pierwszej kreski na papierze.
Oto jak nasz proces twórczy wpływa na szybkość.
1. Minimalizm jako funkcja
Nasza filozofia "Czystej Kartki" ma swoje odzwierciedlenie w kodzie. Każdy element graficzny, który dodajemy do projektu, ma swoją "wagę" – dosłownie (w kilobajtach) i w przenośni (w uwadze użytkownika).
Podczas projektowania zadajemy sobie pytanie: "Czy ten element jest niezbędny do sprzedaży?".
- Jeśli odpowiedź brzmi "nie" – usuwamy go.
- Mniej elementów wizualnych to lżejszy kod HTML.
- Czysty design to mniejsze obciążenie dla przeglądarki, która musi wyświetlić stronę.
Dzięki temu strona jest lekka nie dlatego, że ją "odchudziliśmy", ale dlatego, że nie zaprojektowaliśmy w niej zbędnego tłuszczu.
2. Typografia zamiast obrazków
Wielu projektantów opiera wygląd strony na ciężkich zdjęciach i tłach. My postawiliśmy na siłę Typografii.
Połączenie eleganckiego Playfair Display z technicznym Source Sans 3 buduje charakter marki bez konieczności ładowania megabajtów grafik. Tekst waży tyle co nic. Dzięki temu strona wygląda "bogato", ale ładuje się błyskawicznie.
Chcesz wiedzieć więcej o estetyce? Przeczytaj Case Study o Designie naszej strony.
Co więcej, fonty hostujemy lokalnie na serwerze, eliminując czas potrzebny na połączenie z serwerami Google.
3. Choreografia ładowania (Mobile First)
Projektując stronę, myślimy o niej jak o spektaklu teatralnym. Nie wszystko musi pojawić się na scenie od razu.
Skupiamy się na tzw. Above the Fold (to, co widać na ekranie telefonu od razu po wejściu).
- Najpierw: Ładujemy kluczowe zdjęcie i nagłówek (LCP - Largest Contentful Paint). To musi stać się w ułamku sekundy (u nas 0.8s).
- Potem: Reszta strony, zdjęcia w portfolio, skrypty analityczne – to wszystko ładuje się w tle, gdy użytkownik już czyta treść.
Wrażenie użytkownika to: "Wow, to już działa".
4. Technologia dobrana do Designu
Nie użyliśmy gotowego szablonu WordPressa, ponieważ zmuszają one designera do kompromisów. Gotowy szablon ładuje setki stylów "na wszelki wypadek".
Wybraliśmy Tailwind CSS oraz Grav CMS, ponieważ pozwalają nam pisać kod dokładnie pod nasz design.
- Używamy koloru
#1d1d1d? W kodzie jest tylko ten kolor. - Potrzebujemy konkretnego odstępu? Tworzymy go jedną klasą.
Nasz plik stylów CSS waży zaledwie 7kb. Dla porównania, przeciętna strona ładuje style o wadze 500kb.
Podsumowanie
W V Design szybkość nie jest magią programistyczną. Jest efektem świadomych decyzji projektowych. Tworzymy strony, które szanują czas Twojego klienta, a Google nagradza to najwyższymi pozycjami w wynikach wyszukiwania.
Chcesz strony, która łączy piękno z prędkością?