Udskudte billeder uden for skærmen
Silktide tjekker, om din side downloader billeder, som den besøgende endnu ikke kan se – billeder længere nede på siden, under den første skærm. Indlæsning af dem med det samme forsinker det indhold, den besøgende faktisk ser på.
Løsningen er : Browseren henter hvert billede lige før, det ruller ind i visningen, i stedet for at downloade alle billeder på siden med det samme.
Hvorfor det er vigtigt
Når en side indlæses, har browseren begrænset båndbredde til rådighed, og hvert billede, den downloader, konkurrerer med alt andet. Hvis denne båndbredde bruges på billeder tre skærme længere nede, betyder det, at overskriftsbilledet, teksten og knapperne, som den besøgende venter på, ankommer senere.
På lange sider med mange billeder er spildet stort: En besøgende, der læser den første skærm og forlader siden, kan have betalt – i tid og mobildata – for snesevis af billeder, som vedkommende aldrig så.
Sådan løser du det
- Tilføj
loading="lazy"til billeder under den første skærm. Browsere understøtter dette indbygget, uden behov for scripts:
<!-- Langt nede på siden: Indlæs ikke, før den besøgende nærmer sig det -->
<img src="team-photo.jpg" alt="Vores team" loading="lazy" width="800" height="600">
- Brug ikke doven indlæsning af billeder øverst på siden, især ikke det største – det forsinker det, de besøgende ser først, og skader mere, end det hjælper.
- Mange CMS'er og frameworks bruger nu automatisk doven indlæsning af billeder. Hvis dit ikke gør, så se efter en indstilling eller et plugin, før du redigerer skabeloner.
- Bevar eksplicitte dimensioner på billeder med doven indlæsning, så siden ikke hopper, når de indlæses – se Eksplicitte billedstørrelser.
Sådan tester Silktide dette
- Indlæs siden i en rigtig browser med den enhedstype, forbindelseshastighed og testplacering, der er konfigureret til dine hastighedstests.
- Identificer billeder, der downloades under den første indlæsning, men er placeret helt under den synlige skærm, og som ikke allerede er udskudt.
- Rapportér hvert billede uden for skærmen med den downloadstørrelse, der kan udskydes.
- Bedøm siden ud fra den samlede størrelse, der kan udskydes: Omkring 30 KB giver en lavere bedømmelse, og 100 KB eller mere bedømmes som dårlig.
Fejlfinding
Billedet er synligt på min skærm
Hvad der er "uden for skærmen", afhænger af skærmen. Silktide tester med den enhed, der er konfigureret til dine hastighedstests, så et billede ved folden på din computerskærm kan ligge under den første skærm på en mindre . Doven indlæsning er stadig sikkert: Billedet indlæses, så snart den besøgende nærmer sig det.
Vi bruger allerede doven indlæsning med et script
Ældre scriptbaserede løsninger udløser nogle gange stadig downloads for tidligt, eller scriptet dækker muligvis ikke billeder, som tilføjes af andre plugins. De rapporterede billeder viser præcis, hvad der blev downloadet, mens det var uden for skærmen. Indbygget loading="lazy" er den enkleste pålidelige løsning.