En side kan vise sit første indhold hurtigt og stadig reagere langsomt på et klik. Den kan også indlæse flot, men flytte knappen, netop som man vil trykke. Hastighed skal vurderes som en del af brugen.
Mål et konkret forløb før du optimerer
Tag en billedtung portfolio som eksempel. Besøgende skal se forsiden, åbne en case og læse dens indhold. Mål begge sider og prøv navigationen. Notér enhed, forbindelse og testvilkår. Et enkelt tal uden disse oplysninger gør det svært at sammenligne den næste ændring med udgangspunktet.
Se også efter, hvad der opleves som langsomt. Er det det store billede, som først kommer sent? Er menuen forsinket? Fryser siden, når et filter ændres? Den beskrivelse peger mod forskellige undersøgelser. Målet er at forbedre en faktisk ventetid eller barriere, ikke blot at flytte et samlet scoretal.
Tilpas ressourcerne til deres synlige opgave
Undersøg, om et lille casebillede hentes som en meget stor original. Vælg passende billeddimensioner og komprimering, og kontrollér kvaliteten i den størrelse, brugeren faktisk ser. Forsiden og en stor detaljevisning behøver ikke nødvendigvis den samme fil. Bevar samtidig billedets formål og læsbarhed.
Afsæt plads til billederne i layoutet, så teksten ikke skubbes rundt, når de ankommer. Prioritér det indhold, der er vigtigt i den første visning, og vurder særskilt, hvad der kan vente længere nede. Afprøv ændringen på den konkrete side; en teknik skal anvendes efter indholdets placering og betydning.
Undersøg arbejde og kode, som brugeren skal vente på
En animation, en tung beregning eller mange samtidige opdateringer kan påvirke betjeningen. Undersøg, hvad browseren udfører, når forsinkelsen opstår. Er hele en stor visning nødt til at blive opdateret? Kan et unødigt script fjernes? Kan en dyr funktion først indlæses, når den skal bruges?
Vær også opmærksom på eksterne indlejringer og værktøjer. De kan tilføje netværksarbejde og kode, selv når deres synlige funktion fylder lidt. Beslut, hvilken nytte de giver, og hvem der har ansvar for dem. En oversigt over de nødvendige dele er ofte et godt grundlag for at fjerne overflødigt arbejde.
Skeln mellem indlæsning, reaktion og stabilitet
Core Web Vitals omfatter LCP, INP og CLS. De beskriver henholdsvis indlæsning af et stort centralt indholdselement, reaktionen på interaktioner og uventede layoutforskydninger. De gør forskellige problemer synlige; en forbedring af ét område betyder ikke automatisk, at de andre også er løst.
Laboratorietest bruger bestemte betingelser. Målinger fra rigtige besøg omfatter forskellige enheder, forbindelser og handlinger. Derfor kan resultaterne være forskellige uden at én af målingerne er værdiløs. Brug en kontrolleret test til fejlsøgning, og anvend tilgængelige brugerdata til at forstå, hvad besøgende faktisk oplever.
Kontrollér både gevinsten og funktionerne bagefter
Gentag den relevante måling efter ændringen og sammenlign flere forsøg, hvis resultatet varierer. Kontrollér også, at billede, navigation og indhold stadig fungerer. Et fjernet script kan give en hurtigere test og samtidig have fjernet en vigtig funktion. Kvalitetsvurderingen skal omfatte begge dele.
Gem en kort før- og efterbeskrivelse med testvilkår og ændring. Hvis du kun har målt lokalt, så beskriv resultatet som en lokal test. En hurtigere test er brugbar dokumentation for optimeringen, mens effekt på besøgendes adfærd og søgetrafik kræver selvstændig observation over tid.
Tag med videre
Det vigtigste
at huske.
- Find den konkrete ventetid før du vælger en optimering.
- Vurder billeder, kode og layoutstabilitet sammen med de vigtige opgaver.
- Skeln mellem kontrollerede testresultater og oplevelsen fra rigtige besøg.
Lad os gøre det klart
Spørgsmål & svar
Hvorfor er min hjemmeside langsom?
Der kan være flere årsager, blandt andet ressourcestørrelse, serverventetid, eksterne tjenester og arbejde i browseren. Mål den konkrete forsinkelse, før du vælger en løsning.
Hvad er LCP?
Largest Contentful Paint er en måling af, hvornår det største relevante indholdselement i visningen er tegnet. Det bruges som et signal om den oplevede indlæsning.
Hvad er INP?
Interaction to Next Paint handler om sidens respons på interaktioner gennem et besøg. En side kan indlæse hurtigt og stadig have langsomme reaktioner under brug.
Hvad er CLS?
Cumulative Layout Shift beskriver uventede forskydninger i layoutet. Et billede uden afsat plads kan eksempelvis flytte tekst og knapper, når det indlæses.
Hvorfor viser Lighthouse og brugerdata forskellige resultater?
Lighthouse undersøger et kontrolleret testforløb. Brugerdata afspejler faktiske enheder, forbindelser og handlinger. Undersøg betingelserne, før resultaterne sammenlignes direkte.
Giver en hurtigere side automatisk flere kunder?
Det kan fjerne en barriere, men en bestemt forretningsvirkning følger ikke automatisk. Tilbud, indhold, relevans og hele forløbet har også betydning. Effekten må undersøges særskilt.
Skal alle billeder indlæses senere?
Nej. Det første vigtige billede og indhold længere nede har forskellige behov. Prioritér efter placering og opgave, og mål resultatet frem for at bruge samme regel overalt.
Læs selv videre
Kilder & fordybelse
Guiden bygger på disse kilder og erfaring fra egne projekter.
