Die Hero Section ist der obere Bereich einer Seite, der ohne Scrollen sichtbar ist und meist eine Überschrift mit kurzem Text und ein großes Bild trägt. Sie ordnet ein, worum es auf der Seite geht, und bietet den ersten Weg zum nächsten Schritt an.
- Hero Section
Oberer Bereich einer Seite, der ohne Scrollen sichtbar ist und das Thema der Seite einordnet.
Beispiel: „In der Hero Section steht die Überschrift, darunter ein Satz zum Angebot und die Schaltfläche zum Formular.“Auch: Hero-Bereich. Der Begriff stammt aus dem Zeitungslayout, wo das große Aufmacherbild über dem Falz als Hero Image bezeichnet wird.
Abgrenzung zum Hero Image: Das Hero Image ist nur das Bild. Die Hero Section ist der ganze Bereich samt Text und Schaltflächen.
Was in die Hero Section gehört
Die Überschrift trägt die Aussage der Seite und ist in der Regel die H1. Darunter steht ein Satz, der die Überschrift einordnet und die Frage beantwortet, für wen das gilt. Dazu kommt der Weg zum nächsten Schritt, sichtbar als Schaltfläche. Mehr braucht es dort nicht, und mehr passt auf einem Telefon auch nicht hin.
Der häufigste Fehler ist eine Überschrift, die Stimmung macht statt Information zu liefern. „Wir denken Webdesign weiter“ lässt den Besucher rätseln, was angeboten wird. Eine Überschrift, die die Leistung benennt, beantwortet dieselbe Frage in derselben Zeilenzahl.
Das große Bild prägt die Ladezeit
In unseren Projekten ist das Bild der Hero Section fast immer das Element, an dem Google den Largest Contentful Paint misst, also den Zeitpunkt, zu dem der größte sichtbare Inhalt steht. Der Schwellwert dafür liegt bei 2,5 Sekunden. Wer dieses Bild mit dem Attribut loading gleich lazy ausliefert, verschlechtert den Wert messbar, weil der Browser es erst nach dem Layout anfordert.
Unsere Empfehlung: Das Bild der Hero Section wird nie verzögert geladen, sondern mit fetchpriority gleich high angefordert, in passenden Größen über srcset ausgeliefert und mit Breite und Höhe im Markup versehen, damit beim Laden nichts springt. Alle weiteren Bilder der Seite dürfen dagegen verzögert kommen.
Karussells in der Hero Section
Ein Karussell mit wechselnden Bildern wirkt nach einer Lösung für den Streit darum, welche Aussage nach vorne kommt. In der Praxis sieht die Mehrheit der Besucher nur das erste Bild, weil sie vorher weiterscrollt. Die Aussagen auf den Folien zwei bis vier erreichen damit kaum jemanden, und der Mehraufwand für Technik und Pflege bleibt. Wir empfehlen eine feste Aussage und eine bewusste Entscheidung darüber, welche das ist.