Afhjælp hoppende layout: De hyppigste årsager

Q: Hvad er det mest virkningsfulde enkelttiltag?

At give hvert billede width og height og tilføje height: auto i CSS. Browseren reserverer da den rigtige plads fra begyndelsen, mens skaleringen bevares. Det tiltag udgør i praksis ofte halvdelen af problemet.

Det vigtigste kort

Seks årsager dækker næsten alle tilfælde – billeder uden mål, skrifttyper der hentes bagefter, indlejret fremmed indhold, bemærkninger der vises efterfølgende, sent indlæst CSS og dynamisk indsat indhold.
Værdien bliver jævnligt målt for godt på ens egen maskine: hurtig forbindelse, fyldt mellemlager, en anden skærmstørrelse.
Det mest virkningsfulde enkelttiltag er at give hvert billede og hvert indlejret element faste mål eller et sideforhold.
En bemærkningsbjælke, der dukker op efter indlæsningen og skubber indhold nedad, er den næsthyppigste årsag – og den letteste at afhjælpe.

De seks årsager

1. Billeder uden målangivelser

Uden width og height ved browseren ikke, hvor meget plads der skal reserveres – teksten skrider, så snart billedet ankommer.

Afhjælpning: Sæt begge attributter og tilføj height: auto i CSS, så skaleringen bevares.

2. Skrifttyper der hentes bagefter

Teksten vises først i erstatningsskriften og hopper ved skiftet, fordi de to løber forskelligt bredt.

Afhjælpning: Hent skriften på forhånd, font-display: swap, og tilpas erstatningsskriftens mål til målskriften.

3. Indlejret fremmed indhold

Videoer, kort og anmeldelseselementer kommer uden kendt højde og skubber alt nedad, når de ankommer.

Afhjælpning: Angiv en pladsholder med fast sideforhold, som indholdet indlæses i.

4. Bemærkninger der vises efterfølgende

Et samtykkebanner eller en kampagnebjælke, der dukker op øverst efter indlæsningen og skubber hele siden nedad.

Afhjælpning: Reservér pladsen fra begyndelsen, eller vis den overlejrende i stedet for indskydende.

5. Sent indlæst CSS

Får stilarket først virkning efter den første opbygning, vises siden én gang uformet og derefter formet.

Afhjælpning: Lever de regler, der er nødvendige for det synlige område, tidligt – fuldstændigt, ikke delvist.

6. Dynamisk indsat indhold

En bemærkning, en liste eller et område, som JavaScript indsætter over bestående indhold efter indlæsningen.

Afhjælpning: Indsæt det under det synlige område, eller reservér pladsen.

Vidste du det?

Årsag fem er den lumskeste, fordi den næsten aldrig optræder lokalt: på en hurtig forbindelse ankommer stilarket før den første opbygning, og intet hopper. På en langsom forbindelse ankommer det bagefter – og hele siden bygges op to gange.

At levere en del af sit CSS tidligt rækker ikke: mangler der en regel, der vedrører det synlige område, hopper netop det element. Enten fuldstændigt for det synlige område eller slet ikke – halve løsninger er her værre end ingen.

Mål rigtigt

Målevej	Hvad den viser	Faldgrube
Egen maskine, udviklerværktøjer	grove fingerpeg	for hurtig, mellemlageret fyldt
Laboratorietest i prøveværktøjet	en gentagelig værdi	én betingelse, ikke virkeligheden
Feltdata fra virkelige besøgende	hvad der faktisk sker	kræver nok trafik
Mobil med drosling af forbindelsen	den ærligste enkelttest	skal indstilles bevidst

Bemærk En god lokal værdi siger intet. Den, der blæser faren af på det grundlag, overser jævnligt netop de tilfælde, besøgende faktisk oplever – langsom forbindelse, tomt mellemlager, lille skærm. Der måles med drosling eller slet ikke.

Fra praksis

Et tilfælde, der bider sig fast: en side havde lokalt en fejlfri værdi og i prøveværktøjet en meget dårlig. Årsagen var et delvist forudleveret stilark – tre regler for områder i den synlige del manglede i det.

Lokalt blev det aldrig bemærket, fordi den fuldstændige fil ankom hurtigere end den første opbygning. Under drosling ankom den bagefter, og tre områder hoppede. Læren: Ved hoppende layout er det lokale indtryk ikke et modbevis, men blot et andet scenarie – og som regel det mest urealistiske.

