Zum Inhalt springen
Mera News

Leitfaden für Verlage, Kapitel 2

Seitenaufbau auf Mobilgerät und Desktop

Zuletzt geprüft im November 2026

Leser entscheiden schnell, ob sich der Aufenthalt auf einer Nachrichtenseite lohnt. Die Schlagzeile sollte schnell erscheinen, die Seite sollte stillhalten, und jeder Tipp sollte eine Reaktion auslösen. Google indexiert außerdem die mobile Version Ihrer Seiten, deshalb zählt das Layout auf dem Telefon auch für die Suche.

Die Zielwerte

Die Core Web Vitals von Google geben Ihnen drei Messgrößen mit je einem klaren Ziel.

MessgrößeMisstGut
Largest Contentful Paint (LCP)Laden2,5 Sekunden oder weniger
Interaction to Next Paint (INP)Reaktion auf Eingaben200 Millisekunden oder weniger
Cumulative Layout Shift (CLS)Visuelle Stabilität0,1 oder weniger

Gemessen wird das 75. Perzentil der Seitenaufrufe, getrennt für Mobilgeräte und Desktop. Eine Seite besteht, wenn alle drei Messgrößen bei diesem Perzentil das Ziel erreichen.

Nutzen Sie Felddaten aus echten Besuchen: den Core-Web-Vitals-Bericht in der Search Console, PageSpeed Insights oder den Chrome User Experience Report. Lighthouse ist im Labor nützlich, kann aber INP nicht messen und meldet stattdessen die Total Blocking Time.

Google sagt, es gebe kein einzelnes Signal für die Seitenerfahrung. Google sagt aber, dass seine Ranking-Systeme die Core Web Vitals verwenden und dass andere Aspekte der Seitenerfahrung einer Website nicht direkt beim Ranking helfen, sie aber trotzdem besser nutzbar machen können.

Eine Seite für beide Bildschirme

Google empfiehlt Responsive Design als das Muster, das sich am einfachsten umsetzen und pflegen lässt. Dasselbe HTML bedient jedes Gerät, sodass Inhalt und Metadaten ohne Mehraufwand übereinstimmen. Wenn Sie getrennte mobile Seiten betreiben, halten Sie Folgendes identisch mit dem Desktop:

  • Hauptinhalt
  • Überschriften
  • Strukturierte Daten
  • Robots-Meta-Tags (ein versehentliches noindex kann eine mobile Seite aus dem Index fernhalten)

Beginnen Sie mit dem Viewport-Tag und prüfen Sie dann, ob die Seite bei 320 CSS-Pixeln Breite ohne seitliches Scrollen umbricht.

<meta name="viewport" content="width=device-width, initial-scale=1">

Auf Mobilgeräten

  • Setzen Sie Schlagzeile, Autorenzeile und sichtbares Datum an den Anfang, danach das Titelbild oder den ersten Absatz.
  • Halten Sie den Artikeltext im HTML. Ein Button „Weiterlesen“, der den Rest erst beim Tippen nachlädt, kann diesen Text vor Google verbergen, denn Google klickt, wischt und tippt nicht.
  • Machen Sie Touch-Ziele mindestens 24 mal 24 CSS-Pixel groß, das Minimum von WCAG 2.2 AA. Für Menüs und Schließen-Buttons sollten es 44 mal 44 sein, die Stufe AAA.
  • Halten Sie einen fixierten Header niedrig und setzen Sie scroll-padding-top auf seine Höhe, damit ein fokussierter Link nie dahinter verschwindet.

Auf dem Desktop

  • Halten Sie Fließtext auf höchstens 80 Zeichen pro Zeile, bei Chinesisch, Japanisch und Koreanisch auf 40. Das ist die Richtlinie WCAG AAA, und sie hilft allen Lesern.
  • Wählen Sie innerhalb von Absätzen einen Zeilenabstand von mindestens 1,5.
  • Legen Sie ergänzende Inhalte in eine Seitenleiste, die den Artikel beim Laden nicht verschiebt.

Schneller laden

Das größte Element einer Nachrichtenseite ist oft das Titelbild. Behandeln Sie es als wichtigste Anfrage der Seite.

