Bilder finden, die das erste Rendern blockieren

Performance- und SEO-Teams greifen darauf zurück, wenn das erste Rendern stockt und Bilder außerhalb des Sichtfelds verdächtig sind.

Bilder finden, die das erste Rendern blockieren. Sie erhalten eine klare Grundlage, die direkt in Ihrem Browser weiterverwendet werden kann.

Bedienung

Füge das HTML der Seite ein, die du prüfen möchtest.
Führe die Prüfung aus, um Bilder zu finden, die im ersten Rendering vorhanden sind.
Prüfe die Bilder, die nicht sofort geladen werden sollten.
Füge Lazy Loading zu Bildern hinzu, die außerhalb des anfänglichen Viewports liegen.

Beispiel

Ein SEO-Spezialist bemerkt, dass eine Startseite zu lange braucht, um ihren Hauptinhalt anzuzeigen. Er fügt das HTML ein, führt die Prüfung aus und entdeckt Fußzeilenbilder, die früh geladen werden. Diese Bilder werden auf Lazy Loading umgestellt, bevor die Seite erneut getestet wird. Außerdem stellt er sicher, dass das Hauptbild eine Priorität bleibt, damit die erste Ansicht nicht beeinträchtigt wird.

Eingabe

<img src="hero.jpg" alt="Hero">
<img src="icon.png" alt="Icon">

Grenzen und Formate

Die Prüfung liest das von dir bereitgestellte HTML, nicht einen Live-Besuch der Seite.
Bilder, die per JavaScript eingefügt oder über CSS geladen werden, werden möglicherweise nicht alle erkannt.
Lazy Loading eignet sich nicht für Bilder, die im ersten Bildschirm sichtbar sind.
Prüfe das Verhalten auf Mobilgeräten nach der Änderung des Markups erneut.
Der Bericht sollte nach jeder Markup-Änderung aktualisiert werden.

Wo die Verarbeitung stattfindet

Das eingefügte HTML wird in deinem Browser untersucht. Es wird keine externe Anfrage gestellt, und die geprüfte Seite wird nicht vom Werkzeug abgerufen. Der Bericht bleibt lokal, bis du die Seite verlässt.

Häufige Fragen

Besucht das Werkzeug meine Website?

Nein, es lädt deine Seite nicht von einer Webadresse. Du kopierst das HTML selbst in die Eingabe. Die Prüfung deckt daher nur das von dir bereitgestellte Markup ab und führt keine Seitenskripte aus.

Welche Bilder sollten per Lazy Loading geladen werden?

Konzentriere dich auf Bilder weiter unten auf der Seite, die für die erste Ansicht nicht benötigt werden. Header-Bilder oder das Hauptproduktbild müssen oft sofort geladen werden. Prüfe das Ergebnis auf einem echten Bildschirm.

Warum fehlt ein Bild im Bericht?

Es wird möglicherweise per JavaScript hinzugefügt, als CSS-Hintergrund verwendet oder von einer Drittanbieterkomponente geladen. Die Prüfung sieht nur das HTML, das du einfügst. Verwende die Entwicklerwerkzeuge des Browsers, um das Bild zu vervollständigen.