Uppskjutna bilder utanför skärmen
Silktide kontrollerar om sidan hämtar bilder som besökaren ännu inte kan se – bilder längre ned på sidan, under den första skärmbilden. Om de läses in direkt fördröjs innehållet som besökaren faktiskt tittar på.
Lösningen är : webbläsaren hämtar varje bild precis innan den rullas in i synfältet, i stället för att hämta alla bilder på sidan direkt.
Varför detta är viktigt
När en sida läses in har webbläsaren begränsad bandbredd att fördela, och varje bild som hämtas konkurrerar med allt annat. Om bandbredden används till bilder tre skärmbilder längre ned innebär det att rubrikbilden, texten och knapparna som besökaren väntar på kommer senare.
På långa sidor med många bilder är resursslöseriet stort: en besökare som läser den första skärmbilden och lämnar sidan kan ha betalat – i tid och mobildata – för dussintals bilder som hen aldrig såg.
Så åtgärdar du problemet
- Lägg till
loading="lazy"på bilder under den första skärmbilden. Webbläsare har inbyggt stöd för detta, utan att några skript behövs:
<!-- Långt ned på sidan: läs inte in förrän besökaren närmar sig bilden -->
<img src="team-photo.jpg" alt="Vårt team" loading="lazy" width="800" height="600">
- Använd inte lazy loading för bilder längst upp på sidan, särskilt inte för den största bilden – det fördröjer det besökarna ser först och gör mer skada än nytta.
- Många CMS:er och ramverk använder nu lazy loading för bilder automatiskt. Om ditt inte gör det bör du kontrollera om det finns en inställning eller ett tillägg innan du redigerar mallarna.
- Behåll uttryckliga dimensioner för bilder som läses in med lazy loading så att sidan inte hoppar när de visas – se Explicit image sizes.
Så testar Silktide detta
- Läs in sidan i en riktig webbläsare med den enhetstyp, anslutningshastighet och testplats som har konfigurerats för dina hastighetstester.
- Identifiera bilder som hämtas under den första inläsningen men som befinner sig helt under den synliga skärmbilden och som inte redan är uppskjutna.
- Rapportera varje bild utanför skärmen tillsammans med den hämtningsstorlek som kunde ha skjutits upp.
- Bedöm sidan utifrån den totala storlek som kan skjutas upp: omkring 30 KB ger ett lägre betyg, medan 100 KB eller mer bedöms som dåligt.
Felsökning
Bilden syns på min skärm
Vad som är ”utanför skärmen” beror på skärmen. Silktide testar med den enhet som har konfigurerats för dina hastighetstester, så en bild som ligger bredvid nederkanten på din datorskärm kan hamna under den första skärmbilden på en mindre . Lazy loading är fortfarande säkert: bilden läses in så snart besökaren närmar sig den.
Vi använder redan lazy loading med ett skript
Äldre skriptbaserade metoder kan ibland fortfarande utlösa hämtningar för tidigt, eller så kanske skriptet inte omfattar bilder som läggs till av andra tillägg. De rapporterade bilderna visar exakt vad som hämtades medan de befann sig utanför skärmen. Inbyggt stöd för loading="lazy" är den enklaste tillförlitliga lösningen.