Påverkar lazy loading AI-synlighet? Får blandade besked om detta

Låt mig bryta ner varje typ av lazy loading.

1. Inbyggd lazy loading för bilder (loading=“lazy”):

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

Påverkan: I allmänhet inga problem för AI-crawlers.

• Bild-URL finns i HTML
• Crawlers kan se referensen
• De behöver inte “rendera” bilden för att veta att den finns

2. JavaScript lazy loading för bilder:

<img data-src="image.jpg" class="lazy">
// JS byter data-src till src vid scroll

Påverkan: Potentiellt problematiskt.

• Utan JS-körning är src tom
• Crawlers kanske inte ser bilden
• Använd loading=“lazy” istället

3. Intersection Observer för innehåll:

observer.observe(element);
// Laddar innehåll när elementet kommer in i viewport

Påverkan: Problematiskt för AI.

• AI-crawlers har ingen “viewport”
• Scrollar inte eller triggar intersection
• Innehållet kanske aldrig laddas

4. Oändlig scroll:

Påverkan: Väldigt problematiskt.

• Innehåll bortom första sidan är osynligt
• Crawlers scrollar inte för att trigga laddning
• Endast första sidan med innehåll synligt

Den generella regeln:

Om innehållet kräver användarinteraktion eller närvaro i viewport för att laddas, kommer AI-crawlers troligen inte att se det.

Prestanda vs AI-synlighet – en avvägning.

Varför vi lazy-loadar:

• Snabbare initial sidladdning
• Bättre Core Web Vitals
• Mindre bandbredd för användare

Konflikten:

• Det som är bra för prestanda kan skada AI-synligheten
• Särskilt JS-beroende lazy loading

Lösningsförslag:

För bilder: Inbyggd lazy loading ger båda fördelarna. Använd det.

För innehåll: Server-rendera kritiskt innehåll. Lazy-loada endast:

• Nedanför viklinjen, kompletterande innehåll
• Rekommendationer som inte är citeringsmål
• UI-förbättringar som inte påverkar indexerat innehåll

Prioriteringen:

Identifiera vilket innehåll du vill att AI ska citera. Det måste finnas i initial HTML. Allt annat kan optimeras för prestanda.

Praktiskt exempel:

Artikelsida:

• Artikeltext: I HTML, alltid (citeringsmål)
• Relaterade artiklar: Kan lazy-loadas (ej citeringsmål)
• Kommentarer: Kan lazy-loadas (ej citeringsmål)
• Delaknapp: Kan lazy-loadas (endast UI)

Vad vi vet om AI-crawlers beteende.

GPTBot:

• Grundläggande HTTP-förfrågningar
• Minimal JavaScript-körning
• Följer länkar den ser i HTML

ClaudeBot:

• Liknande som GPTBot
• HTML-fokuserad crawling
• Begränsad hantering av dynamiskt innehåll

PerplexityBot:

• Mer sofistikerad
• Viss JavaScript-hantering
• Men fortfarande främst HTML-fokuserad

Gemensamt för alla:

• Ingen scrollning
• Ingen simulering av användarinteraktion
• Tidsbegränsad process
• HTML-innehåll prioriteras

Slutsatsen:

Innehåll som kräver:

• Scrollning
• Klickinteraktioner
• Längre JavaScript-exekvering
• Närvaro i viewport

…är sannolikt osynligt för dessa crawlers.

Teststrategi:

1. Visa sidkälla (inte inspektera element)
2. Finns ditt kritiska innehåll där?
3. Om inte, ser crawlers det inte

Enkelt men avgörande.

Rekommendationer för implementation.

För nya implementationer:

Bilder:

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

Klart. Inbyggt är bäst.

Innehållssektioner:

<div class="content">
  <!-- Fullt innehåll i HTML -->
  Komplett artikeltext här
</div>

Lazy-loada bara visuella förbättringar, inte innehåll.

Listor/grid:

<ul class="items">
  <li>Objekt 1</li>
  <li>Objekt 2</li>
  <!-- Minst 10-20 objekt i HTML -->
</ul>
<a href="?page=2">Ladda mer</a>

Initiala objekt i HTML, paginering för fler.

För befintliga implementationer:

Om du har JS-beroende lazy loading:

1. Granska vilket innehåll som påverkas
2. Prioritera kritiska citeringsmål
3. Flytta dessa till server-renderat
4. Behåll lazy loading för icke-kritiskt innehåll

Kollen:

Efter ändringar:

curl -s https://dinsajt.se/sida | grep "kritiskt innehållsfras"

Om det finns där är du klar.

Övervakningsperspektiv.

Så vet du om lazy loading skadar dig:

1. Kolla Am I Cited-data

• Blir sidor med lazy-loadat innehåll citerade mindre?
• Jämför liknande sidor med olika implementationer

2. Manuell testning

• Fråga AI om innehåll i lazy-loadade sektioner
• Känner den till informationen?
• Om inte, är innehållet kanske osynligt

3. Serverloggar

• Hur interagerar AI-crawlers med din sajt?
• Får de kompletta svar?

Vad vi sett:

Sajter med mycket lazy loading (särskilt oändlig scroll):

• 40–60 % mindre innehåll synligt för AI
• Lägre citeringsfrekvens för det innehållet
• Åtgärdat efter SSR/paginering

Sajter med bara bild lazy loading:

• Ingen märkbar påverkan
• Inbyggt loading=“lazy” fungerar bra

Rekommendation:

Granska, testa, övervaka. Utgå inte från att din implementation är bra – verifiera det.

Tydlig åtgärdsplan nu.

Det vi behåller:

• Inbyggd lazy loading för bilder – inga problem

Det vi ändrar:

Intersection Observer-sektioner:

• Flyttar kritiskt innehåll till initial HTML
• Lazy-loadar endast UI-förbättringar

Oändliga scroll-sidor:

• Lägger till paginering
• Första 20 objekt i HTML
• “Ladda mer”-knapp för resten

Testmetod:

1. Curl på sidor efter ändringar
2. Verifiera att kritiskt innehåll finns i HTML
3. Övervaka AI-synlighet med Am I Cited
4. Jämför citeringsfrekvens före/efter

Principen: Innehåll vi vill att AI ska citera = alltid i HTML Allt annat = kan optimeras för prestanda

Tack för teknisk tydlighet!