Lazy loading innebär att bilder laddas först när de är synliga i webbläsarfönstret. Det minskar onödig datatrafik och resursförbrukning. Men nya undersökningar visar att för aggressiv lazy loading kan leda till längre tid till största innehållsladdning (Largest Contentful Paint).

Innehållsförteckning

• Lazy loading-användning ökar snabbt
• För mycket lazy loading kan försämra prestanda
• Undvik lazy loading ovanför sidfolden
• Så justerar du inställningarna
• Sammanfattning

Lazy loading-användning ökar snabbt

Användningen av native lazy loading växer snabbt och har nu 17% marknadsandel enligt senaste HTTP Archive-data. WordPress-sajter står för majoriteten av implementeringarna.

Antalet WordPress-sajter med lazy loading har ökat från tiotusentals till över 1 miljon på bara ett år. Det visar hur populär tekniken blivit.

Lazy loading reducerar sidans totala bildstorlek markant, vilket minskar datatrafik och påverkan på mobilsurfare med begränsade dataplaner.

För mycket lazy loading kan försämra prestanda

Även om lazy loading minskar sidans storlek visar nya undersökningar att det kan ha en negativ inverkan på sidprestanda om det används för aggressivt.

Data från Chrome User Experience Report indikerar att sidor som använder lazy loading tenderar att ha sämre Largest Contentful Paint, även när man enbart tittar på WordPress-sajter.

För att undersöka orsakssambandet gjordes A/B-tester på en WordPress-demo. Resultaten bekräftade att avaktiverad lazy loading gav bättre LCP.

Problemet verkar alltså vara kopplat till själva implementationen av lazy loading.

Undvik lazy loading ovanför sidans synliga del

Vid en närmare granskning av WordPress lazy loading visade det sig att även bilder ovanför sidfolden laddas lazy.

Det innebär att den första bilden som användaren ser fördröjs i onödan.

Genom att undanta bilder ovanför sidfolden och bara lazy loada övriga bilder kunde prestandaproblemen elimineras helt enligt nya tester.

LCP blev till och med snabbare än utan lazy loading eftersom mindre konkurrerande nätverksförfrågningar gav högre prioritet åt LCP-bilden.

Så justerar du inställningarna

För att undvika prestandanedsättning med lazy loading bör du:

• Inte lazy loada bilder ovanför sidfolden
• Använda heuristik för att identifiera sådana bilder
• Uppdatera WordPress-inställningar när patch släpps
• Kontrollera CMS-inställningar om du använder annat system
• Optimera individuellt efter A/B-tester på din sajt

Genom att läsa in de viktigaste bilderna omedelbart och lazy loada resten får du bästa möjliga prestanda!

Sammanfattning

Lazy loading är en kraftfull teknik när den implementeras rätt. Undvik att lazy loada bilder ovanför sidfolden, särskilt LCP-bilden. Med omsorgsfull justering kan lazy loading ge stora prestandavinster utan nackdelar.

Dela gärna denna artikel om du fann informationen användbar!