Optimera bilder för Google PageSpeed

Dokumentera ett användbart utgångsläge

Öppna PageSpeed Insights, ange den offentliga webbadressen till sidan du vill testa och kör ett test för mobil eller dator.

1. Testa den publicerade adressen med exakt sökväg.
2. Anteckna om testet gäller mobil eller dator.
3. Spara den utpekade bilden och dess nuvarande adress.
4. Spara bildmått och filstorlek tillsammans med rapporten.
5. Bestäm målet: filstorlek, upptäckt, layoutstabilitet eller något annat.

Välj en representativ sida före större ändringar: en produkt med ett vanligt galleri eller en artikel med en typisk omslagsbild. Startsidan säger inte automatiskt hur alla sidmallar fungerar.

Välj en riktad åtgärd

Om den levererade bilden är större än visningsytan kräver, skapa lämpliga varianter. Om kodningen är problemet, jämför WebP med JPG till WebP eller PNG till WebP.

Om layouten hoppar när bilden visas, reservera utrymme. Om huvudbilden börjar hämtas sent, undersök hur webbläsaren hittar den. Guiden om Core Web Vitals förklarar skillnaderna.

Förstå de två typerna av mätdata

PageSpeed Insights kombinerar ett Lighthouse-test i labbmiljö med data från riktiga användare när sådana finns. Användardata omfattar de senaste 28 dagarna och kan gälla alla sidor med samma protokoll, värdnamn och port i stället för den enskilda sidan. Små webbplatser kan sakna tillräckligt med data; det innebär inte ett underkänt test. Läs Googles PageSpeed-dokumentation.

En ny export kan påverka nästa labbtest, medan historiska data inte genast enbart speglar den ändrade sidan. Anteckna vilken del av rapporten du jämför så att en omedelbar labbförbättring inte förväxlas med resultatet för samtliga användare.

Kontrollera om fältdata gäller denna URL eller hela ursprunget, origin. Ett origin samlar sidor med samma protokoll, värdnamn och port; dessa data bekräftar inte att en viss ändrad produktsida förbättrats. Håll sidans laboratorietester åtskilda från den bredare bilden. Skilj även uppskattad bytebesparing från uppmätt LCP-förbättring: en mindre bild behöver inte visas tidigare.

Kontrollera att ändringen är publicerad

Publicera filen och uppdatera hänvisningen vid behov. Kontrollera webbläsarens faktiska förfrågan. En lokal export ändrar ingenting för besökaren. Om den gamla filen fortfarande visas, undersök cache och genererade varianter.

Testa samma adress och enhetskategori igen. Upprepa oväntade variationer och jämför det konkreta problemet, inte bara poängen. Ändra inte webbhotell, skript och alla bilder samtidigt om du vill veta vad som hjälpte.

När andra flaskhalsar är viktigare

Undersök återstående fördröjningar när bildproblemen är lösta. Långsamma svar, tunga skript eller sen rendering kan dominera. Hårdare komprimering försämrar då bilden utan att åtgärda orsaken.

Dokumentera sida, original, ersättningsfil och resultat. Då kan processen upprepas och försämringar efter ändringar av tema eller layout upptäckas.

Exempel: från rapportfynd till en åtgärd

Anta att mobilrapporten pekar ut en för stor produktbild. Spara rapport, sid- och bildadress samt visningsmått. Publicera en mindre kopia med samma beskärning på en testsida och bekräfta förfrågan före nästa mätning. Detta är ett arbetsexempel, ingen uppmätt poängvinst.

Anteckna datum, enhetskategori, mått, filstorlek, LCP, layoutförskjutningar och kvalitet. Upprepa jämförbara tester och notera spridningen i stället för att jämföra bästa nya med sämsta gamla resultat. Oförändrat LCP trots mindre fil kan visa att en annan fas dominerar.

Avgör om ändringen ska behållas

Behåll ändringen om den löser problemet utan att försämra detaljer, text eller layout. Börjar förfrågan fortfarande sent, kontrollera upptäckt och laddningsinställningar. Är filen hämtad men osynlig, undersök rendering och framträdandeeffekter. Komprimering ensam löser inte dessa förseningar.