Hero section to pierwszy, duży fragment strony widoczny po jej otwarciu, zwykle z nagłówkiem, krótkim opisem, grafiką i przyciskiem CTA. Ma szybko wyjaśnić, czym jest strona i co użytkownik może tu zrobić.
Z czego składa się hero section?
- wyrazisty nagłówek z główną korzyścią,
- krótki podtytuł,
- grafika lub zdjęcie,
- przycisk z wezwaniem do działania.
Hero section a wydajność
Duży obraz w tej sekcji jest zwykle elementem LCP. Skompresuj go, użyj nowoczesnych formatów, wczytaj z wyższym priorytetem i nie stosuj leniwego ładowania.
Dobre praktyki
Zadbaj o czytelny kontrast tekstu, jedno główne CTA i dopasowanie do wersji mobilnej. Unikaj wolno wczytujących się filmów i karuzel jako pierwszego elementu.
Obraz hero jest często elementem LCP, dlatego nie ładuj go leniwie i dopasuj jego rozmiar do urządzenia.
Zadbaj o czytelny nagłówek i jedno wyraźne wezwanie do działania, a tekst na obrazie o odpowiednim kontraście.