Varför laddas bilderna på min webbplats långsamt?

Börja med en långsam sida

Öppna den publicerade sidan på en telefon och en dator. Lägg märke till vilken bild som visas sent, om hela sidan är långsam och om text flyttar sig när bilderna visas.

1. Anteckna sidans adress och bilden som har problemet.
2. Kör ett test i PageSpeed Insights och spara de bildrelaterade resultaten.
3. Om någon annan sköter webbplatsen, ge personen adressen och rapporten. Be om en kontroll av den bilden innan hela bildbiblioteket ändras.

Följande avsnitt hjälper dig att välja nästa kontroll. För en närmare undersökning visar webbläsarens Network-panel vilka filer sidan laddar ner och hur lång tid varje begäran tar.

Koppla symtomet till rätt kontroll

Valfritt: granska bilden i Network-panelen

Öppna sidan i Chrome på en dator. Öppna utvecklarverktygen med Ctrl + Shift + J i Windows eller Linux, eller Command + Option + J på en Mac. Välj fliken Network och följ dessa steg:

1. Välj bildfiltret Img.
2. Aktivera Disable cache och ladda om sidan medan panelen är öppen. Då granskar du en ny nedladdning i stället för en kopia som webbläsaren har sparat.
3. Välj begäran för bilden med problemet. Kontrollera förhandsvisningen så att det är rätt bild.
4. Anteckna bildens adress och filstorlek.
5. Öppna Timing för att se vad som tar tid i begäran och kontrollera Initiator för att se vad som startade den.

Den här webbläsarinställningen tömmer inte webbplatsserverns eller CDN-tjänstens cache. En CDN-tjänst levererar webbplatsfiler från olika servrar och kan spara egna kopior.

Vid sen start, undersök om HTML, skript eller uppskjuten laddning utlöser förfrågan. Vid tidig start men lång svarsväntan, jämför en annan bild och HTML-dokumentet. Om filen kommer snabbt men inte syns, kontrollera CSS, animationer och JavaScript. Åtgärda fasen där tiden faktiskt förloras.

Timing visar vad begäran lägger tid på, till exempel väntan på servern eller nedladdning. Initiator visar vad som startade den, som HTML eller ett skript. Det skiljer en stor fil från en sen begäran.

Chromes dokumentation för Network

Skilj i Timing mellan Queueing eller Stalled, Waiting for server response (TTFB) och Content Download. Tiden före sändning kan bero på webbläsarens schemaläggning eller anslutningsuppbyggnad och är inte enbart serverarbete. TTFB omfattar även nätverkstiden; lång väntan bevisar därför inte ett webbhotellsfel. En lång nedladdning pekar mot datamängden och anslutningens hastighet. Jämför flera förfrågningar under samma förhållanden.

Minska onödigt stora filer

Om ett litet kort hämtar ett mycket stort foto, börja med bildmåtten. Skapa en proportionellt mindre kopia med storleksverktyget och jämför sedan WebP eller AVIF om leveranssystemet stöder dem. Guiden om bildformat hjälper dig att välja.

Granska hela den första skärmbilden. Dussintals små miniatyrer som hämtas samtidigt kan tillsammans kräva mycket data. Avgör vilka som behövs direkt och vilka som kan vänta tills besökaren rullar närmare dem.

Rätta till tidsförloppet när storleken inte är problemet

Låt inte uppskjuten inläsning försena den viktigaste synliga bilden. Om den väntar på en animation eller ett skript, undersök ordningen med utvecklaren. Googles LCP-guide skiljer mellan inläsnings- och renderingsfördröjningar.

Jämför flera förfrågningar innan du skyller på formatet. Om även HTML och andra resurser får vänta länge, undersök webbhotellet och leveransen. Tio nya exporter löser sannolikt inte väntan före serverns svar.

Testa igen under jämförbara förhållanden

Ett återbesök kan gå fortare tack vare cachen. Anteckna om laddningen är ny eller cachad och håll enhet och nätverk oförändrade. Testa även en smal skärm för att upptäcka om en mobil bildvariant saknas.

1. Anteckna en långsam sidadress och den berörda bildförfrågan.
2. Ändra bildfilen eller hur den laddas.
3. Kontrollera att den nya versionen levereras.
4. Upprepa mätningen och granska bildkvaliteten.

Se galleriets första vy som en helhet: huvudbild och tjugo miniatyrer kan behöva olika laddningsregler. Prioritera det synliga och senarelägg resten där det passar. Rulla sedan genom hela galleriet och navigera tillbaka för att upptäcka sena bilder eller tomma ytor.