Explizite Bildgrößen

Silktide prüft, ob die Bilder auf Ihrer Seite ihre Größe angeben, damit der Browser für jedes Bild vor dem Herunterladen den richtigen Platz reservieren kann. Bilder ohne angegebene Größe lassen die Seite beim Laden springen.

<!-- Problem: keine Größe, der Browser reserviert keinen Platz -->
<img src="hero.jpg" alt="Frühjahrskollektion">

<!-- Behoben: der Browser reserviert sofort einen 1200x600-Bereich -->
<img src="hero.jpg" alt="Frühjahrskollektion" width="1200" height="600">

Warum das wichtig ist

Bis eine Bilddatei ankommt, weiß der Browser nicht, wie groß das Bild ist, sofern die Seite es nicht angibt. Ohne diese Information rendert er die Seite ohne Lücke und schiebt dann beim Laden jedes Bildes alles nach unten – Text springt mitten im Satz, und Besuchende tippen im letzten Moment auf das Falsche, weil sich Ziele noch verschieben.

Dieses Springen wird als Layoutverschiebung gemessen, Teil von Googles , die auch in das Suchranking einfließen. Fehlende Größenangaben bei Bildern sind die häufigste Ursache.

So beheben Sie das Problem

Fügen Sie jedem Bild und Video width- und height-Attribute hinzu, die den tatsächlichen Proportionen der Datei entsprechen. Der Browser nutzt sie, um auch dann Platz im richtigen Seitenverhältnis zu reservieren, wenn das Bild responsiv skaliert.
Bei responsiven Bildern behalten Sie die Attribute bei und überlassen Sie die Skalierung CSS, z. B. mit max-width: 100%; height: auto; – der reservierte Platz skaliert mit.
Wenn Sie keine Attribute hinzufügen können, reservieren Sie den Platz stattdessen per CSS mit der Eigenschaft aspect-ratio am Bild oder seinem Container.
Prüfen Sie Ihr : Die meisten fügen beim Einfügen über den Editor die Abmessungen automatisch ein. Fehlende Größen stammen daher oft aus handgeschriebenem , Vorlagen oder eingebetteten Inhalten.

So testet Silktide dies

Lädt die Seite in einem echten Browser, mit dem für Ihre Geschwindigkeitstests konfigurierten Gerätetyp, der Verbindungsgeschwindigkeit und dem Teststandort.
Findet jedes Bild, das ohne explizite Größe gerendert wird – ohne nutzbare width-/height-Attribute und ohne CSS, das seine Abmessungen festlegt.
Meldet jedes Bild ohne Größe samt seiner Position auf der Seite.

Fehlerbehebung

Die Seite sieht gut aus, wenn ich sie lade

Mit gecachten Bildern oder einer schnellen Verbindung können Bilder so schnell ankommen, dass nichts sichtbar springt. Auf langsameren Netzwerken sehen Besuchende, wie sich dieselbe Seite Stück für Stück aufbaut. Reservierter Platz kostet nichts, wenn das Bild schnell lädt, und verhindert das Springen, wenn nicht.

Zerstören feste Größen nicht mein Responsive Design?

Nein. Moderne Browser behandeln die Attribute width und height als Seitenverhältnis des Bildes, nicht als feste Größe, sodass CSS das Bild weiterhin an jede Bildschirmgröße anpassen kann. Die Attribute und die CSS des arbeiten zusammen.