Obszar widoczny bez przewijania

Co jest nad Fold?

Powyżej folderu znajduje się część strony widocznej w oknie przeglądarki przed przewijaniem przez użytkownika. Termin ten pochodzi z drukowanych gazet, gdzie górna połowa pierwszej strony była widoczna na stoisku dyskusyjnym. W sieci nie ma stałej “fold”: granica zależy od rozmiaru ekranu, urządzenia i okna przeglądarki odwiedzającego, więc to, co jest widoczne na pulpicie może wymagać przewijania na telefon komórkowy.

Dlaczego nad Fold ma znaczenie?

Tutaj masz kilka sekund na pokazanie, co sprzedajesz i jaki jest następny krok. Badania śledzące oczy z Nielsen Norman Group pokazują, że użytkownicy spędzają znaczną większość uwagi powyżej foldu, nawet jeśli przewijają. Wyraźna propozycja wartości i widoczna CTA powyżej fold jest więc klasyczną dźwignią dla kursu konwersji w sklepie internetowym.

Przypadki wspólnego stosowania

• Bohater strony głównej. Pokaż swoją kluczową wiadomość, ofertę lub kategorię bez przewijania zarówno mobilnego, jak i na pulpicie.
• Strona produktu. Upewnij się, że cena, “Dodaj do koszyka”, a obraz produktu są widoczne natychmiast.
• Strony kampanii. Umieść ofertę i CTA nad składem, aby ruch reklamowy nie musiał polować na działanie.
• Funkcje sieci bazowej. Największym elementem powyżej fold jest często Element LCP, więc ciężki obraz bohatera może spowolnić LCP.

Shopify perspektywa

W Shopify obszar profilowany jest kontrolowany przez sekcje i bloki motywu w edytorze motywu. Powszechnym błędem jest lazy- ładowanie wizerunku bohatera: kiedy jest to kandydat LCP, że opóźnia ładowanie i boli core Web Vitals. Zamiast tego ustawione loading="eager" (lub fetchpriority="high") na wizerunku bohatera i zachować światło górnej części. Zawsze testować na prawdziwym telefonie - nie tylko na pulpicie - ponieważ spacja znajduje się znacznie wyżej na małych ekranach.