Warum die Seite beim Laden springt

Was Layoutverschiebung ist

Layoutverschiebung bedeutet, dass sich Inhalt bewegt, nachdem er gezeichnet wurde. Der Browser zeichnet die Seite mit den Informationen, die er hat, dann kommt ein Bild in einer Größe an, die er nicht kannte, und alles darunter rückt nach unten, um Platz zu machen. Oder eine Schrift lädt, und jede Zeile bricht neu um. Oder eine Hinweisleiste fügt sich oben ein und schiebt die Seite fünf Zentimeter nach unten.

Gemessen wird sie als Cumulative Layout Shift, die Summe aller unerwarteten Bewegungen während des Ladens, und ein Wert unter 0,1 gilt als gut. Besucher kennen die Zahl nicht. Sie wissen, dass sie auf einen Link getippt und den darunter getroffen haben.

Ursache eins: Bilder ohne Abmessungen

Das ist mit Abstand die häufigste Ursache. Ein img-Tag mit einem src und sonst nichts sagt dem Browser nichts über die Form des Bildes, also reserviert er die Höhe null, bis die Datei heruntergeladen ist. Die Korrektur sind zwei Attribute: width und height.

Sie zwingen das Bild auf dem Bildschirm nicht in diese Größe. Mit dem üblichen CSS aus max-width 100% und height auto teilen sie dem Browser nur das Seitenverhältnis mit, und er reserviert den richtigen Rahmen, bevor das erste Byte ankommt.

WordPress kennt diese Zahlen bereits für jede Datei in der Mediathek. Öffnen Sie ein beliebiges Bild unter Medien, und das Detailfeld zeigt seine Abmessungen, zum Beispiel 1920 mal 1080 Pixel. Bei Bildern, die über den Editor eingefügt werden, werden width und height automatisch in das Tag geschrieben.

Schief geht es beim Theme: Titelbilder, die über einen Page Builder, ein Customizer-Feld oder eine handgeschriebene Vorlage gesetzt werden, geben oft nur die URL aus. Fragen Sie in einer Vorlage WordPress nach dem Bild, statt das Tag von Hand zu bauen, und die Attribute kommen mit:

<?php
// Right: WordPress writes src, srcset, sizes, width, height, and alt for you.
echo wp_get_attachment_image( $hero_id, 'full', false, array(
  'class'         => 'hero-img',
  'fetchpriority' => 'high',
  'loading'       => 'eager',
) );

// If you must build the tag yourself, take the real dimensions from the library:
$img = wp_get_attachment_image_src( $hero_id, 'full' ); // [ url, width, height ]
printf(
  '<img src="%s" width="%d" height="%d" alt="%s" />',
  esc_url( $img[0] ), $img[1], $img[2], esc_attr( get_post_meta( $hero_id, '_wp_attachment_image_alt', true ) )
);

Dann die eine CSS-Zeile, mit der sich die Attribute auf jeder Bildschirmgröße richtig verhalten:

Das CSS dazu

Wenn width und height vorhanden sind, lässt diese Regel das Bild mit seinem Container skalieren, während der Browser den reservierten Rahmen in der richtigen Form hält. Die meisten Themes haben sie bereits; prüfen Sie, dass nichts die Höhe mit einem festen Wert überschreibt.

img {
  max-width: 100%;
  height: auto;
}

/* A hero set as a CSS background can't carry dimensions. Give its box a shape instead: */
.hero {
  aspect-ratio: 16 / 9;
  background-size: cover;
}

Ursache zwei: Einbettungen ohne reservierten Platz

Ein iframe von YouTube oder C-SPAN kommt mit der Höhe an, die der Einbettungscode angibt, oft 315 Pixel bei 560 Breite, und dann streckt ein responsives Theme die Breite, ohne die Höhe anzupassen, oder das Player-Skript ändert die Größe nach dem Laden. So oder so bewegt sich die Seite.

Packen Sie jede Videoeinbettung in einen Rahmen, dessen Form festgelegt ist, und lassen Sie das iframe ihn ausfüllen. Der Platz ist reserviert, bevor der Player lädt, und er skaliert mit der Spalte.

.embed {
  aspect-ratio: 16 / 9;   /* 4 / 3 for older video, or match the embed's own ratio */
  width: 100%;
}
.embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

Ursache drei: Schriften, die wechseln

Eine Webschrift, die nach dem Zeichnen der Seite ankommt, bricht jede in ihr gesetzte Zeile neu um, und wenn die Ersatzschrift anders breit ist, ändern ganze Absätze ihre Höhe. Wenn die Schriftdatei vorgeladen wird, ist sie bei den meisten Verbindungen vor dem ersten Zeichnen da. Mit dem Deskriptor size-adjust lässt sich die Ersatzschrift so abstimmen, dass der Wechsel, wenn er doch passiert, fast nichts verändert.

<!-- in the head: fetch the font before the page needs it -->
<link rel="preload" href="/fonts/body.woff2" as="font" type="font/woff2" crossorigin />

/* in the CSS: a fallback shaped to match, so the swap barely moves anything */
@font-face {
  font-family: "Body Fallback";
  src: local("Arial");
  size-adjust: 104%;
  ascent-override: 92%;
}
body { font-family: "Body", "Body Fallback", sans-serif; }

Ursache vier: Dinge, die nach dem Zeichnen oben eingefügt werden

Cookie-Hinweise, Ankündigungsleisten und Warnbanner, die per JavaScript eingefügt werden, sind die letzte häufige Ursache und am leichtesten zu sehen: Die ganze Seite rutscht in dem Moment nach unten, in dem die Leiste erscheint. Jede von zwei Korrekturen hilft. Geben Sie die Leiste im HTML der Seite aus, damit ihr Platz ab dem ersten Zeichnen existiert, oder machen Sie sie zu einer Überlagerung, die über dem Inhalt liegt, statt ihn nach unten zu schieben. Ein Block, der über Inhalten eingefügt wird, nachdem sie gezeichnet wurden, bewegt die Seite immer.

Es selbst sehen

Öffnen Sie in Chrome das Leistungsfenster (Performance) und zeichnen Sie das Laden einer Seite auf; jede Verschiebung wird markiert, und das Element, das sich bewegt hat, wird genannt. Lighthouse weist die Summe als Cumulative Layout Shift aus. Das kostenlose Audit auf dieser Website führt dieselbe Messung auf Ihrer Startseite durch und sagt Ihnen in klaren Worten, ob sich die Seite bewegt.

Wenn Sie Kunde sind, ist die Korrektur eines Titelbilds oder eines Einbettungsrahmens in einer Vorlage eine kleine Aufgabe im Rahmen der Website-Betreuung. Ein Theme, das jedes Bild-Tag von Hand baut, ist ein Projekt mit einem Festpreisangebot. Stellen Sie eine Anfrage, und wir beginnen damit, das Element zu finden, das sich bewegt.