Utsatt lasting av bilder utenfor skjermen

Silktide kontrollerer om siden din laster ned bilder som den besøkende ikke kan se ennå – bilder lenger nede på siden, under det første skjermbildet. Når disse lastes inn på forhånd, blir innholdet den besøkende faktisk ser på, forsinket.

Løsningen er : Nettleseren henter hvert bilde rett før det rulles inn i synsfeltet, i stedet for å laste ned alle bildene på siden med én gang.

Hvorfor dette er viktig

Når en side lastes inn, har nettleseren begrenset båndbredde å bruke, og hvert bilde den laster ned, konkurrerer med alt annet. Når båndbredden brukes på bilder tre skjermbilder lenger nede, kommer overskriftsbildet, teksten og knappene den besøkende venter på, senere.

På lange sider med mange bilder er sløsingen betydelig: En besøkende som leser det første skjermbildet og forlater siden, kan ha brukt tid og mobildata på dusinvis av bilder de aldri så.

Slik løser du det

Legg til loading="lazy" på bilder under det første skjermbildet. Nettlesere støtter dette innebygd, uten at skript er nødvendig:

<!-- Langt nede på siden: ikke last inn før den besøkende nærmer seg -->
<img src="team-photo.jpg" alt="Teamet vårt" loading="lazy" width="800" height="600">

Ikke bruk lat lasting på bilder øverst på siden, særlig ikke på det største bildet – det forsinker det besøkende ser først, og gjør mer skade enn nytte.
Mange CMS-er og rammeverk bruker nå lat lasting av bilder automatisk. Hvis ditt ikke gjør det, bør du se etter en innstilling eller utvidelse før du redigerer maler.
Behold eksplisitte dimensjoner på bilder med lat lasting, slik at siden ikke hopper når de vises – se Eksplisitte bildestørrelser.

Slik tester Silktide dette

Last inn siden i en ekte nettleser med enhetstypen, tilkoblingshastigheten og teststedet som er konfigurert for hastighetstestene dine.
Identifiser bilder som lastes ned under den første innlastingen, men som i sin helhet er plassert under det synlige skjermbildet, og som ikke allerede er utsatt.
Rapporter hvert bilde utenfor skjermen med nedlastingsstørrelsen som kunne vært utsatt.
Gi siden karakter basert på den totale størrelsen som kan utsettes: rundt 30 KB gir lavere karakter, mens 100 KB eller mer gir karakteren dårlig.

Feilsøking

Bildet er synlig på skjermen min

Hva som er «utenfor skjermen», avhenger av skjermen. Silktide tester med enheten som er konfigurert for hastighetstestene dine, så et bilde ved kanten av skrivebordsskjermen din kan ligge under det første skjermbildet på en mindre . Lat lasting er fortsatt trygt: Bildet lastes inn så snart den besøkende nærmer seg det.

Vi bruker allerede lat lasting med et skript

Eldre skriptbaserte metoder utløser noen ganger fortsatt nedlastinger for tidlig, eller skriptet dekker kanskje ikke bilder som legges til av andre utvidelser. De rapporterte bildene viser nøyaktig hva som ble lastet ned mens de var utenfor skjermen. Innebygd loading="lazy" er den enkleste pålitelige løsningen.