Vind de afbeeldingen die de eerste rendering blokkeren

Performance- en SEO-teams gebruiken het als de eerste rendering traag is en beelden buiten beeld de pagina mogelijk tegenhouden.

Vind de afbeeldingen die de eerste rendering blokkeren. De uitvoer blijft op je apparaat en is direct klaar om te kopiëren of aan te passen.

Hoe te gebruiken

Plak de HTML van de pagina die je wilt controleren.
Voer de controle uit om afbeeldingen te vinden die in de eerste weergave aanwezig zijn.
Bekijk de afbeeldingen die niet onmiddellijk mogen laden.
Voeg lazy loading toe aan afbeeldingen die buiten de eerste viewport vallen.

Voorbeeld

Een SEO-specialist merkt dat een homepage te lang doet over het tonen van de hoofdinhoud. Hij plakt de HTML, voert de controle uit en ziet dat afbeeldingen in de voettekst vroeg laden. Die afbeeldingen worden omgezet naar lazy loading voordat de pagina opnieuw wordt getest. Hij zorgt er ook voor dat de hoofdafbeelding een prioriteit blijft zodat de eerste weergave niet wordt geschaad.

Invoer

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

Limieten en formaten

De controle leest de HTML die je aanlevert, niet een live bezoek aan de pagina.
Afbeeldingen die door JavaScript worden ingevoegd of via CSS worden geladen, worden mogelijk niet allemaal gedetecteerd.
Lazy loading is niet geschikt voor afbeeldingen die op het eerste scherm zichtbaar zijn.
Controleer het gedrag op mobiel opnieuw na het wijzigen van de markup.
Het rapport moet na elke markupwijziging worden vernieuwd.

Waar de verwerking gebeurt

De geplakte HTML wordt in je browser onderzocht. Er wordt geen externe aanvraag gedaan en de gecontroleerde pagina wordt niet door het hulpmiddel opgehaald. Het rapport blijft lokaal totdat je de pagina verlaat.

Veelgestelde vragen

Bezoekt het hulpmiddel mijn website?

Nee, het laadt je pagina niet vanaf een webadres. Je kopieert de HTML zelf naar de invoer. De controle dekt daarom alleen de markup die je aanlevert en voert geen paginascripts uit.

Welke afbeeldingen moeten lazy-loaded worden?

Richt je op afbeeldingen lager op de pagina die niet nodig zijn voor de eerste weergave. Headerafbeeldingen of de hoofdproductfoto moeten vaak onmiddellijk laden. Controleer het resultaat op een echt scherm.

Waarom ontbreekt een afbeelding in het rapport?

Deze wordt mogelijk toegevoegd door JavaScript, gebruikt als CSS-achtergrond of geladen door een component van een derde partij. De controle ziet alleen de HTML die je plakt. Gebruik de ontwikkelaarstools van de browser om het beeld compleet te maken.