Rækkefølgen ved afhjælpningen

Kontrollér alle billeder. width og height sat, height: auto i CSS. Som regel halvdelen af problemet.
Indram indlejret fremmed indhold. Pladsholder med fast sideforhold.
Kontrollér de viste bemærkninger. Overlejrende i stedet for indskydende.
Kontrollér indlæsningen af skrifttyper. Hent på forhånd, tilpas erstatningsskriften.
Kontrollér leveringen af CSS. Fuldstændigt for det synlige område.
Mål igen – med drosling. Og det efter hvert enkelt skridt, ellers ved man ikke, hvad der virkede.

Prompt

Hjælp mig med at finde og afhjælpe hoppende layout på vores
side.

Oplysninger:
- Målt værdi for layoutforskydning: [værdi, værktøj,
  mobil eller desktop]
- Elementer, der ifølge målingen forskyder sig: [liste, hvis kendt]
- Billeder med width/height-attributter? [ja / nej / delvist]
- Hvordan leveres CSS? [ekstern fil / indlejret på forhånd /
  delvist på forhånd]
- Indlejret fremmed indhold: [videoer, kort, anmeldelser, chat]
- Bliver der vist noget efter indlæsningen? [banner, bemærkning,
  kampagnebjælke]
- Hvordan indlæses skrifttyper? [angivelse]

Opgaver:
1. Indplacér hvert forskydende element under en af de seks årsager:
   billeder uden mål, skrifttyper der hentes bagefter, indlejret
   fremmed indhold, bemærkninger der vises efterfølgende, sent
   indlæst CSS, dynamisk indsat indhold.
2. Nævn for hver årsag den konkrete afhjælpning med kodeeksempel.
3. Hvis CSS kun leveres delvist på forhånd: Forklar,
   hvorfor det kan være værre end slet ikke, og hvad der skal
   kontrolleres.
4. Giv mig en rækkefølge efter virkning pr. indsats.
5. Sig mig, hvordan jeg bør måle efter hvert skridt, så jeg
   ved, hvad der virkede.

Opfind ingen måleværdier.

Konklusion

Seks årsager, og den første – billeder uden målangivelser – udgør som regel halvdelen. Den er afhjulpet på en halv time og virker med det samme.

Den vanskeligere del er målingen: den, der kontrollerer lokalt, måler et scenarie, som næppe nogen besøgende oplever. Mål med drosling, enkeltvis efter hvert skridt – ellers afhjælper man tre ting og ved ikke, hvilken af dem der virkede.

Ofte stillede spørgsmål

Hvorfor hopper indholdet, når en side indlæses?

Som regel af en af seks årsager: billeder uden målangivelser, skrifttyper der hentes bagefter med en anden løbevidde, indlejret fremmed indhold uden kendt højde, bemærkningsbjælker der vises efterfølgende, CSS der først får virkning sent, og indhold indsat af JavaScript over det synlige område.

Hvad er det mest virkningsfulde enkelttiltag?

At give hvert billede width og height og tilføje height: auto i CSS. Browseren reserverer da den rigtige plads fra begyndelsen, mens skaleringen bevares. Det tiltag udgør i praksis ofte halvdelen af problemet.

Hvorfor er værdien bedre lokalt end i prøveværktøjet?

Fordi forbindelsen på ens egen maskine er hurtig, og mellemlageret er fyldt: stilark, skrifttyper og billeder ankommer før den første sideopbygning, og intet hopper. Under realistiske betingelser ankommer de bagefter – derfor skal der måles med drosling.

Kan delvist forudleveret CSS skade?

Ja. Mangler der i den forudleverede del en regel, der vedrører et område i den synlige del, hopper netop det element, så snart det fuldstændige stilark ankommer. Enten fuldstændigt for det synlige område eller slet ikke – halve løsninger er her værre end ingen.

Hvordan afhjælper man hoppende samtykkebannere?

Ved at vise dem overlejrende i stedet for indskydende – altså liggende over indholdet uden at skubbe det nedad. Alternativt kan pladsen reserveres fra begyndelsen. Den årsag er en af de hyppigste og samtidig den letteste at afhjælpe.