Påvirker lazy loading AI-synlighet? Får motstridende signaler om dette

La meg bryte ned hver type lazy loading.

1. Native lazy loading for bilder (loading=“lazy”):

<img src="image.jpg" loading="lazy" alt="Description">

Påvirkning: Vanligvis uproblematisk for AI-crawlere.

• Bilde-URL er i HTML
• Crawlere kan se referansen
• De trenger ikke “rendre” bildet for å vite at det eksisterer

2. JavaScript lazy loading for bilder:

<img data-src="image.jpg" class="lazy">
// JS bytter data-src til src ved scroll

Påvirkning: Potensielt problematisk.

• Uten JS-eksekvering er src tom
• Crawlere ser kanskje ikke bildet
• Bruk loading=“lazy” istedenfor

3. Intersection Observer for innhold:

observer.observe(element);
// Laster innhold når elementet kommer i viewport

Påvirkning: Problem for AI.

• AI-crawlere har ikke “viewport”
• Scroller ikke eller utløser intersection
• Innholdet blir kanskje aldri lastet

4. Uendelig scrolling:

Påvirkning: Veldig problematisk.

• Innhold etter første side er usynlig
• Crawlere scroller ikke for å laste mer
• Kun første side er synlig

Hovedregelen:

Hvis innhold krever brukerinteraksjon eller tilstedeværelse i viewport for å laste, vil AI-crawlere sannsynligvis ikke se det.

Ytelse vs AI-synlighet – en avveining.

Hvorfor vi bruker lazy loading:

• Raskere innlasting av siden
• Bedre Core Web Vitals
• Mindre båndbredde for brukere

Spenningsforholdet:

• Det som er bra for ytelse kan skade AI-synlighet
• Spesielt JS-avhengig lazy loading

Løsningsforslag:

For bilder: Native lazy loading gir begge fordeler. Bruk det.

For innhold: Server-render kritisk innhold. Lazy load kun:

• Tilleggsinnhold under fold
• Anbefalinger som ikke er siteringsmål
• UI-forbedringer som ikke påvirker indekserbart innhold

Prioritering:

Identifiser hvilket innhold du vil at AI skal sitere. Det innholdet må ligge i initial HTML. Alt annet kan ytelsesoptimaliseres.

Praktisk eksempel:

Artikkelside:

• Artikkeltekst: I HTML, alltid (siteringsmål)
• Relaterte artikler: Kan lazy-loades (ikke siteringsmål)
• Kommentarer: Kan lazy-loades (ikke siteringsmål)
• Delingsknapper: Kan lazy-loades (kun UI)

Hva vi vet om AI-crawleres atferd.

GPTBot:

• Grunnleggende HTTP-forespørsler
• Minimal JavaScript-kjøring
• Følger lenker den finner i HTML

ClaudeBot:

• Ligner på GPTBot
• HTML-fokusert crawling
• Begrenset håndtering av dynamisk innhold

PerplexityBot:

• Mer avansert
• Noe JavaScript-håndtering
• Men fortsatt hovedsakelig HTML-fokusert

Felles for alle:

• Ingen scrolling
• Ingen brukerinteraksjon-simulering
• Tidsbegrenset prosessering
• HTML-innhold har prioritet

Implikasjonen:

Innhold som krever:

• Scrolling
• Klikk-interaksjoner
• Utstrakt JavaScript-kjøring
• Tilstedeværelse i viewport

…er trolig usynlig for disse crawlerne.

Teststrategi:

1. Vis sidens kildekode (ikke “inspiser element”)
2. Er ditt kritiske innhold der?
3. Hvis ikke, ser crawlerne det ikke

Enkelt, men avgjørende.

Anbefalinger for implementering.

For nye implementasjoner:

Bilder:

<img src="image.jpg" loading="lazy" alt="Description">

Ferdig. Native er best.

Innholdsseksjoner:

<div class="content">
  <!-- Fullt innhold i HTML -->
  Komplett artikkeltekst her
</div>

Lazy load kun visuelle forbedringer, ikke innhold.

Lister/grid:

<ul class="items">
  <li>Element 1</li>
  <li>Element 2</li>
  <!-- Minst 10–20 elementer i HTML -->
</ul>
<a href="?page=2">Last mer</a>

Innledende elementer i HTML, paginering for resten.

For eksisterende implementasjoner:

Hvis du har JS-avhengig lazy loading:

1. Kartlegg hvilket innhold som påvirkes
2. Prioriter kritiske siteringsmål
3. Flytt disse til server-rendering
4. Behold lazy loading for ikke-kritisk innhold

Kontroll:

Etter endringer:

curl -s https://dittnettsted.com/side | grep "kritisk innholdsfrase"

Hvis det er der, er alt i orden.

Overvåkingsperspektiv.

Slik ser du om lazy loading skader deg:

1. Sjekk Am I Cited-data

• Blir sider med lazy loaded-innhold sitert mindre?
• Sammenlign like sider med ulik implementering

2. Manuell testing

• Spør AI om innholdet i lazy loadede seksjoner
• Kjenner den til informasjonen?
• Hvis ikke, er innholdet kanskje usynlig

3. Serverlogger

• Hvordan samhandler AI-crawlere med nettstedet ditt?
• Får de komplette svar?

Hva vi har sett:

Nettsteder med mye lazy loading (spesielt uendelig scrolling):

• 40–60 % mindre innhold synlig for AI
• Lavere siteringsrate på det innholdet
• Fikset etter innføring av SSR/paginering

Nettsteder med kun bilde lazy loading:

• Ingen merkbar effekt
• Native loading=“lazy” fungerer fint

Anbefalingen:

Kartlegg, test, overvåk. Ikke anta at implementeringen er god nok. Verifiser det.

Tydelig handlingsplan nå.

Hva vi beholder:

• Native lazy loading for bilder – ingen problemer

Hva vi endrer:

Intersection Observer-seksjoner:

• Flytter kritisk innhold til initial HTML
• Lazy loader kun UI-forbedringer

Uendelig scrolling-sider:

• Legger til paginering
• Første 20 elementer i HTML
• “Last mer”-knapp for resten

Testmetode:

1. Curl sidene etter endringer
2. Sjekk at kritisk innhold er i HTML
3. Overvåk AI-synlighet med Am I Cited
4. Sammenlign siteringsrate før/etter

Prinsippet: Innhold vi vil at AI skal sitere = alltid i HTML Alt annet = kan ytelsesoptimaliseres

Takk for teknisk klarhet!