<img
  src="/images/lead-1200.jpg"
  srcset="/images/lead-800.jpg 800w, /images/lead-1200.jpg 1200w"
  sizes="(min-width: 768px) 720px, 100vw"
  width="1200"
  height="675"
  alt="Describe what the photo shows"
  fetchpriority="high">
  • Laden Sie das LCP-Bild nie verzögert (lazy).
  • Legen Sie es ins ursprüngliche HTML, damit der Browser es findet, bevor ein Skript läuft.
  • Verwenden Sie fetchpriority="high" für höchstens ein oder zwei Bilder. Mehr bringt nichts mehr.
  • Verwenden Sie loading="lazy" nur für Bilder und iframes außerhalb des ersten sichtbaren Bereichs.
  • Kürzen Sie Weiterleitungen und halten Sie die Seite cachefähig. Eindeutige URL-Parameter können Anfragen an Ihren Ursprungsserver statt an das CDN schicken.

Eine Seite, die stillhält

  • Setzen Sie width und height bei jedem Bild und Video und behalten Sie height: auto im CSS.
  • Verwenden Sie für alle Bilder in einem srcset dasselbe Seitenverhältnis.
  • Reservieren Sie Platz für Anzeigen, Einbettungen und iframes, bevor sie laden. Das Kapitel zu Werbung behandelt die Platzgrößen.
  • Legen Sie Cookie-Hinweise und Anmeldeaufforderungen als Overlay über die Seite oder reservieren Sie Platz dafür, damit sie den Artikel nicht nach unten schieben.
  • Verwenden Sie font-display: optional oder eine Ersatzschrift, die auf die Metriken Ihrer Webschrift abgestimmt ist.
  • Animieren Sie mit transform. Das Animieren von top oder left verursacht Layout-Verschiebungen.

Schnelle Reaktionen

Die gesamte Interaktionszeit hat drei Teile: das Warten, bevor Ihr Code läuft, Ihren Code und das anschließende Zeichnen. Jede Aufgabe, die länger als 50 Millisekunden dauert, ist eine Long Task.

  • Tun Sie in Event-Callbacks so wenig wie möglich. Aktualisieren Sie zuerst den Bildschirm und schieben Sie den Rest auf.
  • Teilen Sie lange Arbeit mit scheduler.yield() auf und weichen Sie in Browsern, die es nicht unterstützen, auf setTimeout aus.
  • Halten Sie das DOM klein. Lange Artikellisten können content-visibility nutzen, um Elemente außerhalb des Bildschirms später zu rendern.
  • Denken Sie daran, dass jeder iframe seinen eigenen Hauptthread hat. Prüfen Sie also, aus welchem Frame eine langsame Interaktion kam.

Lange Seiten und unendliches Scrollen

Wenn eine Rubrikenseite endlos scrollt, geben Sie jedem Abschnitt eine eigene dauerhafte URL mit einer absoluten Seitenzahl wie ?page=12 und verlinken Sie diese Seiten der Reihe nach. Aktualisieren Sie die Adresse mit der History API, während der Leser weiterscrollt. Google scrollt und klickt nicht, deshalb müssen verzögert geladene Inhalte laden, sobald sie in den sichtbaren Bereich kommen, ohne dass eine Aktion nötig ist.

Checkliste

  • Prüfen Sie LCP, INP und CLS in der Search Console, für Mobilgeräte und Desktop getrennt.
  • Öffnen Sie Ihre meistgenutzte Artikelvorlage auf einem Telefon und bestätigen Sie, dass Schlagzeile und Datum auf dem ersten Bildschirm stehen.
  • Bestätigen Sie, dass der vollständige Artikeltext im HTML steht, das der Server sendet.
  • Vergleichen Sie Mobilgerät und Desktop auf übereinstimmende Inhalte, Überschriften, strukturierte Daten und Robots-Tags.
  • Entfernen Sie loading="lazy" vom Titelbild und fügen Sie fetchpriority="high" hinzu.
  • Fügen Sie jedem Bild und Video width und height hinzu.
  • Reservieren Sie Platz für jede Anzeige, Einbettung und jedes Banner.
  • Setzen Sie scroll-padding-top passend zu Ihrem fixierten Header.
  • Testen Sie die Seite bei 320 CSS-Pixeln Breite.
  • Geben Sie jedem Abschnitt einer Seite mit unendlichem Scrollen eine eigene URL.

Quellen