Lazy-Loading-Prüfer
Das richtige Bild zur richtigen Zeit
Dieser Lazy-Loading-Prüfer liest jedes Bild und jeden Frame einer Seite der Reihe nach und beurteilt, wann jedes lädt. Er findet weiter unten liegende Bilder, die zu früh laden, Hero-Bilder, die zu lange warten, und Bilder ohne reservierten Platz.
- KostenlosPreis
- LCP, CLSMisst
- KeineAnmeldung
- NichtsGespeichert
Lazy-Loading-Prüfer
Welche Bilder auf das Scrollen warten, welche zu früh laden und welche das größte Rendering bremsen
- Bilder und Frames
- 0
- Warten aufs Scrollen
- 0
- Laden sofort
- 0
- Zu verbessern
- 0
- Bereits gut
- 0
| # | Element | Laden | Urteil | Was tun |
|---|---|---|---|---|
| Fügen Sie oben eine Adresse ein, dann erscheint die Ladereihenfolge hier. | ||||
Die Position wird aus der Quelltext-Reihenfolge gelesen, weil eine auf dem Server abgerufene Seite nie gerendert wird. Die ersten Bilder gelten als die, die ein Besucher zuerst sieht. Das stimmt fast immer, sollte aber auf Ihrem Layout kurz geprüft werden.
Bereit. Fügen Sie eine öffentliche Adresse ein, dann liest dieser Server die Bilder darauf einmal.
Lazy Loading hat zwei Seiten
Lazy Loading sagt dem Browser, ein Bild erst zu laden, wenn es gleich ins Bild scrollt.
Bei Bildern weiter unten spart es Daten und lässt den oberen Teil der Seite früher ankommen. Beim ersten Bild bewirkt es jedoch das Gegenteil.
Das erste große Bild ist meist das, was die Core Web Vitals als Largest Contentful Paint messen. Wartet es auf das Scrollen, gilt die ganze Seite als langsam.
Die richtige Antwort hängt also davon ab, wo jedes Bild sitzt und in welchem Moment es gebraucht wird. Genau diese Frage stellt der Prüfer jedem einzelnen.
Welche Bilder warten sollten
Alles, wozu ein Besucher scrollen muss. Dazu gehören Galerien, Bilder tief im Artikel, Logos in der Fußzeile und eingebettete Videos.
Frames verdienen besondere Aufmerksamkeit. Ein eingebettetes Video oder eine Karte lädt eine ganze zweite Seite, deshalb spart loading="lazy" an einem iframe oft mehr als an jedem Bild.
Welche Bilder nicht warten dürfen
Das Hero-Bild, das Produktfoto oben und das Logo im Header sollten alle sofort laden.
Das größte Bild oben kann sogar noch weiter gehen. fetchpriority="high" sagt dem Browser, es vor anderen Bildern zu laden, was den Largest Contentful Paint oft spürbar verbessert.
Hohe Priorität und Lazy Loading am selben Bild zu verlangen ist ein Widerspruch, und deshalb markiert der Prüfer es.
Warum width und height hier zählen
Ein Bild ohne width und height hat keinen reservierten Platz. Wenn es endlich ankommt, springt alles darunter nach unten, und das zählen die Core Web Vitals als Layoutverschiebung.
Lazy Bilder verschlimmern das, weil sie ankommen, während der Leser schon scrollt. Folglich wertet der Prüfer fehlende Abmessungen bei jedem Bild als Fehler.
Setzen Sie die Attribute auf die echten Proportionen des Bildes. Responsives CSS kann es trotzdem skalieren, denn der Browser braucht nur das Verhältnis.
Natives oder Skript-Lazy-Loading
Ältere Plugins verstecken die echte Adresse in data-src und tauschen sie per Skript ein. Das funktioniert für Besucher, aber Crawler und alle ohne JavaScript sehen nur einen Platzhalter.
Das Attribut loading="lazy" braucht kein Skript und wird von jedem aktuellen Browser unterstützt. Deshalb empfiehlt der Prüfer es überall, wo er das alte Muster findet.
Wie die Position beurteilt wird
Eine auf dem Server gelesene Seite wird nie gerendert, also nutzt der Prüfer die Quelltext-Reihenfolge. Die ersten drei Bilder gelten als erster Bildschirm, was fast immer stimmt, aber auf Ihrem Layout einen Blick wert ist.
So nutzen Sie den Lazy-Loading-Prüfer
Eine Adresse hinein, alle Bilder und Frames heraus, in der Reihenfolge der Seite.
- 1
Seitenadresse einfügen
Nehmen Sie die Seite, die Ihnen am wichtigsten ist, meist die Startseite oder eine wichtige Landingpage.
- 2
Die oberen drei Zeilen prüfen
Das sind die Bilder, die ein Besucher zuerst sieht. Deshalb sollte keins davon auf das Scrollen warten.
- 3
Dann weiter unten lesen
Unterhalb des ersten Bildschirms sollte jedes Bild und jeder Frame loading="lazy" tragen.
- 4
Größen zuletzt beheben
Ergänzen Sie width und height, wo sie fehlen, und prüfen Sie dann erneut.
Was diesen Lazy-Loading-Prüfer auszeichnet
loading="lazy" zu zählen ist leicht. Nützlich ist dagegen zu wissen, wo es hilft und wo es schadet.
Zuerst die Position
Jedes Bild wird danach beurteilt, wo es sitzt, also ist ein lazy Hero-Bild ein Fehler und kein Erfolg.
Größtes Rendering geschützt
Frühe Bilder, die warten, und hohe Priorität zusammen mit Lazy Loading gelten als die dringendsten Korrekturen.
Layoutverschiebung geprüft
Fehlende width und height werden bei jedem Bild erkannt, denn lazy Bilder machen den Sprung schlimmer.
Skript-Loader erkannt
data-src-Platzhalter, die Crawler nie sehen, werden benannt, zusammen mit dem nativen Attribut als Ersatz.
Frames inklusive
Eingebettete Videos und Karten werden neben Bildern geprüft, weil sie oft das Schwerste auf der Seite sind.
Export mit einem Klick
Übernehmen Sie den Bericht oder speichern Sie ihn als CSV für Ihren Entwickler.
Regeln für Lazy Loading von Bildern
Acht Gewohnheiten, die Lazy Loading zum Gewinn statt zur Strafe machen.
- Beim Hauptbild auf loading=lazy verzichten. Das erste große Bild misst der Largest Contentful Paint, deshalb muss es sofort laden.
- Dem Hero-Bild hohe Priorität geben. fetchpriority="high" an diesem einen Bild setzt es an die Spitze der Warteschlange.
- Alles unterhalb des ersten Bildschirms lazy laden. Bilder und Frames, zu denen man scrollen muss, sollten loading="lazy" tragen.
- Die Attribute width und height nie vergessen. Sie reservieren den Platz, also springt nichts, wenn das Bild ankommt.
- Das native Attribut bevorzugen. loading="lazy" braucht kein Skript, läuft in jedem aktuellen Browser, und Crawler sehen die echte Adresse.
- Einbettungen zuerst lazy laden. Ein Video- oder Karten-Frame kann mehr wiegen als alle Bilder der Seite zusammen.
- Theme-Standards im Blick behalten. Viele Themes setzen loading="lazy" an jedes Bild, auch an das erste. Schalten Sie es daher beim Hero-Bild ab.
- Auf dem Handy testen. Der erste Bildschirm eines Handys zeigt weniger Bilder als ein Desktop, also prüfen Sie, welche wirklich zuerst erscheinen.
Sechs Lazy-Loading-Fehler, die Seiten bremsen
Jeder davon sieht nach Optimierung aus und kostet trotzdem still Tempo.
Lazy Loading an jedem Bild
Auch am ersten, was bei jedem Besuch das größte Rendering verzögert.
Hohe Priorität an einem lazy Bild
Die beiden Anweisungen heben sich auf, und der Browser kann nur einer folgen.
Kein width und height
Die Seite springt, sobald ein Bild landet, und genau das misst die Layoutverschiebung.
Lazy Loading nur per Skript
Crawler und Besucher ohne JavaScript sehen einen leeren Platzhalter statt des Bildes.
Die Einbettungen vergessen
Ein Video-Frame am Ende eines Beitrags lädt seinen Player ohne loading="lazy" trotzdem sofort.
Zwei Lazy Loader gleichzeitig
Wenn ein Plugin und ein Theme es beide übernehmen, warten Bilder doppelt oder laden gar nicht.
Ihre Fragen zu Lazy Loading
Was ist Lazy Loading?
Es verzögert das Laden eines Bildes oder Frames, bis es gleich ins Bild scrollt, damit der obere Teil der Seite schneller lädt.
Hilft Lazy Loading bei SEO?
Indirekt. Schnellere Seiten schneiden bei den Core Web Vitals besser ab. Lazy Loading am falschen Bild verschlechtert den Wert jedoch.
Sollte ich das erste Bild lazy laden?
Nein. Das erste große Bild ist meist das Largest-Contentful-Paint-Element, deshalb sollte es sofort laden, am besten mit fetchpriority="high".
Wird loading="lazy" überall unterstützt?
Jeder aktuelle Browser unterstützt es für Bilder, und außerdem unterstützen es alle großen auch für iframes.
Sieht Google lazy geladene Bilder?
Mit loading="lazy" ja, weil die echte Adresse in src bleibt. Bei reinen Skript-Loadern hängt es dagegen vom Skript ab, deshalb ist das native Attribut sicherer.
Warum will der Prüfer width und height?
Ohne sie kann der Browser keinen Platz reservieren, also verschiebt sich die Seite, wenn das Bild ankommt. CSS kann das Bild trotzdem skalieren.
Woher weiß der Prüfer, was im ersten Bildschirm liegt?
Er nutzt die Quelltext-Reihenfolge, weil eine auf dem Server gelesene Seite kein Layout hat. Daher gelten die ersten drei Bilder als erster Bildschirm.
Warum fehlen manche Bilder?
Bilder, die ein Skript später einfügt, oder CSS-Hintergründe sind nicht in der Seite, die der Server sendet, also erscheinen sie nicht.
Sollte ich iframes lazy laden?
Ja, sobald sie unterhalb des ersten Bildschirms liegen. Ein Video- oder Karten-Frame ist oft das Schwerste auf der Seite.
Wird die geprüfte Seite gespeichert?
Nein. Die Adresse dient einem einzigen Abruf und ist dann weg, und nichts davon wird behalten.
Tools für schnellere Bilder
Die Ladereihenfolge ist ein Teil des Bildtempos. Hier die Antworten auf die übrigen Fragen.
Bildkonverter
Schwere Bilder in WebP oder AVIF umwandeln, ohne sie hochzuladen.
Tool öffnen →Alt-Text-Prüfer für Bilder
Ein Urteil über den Alt-Text jedes Bildes einer Seite.
Tool öffnen →HTTP-Header-Prüfer
Komprimierung, Caching und die acht Sicherheits-Header, mit Korrektur.
Tool öffnen →
Bereit, Ihre Ladereihenfolge zu prüfen?
Fügen Sie eine Adresse ein und sehen Sie, wann jedes Bild lädt. Der Lazy-Loading-Prüfer ist kostenlos, braucht kein Konto und speichert nichts über die Seite.