Hvad er lazy loading?

Lazy loading betyder, at browseren venter med at hente et billede, indtil det er på vej ind på skærmen. I stedet for at trække alle 40 billeder på en lang side ned med det samme, hentes de fem øverste, og resten kommer, efterhånden som den besøgende ruller. Det sparer båndbredde, letter starten på siden og hjælper både LCP og TBT — så længe det er sat på de rigtige billeder.

Sådan virker det

Der skal ikke et plugin til. Browseren kan det selv:

<img src="/img/produkt.webp" width="800" height="600" alt="Produktet"
     loading="lazy">

Attributten loading="lazy" er understøttet i Chrome fra version 77, Edge fra 79, Firefox fra 75 og Safari fra 15.4. Det vil sige stort set alle browsere i brug i dag. Falder en gammel browser igennem, henter den bare billedet med det samme — der går ikke noget i stykker.

Browseren venter ikke, til billedet er synligt. Chrome begynder at hente, når billedet er inden for cirka 1.250 pixels fra skærmkanten på en hurtig forbindelse, og 2.500 pixels på en langsom. Derfor er billedet i praksis som regel klar, når man når ned til det.

Det ene sted du ikke må bruge det

Sæt aldrig loading="lazy" på billedet i toppen af siden.

Det er den mest almindelige selvskade, jeg finder, når en side har dårlig LCP uden nogen åbenlys grund. Hero-billedet er næsten altid LCP-elementet, og lazy loading fortæller browseren, at det billede kan vente. Resultatet er, at netop det billede, der afgør tallet, bliver hentet sidst.

Billeder, der er synlige uden at rulle, skal hentes normalt. Er det oven i købet LCP-elementet, kan du bede browseren om at prioritere det:

<img src="/img/hero.webp" width="1600" height="900" alt="..."
     fetchpriority="high">

Lazy loading i WordPress

WordPress sætter selv loading="lazy" på billeder i indholdet. Det er som udgangspunkt fornuftigt, men der er to fælder:

• Temaet henter hero-billedet gennem WordPress’ egne funktioner og får lazy med. Så skal det slås fra på netop det billede.
• Et optimeringsplugin lægger sin egen lazy loading ovenpå — ofte en JavaScript-udgave, der er langsommere end browserens indbyggede, og som gør billederne usynlige, indtil scriptet kører. Kør aldrig to lag lazy loading samtidig.

Husk width og height på hvert billede uanset hvad. Uden dem reserverer browseren ingen plads, og siden hopper, når billedet lander — det er CLS, og det er en dyrere fejl end den, du lige har rettet. Fremgangsmåden for begge dele står under hurtigere WordPress.

Ofte stillede spørgsmål

Skader lazy loading min SEO?

Nej, ikke når det er browserens indbyggede udgave. Google henter og indekserer billeder med loading="lazy" uden problemer. En JavaScript-baseret løsning, der skjuler billedet bag et script, er mere usikker.

Kan jeg bruge lazy loading på iframes?

Ja. loading="lazy" virker også på <iframe>, og det er særligt værd at gøre ved YouTube-indlejringer, som ellers trækker flere hundrede kilobytes ned, før nogen har trykket play.

Hvor mange billeder skal hentes med det samme?

Dem der er synlige på skærmen, når siden åbnes — typisk to til fem. Resten kan vente. Er du i tvivl, så kig på siden på en mobilskærm og tæl.